仓酷云

标题: 来讲讲：CSS教程：三列流动网页结构实例 [打印本页]

作者: 逍遥一派 时间: 2015-1-16 00:01
标题: 来讲讲：CSS教程：三列流动网页结构实例
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：我们的解说会包括一些尺度元素，如logo、顶栏、导航栏、文本地区、用于文章分类的中列和用于拔出GoogleAdsense120X600告白的右边列。
　　明天破洛洛将向人人解说怎样经由过程计划一个HTML/CSS的基础布局，来制造一个复杂且经常使用的三列式流动页面结构。
　　我们的解说会包括一些尺度元素，如logo、顶栏、导航栏、文本地区、用于文章分类的中列和用于拔出GoogleAdsense120X600告白的右边列。以是您完整能够将这些代码疾速拷贝偏重新使用在本人的前端开辟项目中。
HTML布局

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

　　这个布局实在已能够间接利用了。您只需再从头界说字体、背景色彩、每一个层和HTML标签的字体作风和一些其他自界说类。

点击下载源代码文件
步骤一:HTML文件布局

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

<divid=”container”>
<divid=”topbar”>顶栏/Logo层</div>
<divid=”navbar”>
<ahref=“index.html?home”>Home</a>
<ahref=“index.html?about”>About</a>
<ahref=“mailto:myemailaddres@email.com”>Contactme</a>
</div>
<divid=”main”>
<divid=”column_left”>
<h1>文章题目</h1>
<h2>2008年12月5日</h2>
<p>在这里增加您的文本内容</p>
</div>
<divid=”column_right”>
<h3>分类</h3>
右边内容增加分类或widget(twitter、我博客的读者等…)
</div>
<divid=”column_right_adsense”>
<h3>AdSense</h3>
Adsense120X600
</div>
<!–Don’tremovespacerdiv.Solveanissueaboutcontainerheight–>
<divclass=”spacer”></div>
</div>
<divid=”footer”>?2008Informationaboutyoursite</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:solid1px#DEDEDE;padding:4px0;margin-bottom:10px;}
a:link,a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/*——————————
页面布局
——————————*/
/*#containerhasanabsolutewidth(780pixel)*/
#container{width:780px;margin:0auto;}
#topbar{width:auto;display:block;height:60px;}
#navbar{width:auto;display:block;height:28px;}
#navbara{heigth:28px;line-height:28px;padding:08px;display:inline;}
#main{width:auto;display:block;padding:10px0;}
#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:10px0;font-size:11px;color:#666666;}
/*——————————
自界说类
——————————*/
/*在这里增加您的自界说类…*/

保留一切文件然后就能够尝尝了！
点击下载源代码文件

你可以轻松地控制页面的布局。

作者: admin 时间: 2015-1-17 23:52
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 活着的死人 时间: 2015-1-24 22:38
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 小魔女 时间: 2015-2-2 16:05
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 因胸联盟 时间: 2015-2-8 03:20
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 乐观 时间: 2015-2-24 10:57
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 分手快乐 时间: 2015-3-7 12:09
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 若相依 时间: 2015-3-15 06:48
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 不帅 时间: 2015-3-21 22:45
可以使用 CSS 检查工具进行设计。

欢迎光临仓酷云 (http://ckuyun.com/)

Powered by Discuz! X3.2