使用五种定位方式实现十字路口

最新推荐文章于 2023-04-27 16:56:09 发布

weixin_34281537

最新推荐文章于 2023-04-27 16:56:09 发布

阅读量431

点赞数

原文链接：http://www.cnblogs.com/xy-milu/p/6013862.html

版权

第一种:margin 绝对定位

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>十字路口</title>
 6     <style>
 7        /* html,body{
 8             height: 100px;
 9         }*/
10         #p1{
11             width: 200px;
12             height: 200px;
13             background: #ffa9db;
14             margin-top: 100px;
15             margin-left:100px;
16         }
17         #p2{
18             width: 200px;
19             height: 200px;
20             background: #80c9ff;
21             margin-top: -200px;
22             margin-left:400px;
23         }
24         #p3{
25             width: 200px;
26             height: 200px;
27             background: #73ff5c;
28             margin-top: 100px;
29             margin-left:100px;
30         }
31         #p4{
32             width: 200px;
33             height: 200px;
34             background: #c070ff;
35             margin-top: -200px;
36             margin-left:400px;
37         }
38     </style>
39 </head>
40 <body>
41 <div id="p1">
42 </div>
43 <div id="p2">
44 </div>
45 <div id="p3">
46 </div>
47 <div id="p4">
48 
49 </div>
50 </body>
51 </html>

第二种:固定定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: fixed;

        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: fixed;
            left:20%;
        }
        #c{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position:fixed;
            top:40%;
        }
        #d{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: fixed;
            top:40%;
            left:20%
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">
</div>
</body>
</html>

第三种:float浮动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            margin-right:20px;
            margin-top: 20px;
            float:left;
        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            margin-top: 20px;
            margin-right:20px;
            float:left;
        }
        #c{
            width: 200px;
            height: 200px;
            border: 2px #73ff5c solid;
            margin-top: 20px;
            margin-right:20px;
            background-color: #73ff5c;
            float: left;
            clear: both;
        }
        #d{
            width: 200px;
            height: 200px;
            border: 2px #152427 solid;
            background-color: #152427;
            margin-top: 20px;
            margin-right:20px;
            float:left;
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">

</div>
</body>
</html>

第四种:relative相对定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
            left:250px;
            top:-200px;
        }
       #c{
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
            top:-150px;
        }
        #d {
            width: 200px;
            height: 200px;
            border: 2px #80c9ff solid;
            background-color: #80c9ff;
            position: relative;
            left: 250px;
            top: -350px;
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">
</div>
</body>
</html>

第五种:absolute绝对定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ausolute</title>
    <style>
        #a{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;

        }
        #b{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;
            left:20%;
        }
        #c{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;
            top:40%;
        }
        #d{
            width: 200px;
            height: 200px;
            border: 2px #c070ff solid;
            background-color: #c070ff;
            position: absolute;
            top:40%;
            left:20%
        }
    </style>
</head>
<body>
<div id="a">

</div>
<div id="b">

</div>
<div id="c">

</div>
<div id="d">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/xy-milu/p/6013862.html

weixin_34281537

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用五种定位方式实现十字路口

第一种:margin 绝对定位 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>十字路口</title> 6 <style> 7 /*...
复制链接

扫一扫