简单的CSS网页布局--一二列布局
2016-02-17 11:40
531 查看
1.一列布局
(一)一列自适应
自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html>
(二)一列固定
顾名思义,固定布局的宽度,设置固定的PX值。
只需要在上面一列自适应的HTML代码中,把width:50% 修改成 width:960px即可,当然,各部分如果要求设置的宽度不同,在每个部分的类选择器上进行适当修改即可。
2.二列布局
(一)二列自适应
二列的自适应,这时候要用到float属性。
注意:以上百分比30%和70%加起来刚好是100%,宽度会充满整个浏览器页面,如果加起来没有100%,则他们中间会空出一栏的空间出来。
(二)二列居中自适应
在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为:80%;则子代标签的宽度会基于80%的浏览器宽度来定。
(三)二列居中固定
(一)一列自适应
自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html>
<html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .head,.middle,.foot{ width: 50%; /*百分比宽度*/ margin: 0 auto; /* 典型的设置居中*/ } .head{ height: 200px; background: #F0B6CF; } .middle{ height: 500px; background: tan; } .foot{ height: 200px; background-color: #57A9D1; } </style> </head> <body> <div class="head">head</div> <div class="middle">middle</div> <div class="foot">foot</div> </body> </html>
(二)一列固定
顾名思义,固定布局的宽度,设置固定的PX值。
只需要在上面一列自适应的HTML代码中,把width:50% 修改成 width:960px即可,当然,各部分如果要求设置的宽度不同,在每个部分的类选择器上进行适当修改即可。
2.二列布局
(一)二列自适应
二列的自适应,这时候要用到float属性。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>二列自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .left{ width: 30%; background-color: #CCFF00; height: 500px; float: left; /*先左浮动,使之靠浏览器左侧*/ } .right{ width: 70%; height: 500px; background-color: bisque; float: right; /*先右浮动,使之靠浏览器右侧*/ } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> </body> </html>
注意:以上百分比30%和70%加起来刚好是100%,宽度会充满整个浏览器页面,如果加起来没有100%,则他们中间会空出一栏的空间出来。
(二)二列居中自适应
在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为:80%;则子代标签的宽度会基于80%的浏览器宽度来定。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>二列居中自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .main{ width:80%; height: 500px; margin: 0 auto; /*居中*/ } .left{ width: 30%; background-color: #CCFF00; height: 500px; float: left; /*先左浮动,使之靠浏览器左侧*/ } .right{ width: 70%; height: 500px; background-color: bisque; float: right; /*先右浮动,使之靠浏览器右侧*/ } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
(三)二列居中固定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>二列居中固定宽度</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .main{ width:960px; height: 500px; margin: 0 auto; } .left{ width: 360px; background-color: #CCFF00; height: 500px; float: left; /*先左浮动,使之靠浏览器左侧*/ } .right{ width: 600px; height: 500px; background-color: bisque; float: right; /*先右浮动,使之靠浏览器右侧*/ } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
相关文章推荐
- CSS 那么多属性,而且每个属性都有多个值怎么记?
- LESS与Sass的差异及详解
- css 中的position z-index em rem zoom 的基本用法
- CSS读书笔记:布局
- 遇到的常见JS与CSS问题及解决方法
- [分享] 通过修改CSS自定义chrome滚动条样式
- css3 forwards、backwards、both
- 从思科、Ericsson、ComScore最新报告看移动视频的发展
- css动画和渐变
- CSS“隐藏”元素的多种方法的对比
- css重点和推荐书籍
- CSS兼容大全
- 关于css的布局
- css中选择器的优先级
- css实现类似heigth:100%的方法
- 使用css(3)实现基本的几何图形,很有趣的钻石八卦实现!
- Bootstarp中CSS的使用方法
- css,js压缩
- 【原创】CSS中经常碰到的一些奇怪…
- CSS实现多种形状(一)