三列固定网页布局实例

　　在学css的时候会讲解包标准元素用于文章分类的中列和用于插入广告的右侧列。那么今天爱站技术频道将向大家讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

　　我们可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。 HTML结构

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

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

　　点击下载源代码文件 步骤一:HTML文件结构

　　创建一个新页面，并且把以下代码复制然后粘贴到

　　标签内:

　　顶栏/Logo层

　　“index.html?home”>Home

　　“index.html?about”>About

　　“mailto:myemailaddres@email.com”>Contact me

　　文章标题

　　2008年12月5日

　　在这里添加您的文本内容

　　分类

　　右侧内容添加分类或widget (twitter、 我博客的读者等…)

　　AdSense

　　Adsense 120 X 600

　　? 2008 Information about your site

　　步骤二:CSS文件

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

　　/* ——————————

　　HTML重定义标签

　　—————————— */

　　body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

　　input, form, textarea

　　h1, h2, h3, h4, h5, h6{margin:0; padding:0;}

　　h1{font-size:18px;}

　　h2{font-size:14px; color:#999999;}

　　h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

　　a:link, a:visited{color:#0033CC;}

　　a:hover{text-decoration:none;}

　　/* ——————————

　　页面结构

　　—————————— */

　　/* #container has an absolute width (780 pixel) */

　　#container{width:780px; margin:0 auto;}

　　#topbar{width:auto; display:block; height:60px;}

　　#navbar{width:auto; display:block; height:28px;}

　　#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}

　　#main{width:auto; display:block; padding:10px 0;}

　　#column_left{width:460px; margin-right:20px; float:left;}

　　#column_right{width:160px; margin-right:20px; float:left;}

　　#column_right_adsense{width:120px; float:left;}

　　div.spacer{clear:both; height:10px; display:block;}

　　#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}

　　/* ——————————

　　自定义类

　　—————————— */

　　/* 在这里添加您的自定义类 … */

　　保存所有文件然后就可以试试了!

　　点击下载源代码文件

　　三列固定网页布局实例你都学会了吗？如果你想了解更深一点的可以进入爱站技术频道进行了解哦。

原文链接:https://js.aizhan.com/web_authoring/css/6773.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有