CSS 网页布局排版实例
CSS 网页布局排版实例
发布时间:2016-12-27 来源:查字典编辑
摘要:代码如下:CSS排版bannerdatecontentcontentcontentcontentcontentcontentcontentc...

代码如下:

<html> <head> <style type="text/css"> <!-- body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #content{ float:left; text-align:center; padding-right:200px; /* 内容往回挤200px */ } #links{ float:right; width:200px; border:1px solid #000000; margin-left:-200px; /* 强行往左拉回200px */ text-align:center; } #footer{ clear:both; /* 不受float影响 */ text-align:center; height:30px; border:1px solid #000000; } --> </style> <title>CSS排版</title><body> <div id="container"> <div id="banner">banner</div> <div id="content"> <div> <div>date</div> <div> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> </div> </div> <div>others</div> </div> <div id="links"> <div>links<br>links<br>links<br>links</div> <div>links<br>links<br>links<br>links</div> <div>links<br>links<br>links<br>links</div> <div>links<br>links<br>links<br>links</div> <div>links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html>

提示:您可以先修改部分代码再运行

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类