HTML的布局

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

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

类似于:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

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="container">

<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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。