CSS布局

最新推荐文章于 2024-08-22 12:33:24 发布

PT、小小马

最新推荐文章于 2024-08-22 12:33:24 发布

阅读量136

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_44862918/article/details/107074642

版权

几个月前写的一个小的纯css布局，借鉴意义比较足，所以共享出来。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">
       * {
           margin: 0px;
           padding: 0px;
       }
       .content {
           height: 200px;
           width: 400px;
           background: pink;
           margin: 0 auto;
           margin-top: 100px;
           position: relative;
       }
       .content-s {
           height: 50px;
           width: 50px;
           background: purple;
           position: absolute;
           left: 50%;
           margin-left: -25px;
           top: 50%;
           margin-top: -25px;
       }
       .c_1 {
           background: red;
           width: 20px;
           height: 20px;
           list-style: none;
           position: absolute;
           left: 0px;
           top: 50%;
           margin-top: -10px;

       }
       .c_2 {
           background: black;
           width: 20px;
           height: 20px;
           list-style: none;
           position: absolute;
           right: 0px;
           top: 50%;
           margin-top: -10px;
       }
   </style>
</head>
<body>
   <div class="content">
       <div class="content-s">
       <li class="c_1"></li>
       <li class="c_2"></li>

       </div>
       <li class="c_1"></li>
       <li class="c_2"></li>

   </div>