跟燕十八学html第一课，div 布局css

最新推荐文章于 2024-10-14 23:40:45 发布

weixin_33775582

最新推荐文章于 2024-10-14 23:40:45 发布

阅读量99

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/u/2532163/blog/634933

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用css来占块布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
   div{
       height:200px;
       background: blue;
   }
   #header{
       background: green;
   }
   #main{
       background: black;
   }
   #footer{
       background: gray;
   }
</style>
</head>
    <body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
    </body>
</html>

快捷方式xhtml TAB

输入div TAB

style格式

清除float浮动布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>浮动布局float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
   #lside{
       width: 50px;
       height: 50px;
       background: green;
       float: left;
   }
   #rside{
       width: 50px;
       height: 200px;
       background: red;
       float: right;
   }
   #comm{
       height: 50px;
       background: orange;
       clear: both;   
   }
</style>
</head>
    <body>
    <div id="lside">我是左</div>
    <div id="rside">我是右</div>
    <div id="comm">我是普通布局</div>
    </body>
</html>