来讲讲：CSS教程：三列流动网页结构实例

只看该作者 · 发表于 2015-1-16 00:01:33

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

如果单独使用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;}
/*——————————
自界说类
——————————*/
/*在这里增加您的自界说类…*/

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

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

只看该作者 · 发表于 2015-1-17 23:52:25

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

只看该作者 · 发表于 2015-1-24 22:38:09

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-2 16:05:46

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-2-8 03:20:02

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-2-24 10:57:12

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-7 12:09:00

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

只看该作者 · 发表于 2015-3-15 06:48:34

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-21 22:45:19

可以使用 CSS 检查工具进行设计。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：CSS教程：三列流动网页结构实例

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块