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

最新推荐文章于 2025-12-23 21:31:13 发布

原创最新推荐文章于 2025-12-23 21:31:13 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #排行

css+div 专栏收录该内容

168 篇文章

订阅专栏

本文展示了如何使用 CSS 和 DIV 进行网页布局，创建了一个包含用户列表、自由推荐等链接的导航栏，并应用了'蓝色经典'风格。通过设置 body 背景、container 的宽度和定位、globallink 的背景图像和文字位置，实现了专业而美观的网页设计。

<a href=”#” class=”article”>用户列表</a> |
<a href=”#” class=”article”>自由推荐</a> |
<a href=”#” class=”article”>最新日志</a> |
<a href=”#” class=”article”>最新评论</a> |
<a href=”#” class=”article”>热门排行</a> |
<a href=”#” class=”article”>日志搜索</a> |
<a href=”#” class=”article”>立即申请</a>
<p class=”p3”>版权所有 ©艾萨克</p>
</div>
</div>
</body>
</html>
/* 蓝色经典 */
body{
background-color:#ebf7ff;
margin: 0px;
padding:0px;
text-align:center;
}

container{

position:relative;
margin:1px auto 0px auto;
width:880px;
text-align:left;
}

globallink{

width:880px; height:210px;
margin:0px;
background-image:url(banner.jpg); /* 添加 banner图片 */
background-repeat:no-repeat;
background-color:#ebf7ff;
font-size:12px;
}