《精通CSS高级WEB标准解决方案》第七章布局

最新推荐文章于 2024-08-26 10:10:15 发布

slime09

最新推荐文章于 2024-08-26 10:10:15 发布

阅读量416

点赞数

文章标签： css web float wrapper div url

本文链接：https://blog.csdn.net/slime09/article/details/5515175

版权

我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。

第七章布局
所有CSS布局技术都依赖于三个基本概念：定位、浮动和空白边操纵
7.1 让设计居中[code]
<body>
<div id='wrapper'>
</div>
</body>
/*最明了的居中方案，可惜IE6不支持*/
#wrapper{
width:720px;
margin:0 auto;
}
/*利用Ie对text-align的理解BUG解决IE6支持问题*/
body{
text-algin:center;
min-width:760px;/*如果窗口宽度小于760px就不再自适应缩小*/
}
#wrapper{
width:720px;
margin:0 auto;
text-algin:left;
}
/*也可以采用这种方法,只需定义wrapper一个元素*/
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
[/code]7.2 固定宽度的布局[code]
/*这是一个非常常见的两列布局*/
<div id='wrapper'>
<div id='branding'>
...
</div>
<div id='content'>
...
</div>
<div id='mainNav'>
...
</div>
<div id='footer'>
...
</div>
</div>
/*两列布局的CSS设定很简单*/
#content{
width:520px;
float:right;
}
#mainNav{
width:180px;
float:left;
}
#footer{
clear:both;
}
/*让文字与容器边缘保持距离*/
#mainNav{
padding-top:20px;
padding-bottom:20px;
}
#mainNav li{
padding-left:20px;
padding-right:20px;
}
#content h1,#content h2,#content p{
padding-right:20px;
}
/*三列布局，可以在右侧content中再添加一栏*/
<div id='content'>
<div id='mainContent'>
......
</div>
<div id='secondaryContent'>
...
</div>
</div>
/*只要一个左对齐，另一个右对齐就可以了*/
#mainContent{
width:320px;
float:left;
}
#secondaryContent{
width:180px;
float:right;
}
[/code]流体布局[code]
/*布局宽度根据窗口大小自适应*/
#wrapper{
width:85%;/*两边留空保持美观*/
}
#mainNav{
width:23%;
float:left;
}
#content{
width:75%;
float:right;
}
[/code]弹性布局[code]
/*根据字体大小设定布局宽度*/
body{
font-size:62.5%;
}
#wrapper{
width:72em;
margin:0 auto;
float:left;
}
#content{
width:52em;
float:right;
}
#mainContent{
width:32em;
float:left;
}
#secondaryContent{
width:18em;
float:right;
}
[/code]弹性-流体混合布局[code]
#wrapper{
width:72em;
max-width:100%;
margin:0 auto;
text-align:left;
}
#mainNav{
width:18em;
max-width:23%;
float:left;
}
#content{
width:52em;
max-width:75%;
float:right;
}
#mainContent{
width:32em;
max-width:66%;
float:left;
}
#secondaryContent{
width:18em;
max-width:31%;
float:right;
}
[/code]在弹性和流体布局中防止图片溢出[code]
/*把图片定义为背景，这样窗口过小时，图片会只显示其中的一部分*/
#branding{
height:171px;
background:url(images/branding.png) no-repeat left top;
}
<div id='branding'></div>
/*也可以改变容器大小达到相同目的*/
#branding{
width:100%;
overflow:hidden;
}
<div id='branding'>
<img src='images/branding.png' width='1600' height='171' />
</div>
/*改变图片大小让它的宽度始终保持页面的1/4*/
.news img{
width:25%;
max-width:200px;
float:left;
padding:2%;
}
.news p{
width:68%;
float:right;
padding:2% 2% 2% 0;
}
[/code]faux列：拉长布局的背景占据整个布局的高度[code]
/*固定宽度的布局中很简单*/
#wrapper{
/*两列布局中，背景图片与mainNav等宽，三列布局中，则是整个wrapper的宽度*/
background:#fff url(/images/nav-bg-fixed.gif) repeat-y left top;
}
/*流动布局中，创建一个非常宽的背景图片*/
#wrapper{
background:#fff url(images/nav-faux-column.gif) repeat-y 23% 0;
}
#wrapper2{
background:url(images/secondary-faux-column.gif) repeat-y 77% 0;
}
[/code]

slime09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《精通CSS高级WEB标准解决方案》第七章布局

我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。第七章布局所有CSS布局技术都依赖于三个基本概念：定位、浮动和空白边操纵7.1 让设计居中[code]/*最明了的居中方案，可惜IE6不支持*/#wrapper{ width:720px; margin:0 auto;}/*利用Ie对text-align的理解BUG解决IE6支持问题*/b
复制链接

扫一扫