最新更新
sitemap
设计搜素
首页
网页设计
艺术设计
工业设计
室内设计
网页JS特效
平面教程
DIV教程
编程开发
站长建站
设计师
素材
网站建设
微信平台
国外网站
韩国网站
个人主页
手提袋设计
CSS
网页特效
平面设计
网站设计
Flash
CMS技巧
服装网站
php教程
photoshop
画册
服务器选用
数据库
Office
网上家居
虚拟主机
域名注册
云主机
网页设计
客服QQ:8208442
当前位置:
首页
>
网络设计学院
>
web标准div教程
CSS基本布局16例
日期:10-18  来源:http://www.w3cn.org| 作者:Owen Briggs
单行单列
单行单列1
:采用float浮在左上角,固定宽度。
单行单列2
:固定在左上角,固定宽度,采用的是绝对(absolute)定位。
单行单列3
:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。
单行单列4
(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。
单行两列
单行两列1
:两列都固定宽度。第一列浮在左上角,第二列浮在第一列右边。
单行两列2
:两列都百分比宽度,但不满屏。第一列固定在左上角,第二列浮在第一列右边。
单行两列3
:两列都百分比宽度,满屏。两列都采用绝对定位。
单行两列4
:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在右上角。
单行两列5
:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在第一列右边。
单行三列
单行三列1
:左右列都绝对定位(右列定位在右上)。左列和右列固定宽度,中间列自适应页面。
单行三列2
:左列定位在左上,右列定位在右上,中间列浮在左列右面。左列和右列固定宽度,中间列自适应页面。
单行三列3
:三列都绝对定位。左列和右列固定宽度,中间列根据内容自适应。
单行三列4
(推荐):类似样式2,只是将margin: 20px属性增加在body样式中,解决了中间列在Netscape6.0中置顶的问题。
单行三列5
:左右列绝对定位,中间列自适应。宽度满屏。
顶行三列
顶行三列1
(推荐):顶行自适应页面宽度。左右列绝对定位,中间列自适应页面。
顶行三列2
:宽度满屏
本文引用地址:
http://www.cnwebshow.com//edu/article_6960.html
热点文章/相关文章
·
IE中line-height属性失效的解决办法
·
CSS实例:老外收集的CSS3动画效果
·
使用box-shadow、border-radius和transition制作
·
网页设计小技巧:解决IE不支持hover
·
网页设计中伪元素来实现图片替换的方法
·
全兼容且自适应的网页进度条设计
·
CSS3实现跨浏览器的圆角支持IE9,Safari,Chrom
·
CSS Selector的优先级教程
·
CSS使用:before和:after插入内容教程
·
CSS网页制作技巧:背景图片定位
无相关信息
推荐排行榜
猜你喜欢
网页设计欣赏排行
·
明星个人网站欣赏:LUCIA
·
设计师王坤个人网站欣赏
·
个人网站欣赏:leechanseung
·
个人主页欣赏:i-vivi
·
优秀个人网站欣赏:kennymax
·
优秀个人网站欣赏:nankaih
·
韩雪冬个人BLOG设计欣赏
·
精美个人网页设计欣赏:wingcheng
·
个人主页欣赏:爱的花园
·
精美个人网站欣赏:starpl
·
优秀个人网站欣赏:anagnoris
·
优秀个人网站欣赏:mohsensamiee
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
Copyright CnWebShow 2005-2015 All Right Reserved.
粤ICP备05067046号
互动联系方式:QQ:8208442 331633853 9961674 交流群:9107036 3848215 8850631
中国网页设计秀为中国网站设计师、设计师联盟提供优秀的网页设计,平面设计,工业设计等方面的作品展示。免费提供网页设计教程,网站CMS源码,破解源码,免费微信源码
做最专业的设计服务网站,秀出自我,秀出精彩!中国设计秀,秀---无处不在!!