AM：

块元素与内联元素  ：

div与span的区别 span只能设置水平的margin（左右内外边距）

在span里面加 display：block; 内联转块（相当于给span加了上下的边距）反之

/*将块元素转换成内联元素*/ 
display: inline;
/*将元素隐藏起来*/
display: none;
/*将内联元素转换成块元素*/
display: block;

PM

 

1.相对定位：相对与元素自己本身来移动定位
2. 绝对定位:距离父类(有position样式的父类)…要是没有找到父类，就有默认的body来代替
备注；

/*z-index:值后面不要加像素 想让哪个在前面就把哪个的值设大*/
3.fixed定位相对于浏览器窗口定位 position:fixed;

/* fixed 定位:对于浏览器窗口 */
position: fixed;
left: 20px;top: 50px;

360导航狗：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>360导航狗</title>
    <style>
        #da{
            width:68px;
            height: 280px;
            position: fixed;
            right: 50px;
            top:280px;    
            background: whitesmoke;
        }
        #a1{
            width: 74px;
            height: 82px;
            position: absolute;
            position: fixed;
            right:50px;
            top:200px;
            background-image:url(img/a1.png);
        }
        
        .st{
            float: right;
            position: relative;
            bottom: 30px;
            margin-right: 10px;
        }
        .zt{
            text-decoration: none;
            color: gray;
            font-size: 7px;
        }
        .zt:hover{
            color: greenyellow;
        }
        
        #db{
            width:50px;
            height: 280px;
            position: fixed;
            right: 60px;
            bottom:70px;
        }
        #db1{
            color: gray;
            text-decoration: none;
            font-size: 10px;
        }
        #db1:hover{
            color: greenyellow;
        }
    </style>
</head>
<body>

<div id="da">
    <div>
        
        <div><img src="img/a2.png" width="31px"></div>
        <div class="st"><a href="#" class="zt">娱乐</a></div>
    </div><br>
    <div>
        <div><img src="img/a3.png" width="31px"></div>
        <div class="st"><a href="#" class="zt">看片</a></div>
    </div><br>
    <div>
        <div><img src="img/a4.png" width="31px"></div>
        <div class="st"><a href="#" class="zt">购物</a></div>
    </div><br>
    <div>
        <div><img src="img/a5.png" width="31px"></div>
        <div class="st"><a href="#" class="zt">游戏</a></div>
    </div><br>
    <div>
        <div><img src="img/a6.png" width="31px"></div>
        <div class="st"><a href="#" class="zt">生活</a></div>
    </div><br>
    <div>
        <div><img src="img/a7.png" width="31px"></div>
        <div class="st"><a href="#" class="zt">借钱</a></div>
    </div>
</div>
    <div>
        <div id="db"><a href="#" id="db1">回顶部</a></div>
    </div>
<div id="a1"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

View Code

163邮箱登录框

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>163邮箱登录框</title>
<style>
    #d{
        width: 340px;
        height: 45px;
        background-color:white;
        border: 1px solid #666666;}
    #d1{
        width: 38px;
        height: 45px;
        background-color: white;
        float: left;
        background-image: url( a.png);
        background-position:-242px 424px;
    }
    #d2{
        width: 202px;
        height: 44px;
        background-color:white;
        float: left;
    }
    #d3{
        width: 100px;
        height: 35px;
        background-color:white;
        float: left;
        padding-top:10px;
        }
    #d4{
        display:inline;
        font-size: 15px;
        padding:17px;
    }
    #d5{
        border: 0px;
        height: 43px;
        text-indent: 30px;
    }
    input{
        width: 202px;
        height: 39px;
        font-size: 15px;
    }
    #d6{
        width: 340px;
        height: 45px;
        background-color:white;
        border: 1px solid #666666;
    }
    #d7{
        width: 38px;
        height: 45px;
        background-color: white;
        float: left;
        background-image: url( a.png);
        background-position:-284px 424px;
    }
    #d8{
        border: 0px;
        text-indent: 30px;
        height: 43px;
        width: 250px;
    }
    </style>
</head>
<body>
<div id="d">
    <div id="d1"></div>
    <div id="d2">
        <input id="d5" type="text" name="user" placeholder="邮箱账号或手机号码">
    </div>
    <div id="d3"><span id="d4">@163.com</span></div>
</div>
<br>
<div id="d6">
    <div id="d7"></div>
        <input id="d8" type="text" placeholder="输入密码">
</div>
</body>
</html>

View Code

 

版权声明：本文为zs0322原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zs0322/p/10635592.html