网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
CSS 网页布局排版实例
(编辑:jimmy 日期: 2024/11/1 浏览:
2
)
代码如下:
<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 class="blog"> <div class="date">date</div> <div class="blogcontent"> 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 class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html>
提示:您可以先修改部分代码再运行
上一篇:
浮动后的li元素居中实现方法
下一篇:
css之自动换行实现代码
最新资源
王识贤.2005-男人泪【华特】【WAV+CUE】
群星.2006-美丽心民谣【野火乐集】【WAV+CUE】
陈明真.1990-变心的翅膀【华星】【WAV+CUE】
群星《庆余年第二季 影视原声带》[320K/MP3][29
群星《庆余年第二季 影视原声带》[FLAC/分轨][1
群星《狐妖小红娘月红篇 电视剧原声带》[320K/M
英雄联盟s14四强淘汰赛规则是什么 全球总决赛四
英雄联盟s14四强赛怎么分组 S14全球总决赛四强赛
英雄联盟s14四强赛抽签规则是什么 S14全球总决赛
ButterQuartet-ScintillaEarlyItalianStringQua
首页
音乐
电影
资源