仓酷云

标题: 带来一篇用CSS的float和clear属性举行三栏网页结构 [打印本页]

作者: 兰色精灵 时间: 2015-1-15 23:31
标题: 带来一篇用CSS的float和clear属性举行三栏网页结构
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
网页制造Poluoluo文章简介：用CSS的float和clear属性举行三栏网页结构.
三栏结构是最多见的网页结构，次要页内容放在两头一栏，边上的两栏安排导航链接之类的内容。基础结构通常为题目之下安排三栏，三栏占有全部页面的宽度，最初在页的底端安排页脚，页脚也占有全部页面宽度。本文先容一种用CSS的float和clear属性来取得三栏结构的办法。
尽年夜多半网页计划者都熟习传统的网页计划手艺，用这些手艺能够天生带有表格、创立流动宽度结构大概“液态”(它能够依据用户扫瞄器窗口宽度主动伸缩)结构的网页。
基础办法
基础的结构包括五个div，即题目、页脚和三栏。题目和页脚占有全部页宽。左栏div和右栏div都是流动宽度的，而且用float属性来把它们挤压到扫瞄器窗口的左边和右边。中栏实践上占有了全部页宽，中栏的内容在左、右两栏之间“流淌”。因为中栏div的宽度其实不流动，因而它能够依据扫瞄器窗口的改动举行需要的伸缩。中栏div的左边和右边的添补(padding)属性包管内容布置在一个划一的栏中，乃至当它舒展到边栏(左栏大概右栏)的底端也是如许。
三栏结构的一个例子
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>
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

作者: 透明 时间: 2015-1-17 23:01
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 精灵巫婆 时间: 2015-1-24 14:40
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 再现理想 时间: 2015-2-1 18:07
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 第二个灵魂 时间: 2015-2-7 14:35
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 小妖女 时间: 2015-2-22 19:24
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 小女巫 时间: 2015-3-14 11:08
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 海妖 时间: 2015-3-21 06:15
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

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