来谈谈：用CSS floats创立三栏页结构

只看该作者 · 发表于 2015-1-16 00:23:07

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

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

x

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
三栏结构是今朝最多见的网页结构，次要页内容放在两头一栏，边上的两栏安排导航链接之类的内容。基础结构通常为题目之下安排三栏，三栏占有全部页面的宽度，最初在页的底端安排页脚，页脚也占有全部页面宽度。

尽年夜多半网页计划者都熟习传统的网页计划手艺，用这些手艺能够天生带有表格、创立流动宽度结构大概“液态”（它能够依据用户扫瞄器窗口宽度主动伸缩）结构的网页。
如今，我们都入手下手丢弃基于表格的结构手艺，很多收集计划者正在从XHTML标志和CSS格局这一新典范中寻觅创立三栏结构的办法。用相对定位的办法从CSS中失掉流动宽度的结构其实不坚苦；可是失掉液态结构就有点坚苦了。因而，本文先容一种用CSS的float和clear属性来取得三栏液态结构的办法。
基础办法
基础的结构包括五个div，即题目、页脚和三栏。题目和页脚占有全部页宽。左栏div和右栏div都是流动宽度的，而且用float属性来把它们挤压到扫瞄器窗口的左边和右边。中栏实践上占有了全部页宽，中栏的内容在左、右两栏之间“流淌”。因为中栏div的宽度其实不流动，因而它能够依据扫瞄器窗口的改动举行需要的伸缩。中栏div的左边和右边的添补（padding）属性包管内容布置在一个划一的栏中，乃至当它舒展到边栏（左栏大概右栏）的底端也是如许。
三栏结构的一个例子
请看看用本文所先容的手艺举行三栏结构的例子。这个例子用美丽的色彩来辨别结构的各个div。上面是XHTML代码：
<body>
<divid="header">
<h1>Header</h1>
</div>
<divid="left">
Portsidetext...
</div>
<divid="right">
Starboardsidetext...
</div>
<divid="middle">
Middlecolumntext...
</div>
<divid="footer">
Footertext...
</div>
</body>
上面是CSS代码：
body{
margin:0px;
padding:0px;
}
div#header{
clear:both;
height:50px;
background-color:aqua;
padding:1px;
}
div#left{
float:left;
width:150px;
background-color:red;
}
div#right{
float:right;
width:150px;
background-color:green;
}
div#middle{
padding:0px160px5px160px;
margin:0px;
background-color:silver;
}
div#footer{
clear:both;
background-color:yellow;
}
</p>
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

只看该作者 · 发表于 2015-1-18 06:32:23

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-1-24 15:19:39

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

只看该作者 · 发表于 2015-2-1 21:57:10

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-2-7 17:31:22

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-22 20:56:37

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-7 04:10:18

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-14 12:13:49

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-3-21 08:38:56

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

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

[DIV+CSS] 来谈谈：用CSS floats创立三栏页结构

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

相关帖子