CSS实例教程:3列固定不动网页页面合理布局案例

2021-03-15 03:42 jianzhan

大家的解读会包括1些规范元素,如logo、顶栏、导航栏栏、文字地区、用于文章内容归类的中列和用于插进Google Adsense 120X600广告宣传的右边列。
  今日脚本制作之家将向大伙儿解读怎样根据设计方案1个HTML/CSS的基础构造,来造就1个简易且常见的3列式固定不动网页页面合理布局。
  大家的解读会包括1些规范元素,如logo、顶栏、导航栏栏、文字地区、用于文章内容归类的中列和用于插进Google Adsense120X600广告宣传的右边列。因此您彻底能够将这些编码迅速复制并再次运用在自身的前端开发开发设计新项目中。 HTML构造
下图表明了我在网页页面中加上的HTML/CSS元素。

  这个构造实际上早已能够立即应用了。您只需再再次界定字体样式、情况色调、每一个层和HTML标识的字体样式设计风格和1些别的自定类。

点一下免费下载源码文档 流程1:HTML文档构造
建立1个新网页页面,而且把下列编码拷贝随后粘贴到<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”>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、 我blog的读者等…)
</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>
流程2:CSS文档
如今,建立1个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;}
/* ——————————
自定类
—————————— */

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

储存全部文档随后便可以试试了!
点一下免费下载源码文档