精通 CSS+DIV 网页样式与布局 103

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css+div 专栏收录该内容

168 篇文章

订阅专栏

本文介绍了一个具体的CSS布局案例，通过不同元素的组合实现了一个包含横幅、主要内容区域及侧边链接的页面布局。主要内容区域展示了如何使用浮动属性来调整元素位置，并通过清除浮动确保底部元素正确显示。

float:right;
width:200px;
border:1px solid #000000;
margin-left:-200px; /* 强行往左拉回 200px */
text-align:center;
}

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>