仓酷云

标题: 今天来学习经常使用的DIV+CSS网站结构的基础框架布局－完全版 [打印本页]

作者: 因胸联盟 时间: 2015-1-16 10:38
标题: 今天来学习经常使用的DIV+CSS网站结构的基础框架布局－完全版
使用Div+css所费功夫与收入不成正比，利用table可以大大减少工作量。而上市公司的期望目标不同对Div+css的认同和投入要大一些。

这个模板是摆布两列结构模板，不再是最基本的搭建框架，更多的块布局也做出来了，假如切合这类布局的能够间接拿来利用（我做的网站年夜部分都是这类布局的，嘿嘿^_^）。在IE和FF下测试没变形，但没测试W3C认证，估量还通不外（一般兼容的款式通不外）。

HTML页面布局代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>经常使用的DIV+CSS网站结构的基础框架布局－完全版</title>
<linkhref="/css/layout.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divid="container">
<divid="header">
<h1>头部</h1>
</div>
<divclass="clearfloat"></div>
<divid="nav">
<ul>
<li><ahref="#">导航一</a></li>
<li><ahref="#">导航二</a></li>
<li><ahref="#">导航三</a></li>
<li><ahref="#">导航四</a></li>
<li><ahref="#">导航五</a></li>
</ul>
</div>
<divid="mainContent">
<divid="main">
<divclass="mainbox">
<h2>块题目</h2>
<ul>块内容</ul>
</div>
</div>
<divid="side">
<divclass="sidebox">
<h4>块题目</h4>
<ul>块内容</ul>
</div>
</div>
</div>
<divclass="clearfloat"></div>
<divid="footer">
底部
</div>
</div>
</body>
</html>

CSS款式表layout.css代码：

@charset"utf-8";
/*CSSDocument*/

@importurl("/css/global.css");
/*body*/
#container{margin:0auto;width:950px;}

/*header*/
#header{height:50px;background:#ff911a;}
#headerh1{padding:10px20px;}
#nav{background:#FF6600;height:24px;margin-bottom:6px;}
#navulli{float:left;}
#navullia{display:block;padding:4px10px2px10px;color:#fff;text-decoration:none;}
#navullia:hover{text-decoration:underline;}
/*main*/
#mainContent{overflow:auto;zoom:1;margin-bottom:6px;}
#side{width:200px;float:left;}
.sidebox{border:1pxsolid#ed6400;margin-bottom:6px;}
.sideboxh4{background:#ff911a;padding:2px6px;border-bottom:1pxsolid#ed6400;color:#fff;}
.sideboxul{padding:4px6px;}
#main{width:742px;float:right;}
.mainbox{border:1pxsolid#ed6400;margin-bottom:6px;}
.mainboxh2{background:#ff911a;padding:2px6px;border-bottom:1pxsolid#ed6400;color:#fff;}
.mainboxul{padding:4px6px;}
/*footer*/
#footer{border-top:3pxsolid#ccc;height:50px;text-align:center;padding:6px;}

被包括的CSS款式表global.css代码（把用于全局的款式独自放在一个款式表中，制止反复，便利挪用）：

@charset"utf-8";
body{margin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{padding:0;margin:0;}
h1{font-size:20px;font-family:microsoftyahei;}
h2{font-size:14px;}
h3{font-size:14px;font-weight:normal;}
h4{font-size:12px;}
h5{font-size:12px;font-weight:normal;}
ul{list-style:none;}
img{border:0px;}
a{color:#195cb5;text-decoration:none;}
a:hover{color:#f00;}

.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}

并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。

作者: 爱飞 时间: 2015-1-18 07:32
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 活着的死人 时间: 2015-1-25 09:56
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 小女巫 时间: 2015-2-2 21:50
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 不帅 时间: 2015-2-8 07:50
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 简单生活 时间: 2015-2-25 02:27
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 若天明 时间: 2015-3-7 16:57
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 柔情似水 时间: 2015-3-15 09:49
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 海妖 时间: 2015-3-22 01:07
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

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