繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程：三列固定网页布局实例
- CSS样式表
- DIV和CSS排版中制作细线条的方法小结
- 在解决ul居中问题时想到的几点
- 网页编辑中CSS样式表技巧总结
- 一个老外弄的Clearing floats(清除浮动的方法)
- 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
- 无js5款纯div+css制作的弹出菜单标准
- 超强推荐CSS打造经典鼠标触发显示选项
- CSS网页布局入门教程5：二列宽度自适应
- CSS网页布局入门教程6：左列固定，右列宽度自适应
- CSS网页布局入门教程7：二列固定宽度居中
- CSS网页布局入门教程9：用CSS设计网站导航——横向导航
- CSS网页布局入门教程10：带当前标识的标签式横向导航
- CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版
- CSS网页布局入门教程12：纵向导航菜单
- CSS网页布局入门教程13：下拉及多级弹出式菜单
- CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
- 解读css发展历史
- 让用户自己控制网页字体的大小的css书写方法
- CSS注释、命名、继承性、样式排序等CSS技巧的小结
- CSS标签切换代码实例教程 比较漂亮
CSS样式表 中的 CSS教程：三列固定网页布局实例
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 140 ::
收藏到网摘: n/a
今天软晨学习网将向大家讲解如何通过设计一个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:[email protected]”>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 (twitter、 我博客的读者等…)
</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重定义标签
—————————— */
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;}
/* ——————————
自定义类
—————————— *//* 在这里添加您的自定义类 … */
保存所有文件然后就可以试试了！
评论 (0) All
