仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 706|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 带来一篇用CSS的float和clear属性举行三栏网页结构

[复制链接]
兰色精灵 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:31:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
网页制造Poluoluo文章简介:用CSS的float和clear属性举行三栏网页结构.
三栏结构是最多见的网页结构,次要页内容放在两头一栏,边上的两栏安排导航链接之类的内容。基础结构通常为题目之下安排三栏,三栏占有全部页面的宽度,最初在页的底端安排页脚,页脚也占有全部页面宽度。本文先容一种用CSS的float和clear属性来取得三栏结构的办法。
尽年夜多半网页计划者都熟习传统的网页计划手艺,用这些手艺能够天生带有表格、创立流动宽度结构大概“液态”(它能够依据用户扫瞄器窗口宽度主动伸缩)结构的网页。
基础办法
基础的结构包括五个div,即题目、页脚和三栏。题目和页脚占有全部页宽。左栏div和右栏div都是流动宽度的,而且用float属性来把它们挤压到扫瞄器窗口的左边和右边。中栏实践上占有了全部页宽,中栏的内容在左、右两栏之间“流淌”。因为中栏div的宽度其实不流动,因而它能够依据扫瞄器窗口的改动举行需要的伸缩。中栏div的左边和右边的添补(padding)属性包管内容布置在一个划一的栏中,乃至当它舒展到边栏(左栏大概右栏)的底端也是如许。
三栏结构的一个例子
XHTML代码:
以下是援用片断:
  1. <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代码:
以下是援用片断:
  1. 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:08 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
精灵巫婆 该用户已被删除
板凳
发表于 2015-1-24 14:40:51 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
再现理想 该用户已被删除
地板
发表于 2015-2-1 18:07:15 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
第二个灵魂 该用户已被删除
5#
发表于 2015-2-7 14:35:38 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
小妖女 该用户已被删除
6#
发表于 2015-2-22 19:24:40 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
小女巫 该用户已被删除
7#
发表于 2015-3-14 11:08:22 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
海妖 该用户已被删除
8#
发表于 2015-3-21 06:15:24 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-24 00:12

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表