脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS布局实例 >

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

互联网   发布时间：2009-04-02 19:38:50   作者：佚名   我要评论
网页制作Webjx文章简介：我们的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、 　　今天网页教学网将向大家讲解如何通过设计一个HTML/CSS的基本


我们的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插.入Google Adsense 120X600广告的右侧列。
　　今天脚本之家将向大家讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。
　　我们的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插.入Google Adsense120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。 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 (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;}
/* ——————————
自定义类
—————————— */
/* 在这里添加您的自定义类 … */


保存所有文件然后就可以试试了！
点击下载源代码文件

相关文章

  • 一文汇总 CSS 两列布局和三列布局的具体使用

    这篇文章主要介绍了一文汇总 CSS 两列布局和三列布局的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小
    2020-06-28

  • 利用CSS3的flexbox实现水平垂直居中与三列等高布局

    这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考
    2016-09-12

  • CSS实现页面两列布局与三列布局的方法示例

    这篇文章主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下
    2016-06-23

  • CSS三列布局的多种表现形式

    本文为大家详细介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应五种情况，感兴趣的小伙伴们可以参考一下
    2016-05-04

  • 用CSS实现三列DIV等高布局以传达更好的视觉效果

    页面布局中经常遇到等高布局的情况，为了得到更好的视觉效果，就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说
    2014-09-03

  • CSS三列布局两端固定宽度中间自适应

    CSS三列布局走出HTML布局阴影，两端固定宽度，中间自适应结构，下面有个不错的示例，大家可以参考下
    2014-02-27

  • 详解CSS多种三列自适应布局实现

    这篇文章主要介绍了详解CSS多种三列自适应布局实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
    2021-02-24

最新评论

关注微信公众号

扫一扫