DIV+CSS布局属性的基础的学习笔记！

最新推荐文章于 2024-05-05 02:50:11 发布

原创最新推荐文章于 2024-05-05 02:50:11 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

DIV+CSS布局属性

div和span

盒模型：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>盒模型</title>
       <style type="text/css">
           *{margin: 0;}
           .d1{
               width:500px;
               height: 500px;
               background: #666;
               margin: 100px;
               border: red;
               padding: 40px;
           }
       </style>
   </head>
   <body>
       <div class="d1">
       <img src="timg.jpg" width="300" height="400"/></div>
   </body>
</html>

运行结果：

布局相关的属性

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>盒模型</title>
       <style type="text/css">
           .img1{position: absolute;
           left: 100px;
           top:160px;
           border: red solid 2px;
           z-index: 2;
           display: none;}

           .img2{position: absolute;
           left: 100px;
           top:160px;
           border: yellow solid 2px;
           z-index: 1;
           display: block;
           float: right;
           }
       </style>
   </head>
   <body>
       <img src="timg.jpg" width="300" height="400"class="img1"/>
       <img src="timg.jpg" width="300" height="400"class="img2"/>
       <h1 style="position: absolute;left: 0; top:0;z-index: 1;color: red;">好好学习，天天向上</h1>
       <h1 style="position: absolute;left: 2px; top:2px;z-index: 2;color: blue;">好好学习，天天向上</h1>
       <h1 style="position: absolute;left: 4px; top:4px;z-index: 3;color: purple;">好好学习，天天向上</h1>
       <h1 style="position: absolute;left: 6px; top:6px;z-index: 4;color: gold;">好好学习，天天向上</h1>
       <h1 style="position: absolute;left: 8px; top:8px;z-index: 5;color: green;">好好学习，天天向上</h1>
   </body>
</html>

运行结果：

DIV+CSS布局属性