CSS教程：三列固定网页布局实例

作者佚名技术来源 CSS技术浏览发布时间 2012-03-03

　　今天网页教学网将向大家讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

　　我们的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。

HTML结构

下图说明了我在页面中添加的HTML/CSS元素。

网站-三列布局-实例

　　这个结构其实已经可以直接使用了。您只需再重新定义字体、背景颜色、每个层和HTML标签的字体风格和一些其他自定义类。

点击下载源代码文件

步骤一:HTML文件结构

创建一个新页面，并且把以下代码复制然后粘贴到<body>标签内:

<div id=”container”>
<div id=”topbar”>顶栏/Logo层</div>
<div id=”navbar”>
   <a href=“index.html?home”>Home</a>
   <a href=“index.html?about”>About</a>
   <a href=“mailto:myemailaddres@email.com”>Contact me</a>
</div>
<div id=”main”>
<div id=”column_left”>
   <h1>文章标题</h1>
   <h2>2008年12月5日</h2>
   <p>在这里添加您的文本内容</p>
</div>
<div id=”column_right”>
   <h3>分类</h3>
   右侧内容添加分类或widget (*******、我博客的读者等…)
</div>
<div id=”column_right_adsense”>
   <h3>AdSense</h3>
   Adsense 120 X 600
</div>
<!– Don’t remove spacer div. Solve an issue about container height –>
<div class=”spacer”></div>
</div>
<div id=”footer”>? 2008 Information about your site</div>
</div>

步骤二:CSS文件

现在,创建一个CSS文件然后链接到index.html

/* ——————————
HTML重定义标签
—————————— */
b

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 你真的了解CSS吗？你是属于哪个层次？下一篇: css框架(CSS Frameworks)：CSS框架应用

关于CSS教程：三列固定网页布局实例的所有评论

随机推荐