当前位置：首页 > news >正文

黑马程序员__div+css布局总结

news 来源：原创 2024/5/6 2:43:29

------- <a href="http://www.itheima.com" target="blank">android培训</a>、<a href="http://www.itheima.com" target="blank">java培训</a>、期待与您交流！ ----------
1.div将多个div放入一行

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>div浮动效果</title>
 6 </head>
 7  <style>
 8    body{ 
 9    margin: 0px 1px 2px 3px;
10    }
11    #father {
12     background-color:#FF0000;
13     width:100%;
14     height:100px;
15     border:1px dashed green;
16     }
17    #son1{
18     float:left;
19    }
20    #son2{
21     float:left;
22    }
23    #son3{
24     float:left;
25    }
26   
27    
28  
29 </style>
30 <body>
31   <div id="father">
32     <div id="son1">aaaaaa</div>
33     <div id="son2">bbbbbb</div>
34     <div id="son3">cccccc</div>
35  
36 
37   </div>
38 </body>
39 </html>

效果如图：

2.使用div+css标准方法是元素居中

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <style>
 8 .upload{
 9   text-align:center;
10   margin-left:auto;
11   margin-right:auto;
12 
13 }
14 </style>
15 <body>
16  <form>
17   
18    <div class="upload">
19    上传文件一<input type="file" name="file1" class="text"/><br/>
20    上传文件二<input type="file" name="file2" class="text"/><br/>
21    </div>
22    
23    
24    
25 
26   </form>
27 </body>
28 </html>

关键内容：
text-align:center;
margin-left:auto;
margin-right:auto;

3.清除页面样式内容

#clear{
     clear:both;
   }
  <div id="clear"></div>

4.实现第一行的浮动

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>div相对定位</title>
 6 </head>
 7 <style>
 8 
 9  #father {
10     background-color:#FF0000;
11     width:100%;
12     height:100px;
13     border:1px dashed green;
14     }
15   #son1{
16   position:relative;
17    left:60%;
18   }
19   #son2{
20   
21   }
22 </style>
23 
24 <body>
25 <div>
26     <div id ="father">
27     <div id="son1">aaaaa</div>
28     <div id ="son2">bbbbb</div>
29     </div>
30 </div>
31   
32 </body>
33 </html>