HTML的布局 - tyne0921

HTML的布局

看了几天的CSS/HTML, 终于有了一定的了解，可以计划弄个个人网站来玩玩；

在草稿纸上涂鸦整个HTML文档分几个模块组成，且每个模块中想要设计的东西是什么？

类似于：

<!DOCTYPE html>

<html>

<head>

div#container{width:500px}

div#header {background-color:#99bbbb;}

div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}

div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}

div#footer {background-color:#99bbbb;clear:both;text-align:center;} //当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

h1 {margin-bottom:0;}

h2 {margin-bottom:0;font-size:18px;}

ul {margin:0;}

li {list-style:none;}

</style> </head>

<body>

<div id="header"> <h1>Main Title of Web Page</h1> </div>

<div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div>

<div id="content">Content goes here</div>

<div id="footer">Copyright hello.com</div>

</div>

</body>

</html>

posted on 2014-01-10 14:54 tyne0921 阅读(172) 评论(0) 收藏举报

刷新页面返回顶部