布局(三)——固定浮动布局
来源:互联网 发布:王俊凯古装知乎 编辑:程序博客网 时间:2024/06/04 20:17
3. 固定浮动布局
实践部分
html代码
css代码
// 1.所谓固定浮动——固定大小,不能随着视窗改变
// 2.固定——设置块状width为像素值
// 3.中间两列的浮动——首先在两列下方在加一层块(div),
// 将左导航(nav)和右内容(main)包裹在其中;
// 不然中间两列位置不能固定,会随窗口值的变化而错位。
// 4.最底层 设置好后,左右两列分别左浮动和右浮动即可。
// 需要注意的一点是:同一水平线上的宽度值的总和。
// 5.设置块的水平居中——margin:0 auto;(与{margin-left:auto;margin-right:auto;}的效果一样) 。
*{
margin:0;
padding:0;
}
body{
margin:10px;
}
#header{ // 固定浮动——宽度固定,采用像素设定
border:1px solid black;
width:600px;
height:60px;
margin:0 auto; // 块居中
line-height:60px; // 上下居中——必须让行高填满整个header
background:#ccc;
margin-bottom:10px;
}
#header h1{
font-size:16px;
text-align:center; //标题垂直(左右)居中
}
#content{ //将nav和main包裹起来,防止错位
width:600px;
margin:0 auto;
}
#nav{
border:1px solid black;
width:200px;
margin-bottom:10px;
float:left;
}
#nav ul{
text-align:center;
line-height:150%;
list-style-type:none;
}
#main{
border:1px solid black;
width:380px;
margin-bottom:10px;
float:right;
}
#main p{
padding:10px;
text-indent:36px;
letter-spacing:2px;
line-height:150%;
}
#footer{
clear:both; // 清除左右浮动
border:1px solid black;
width:600px;
height:60px;
margin:0 auto;
}
#footer p{
text-align:center;
line-height:60px;
}
浏览器框值正常状态下的布局显示:
浏览器框值缩小状态下的布局显示——布局固定大小,不能随着视窗改变而改变:
0 0
- 布局(三)——固定浮动布局
- 布局(三)——固定浮动布局
- 布局(一)——流体浮动三列布局
- 布局(一)——流体浮动三列布局
- 三栏布局:浮动布局、绝对布局、(相对)圣杯布局、双飞翼布局、中间固定两边自适应总结
- 浮动布局——margin & 闭合浮动
- 三栏布局——左右固定,中间自适应
- 《精彩绝伦的CSS》——布局(三)遏制浮动
- css布局——文档流布局、浮动布局
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
- CSS布局模型(二)——浮动模型
- 浮动布局
- 浮动布局
- 浮动布局
- Web布局连载——两栏固定布局
- CSS 布局总结——固定宽度布局
- CSS 布局总结——固定宽度布局
- html学习笔记(2)——页面布局之浮动布局
- 初步认识 LESS
- HDU1241 Oil Deposits DFS
- CSS基线之道
- Android中bindService的使用方法
- CUDA数组分配
- 布局(三)——固定浮动布局
- 布局(二)——流体定位三列布局
- UVA - 10570 Meeting with Aliens 暴力
- 互联网定律
- 旋转数组的最小数字
- 【资料整理】“将模板放在头文件中”
- 6 Administering Backup and Recovery
- c++实现快速排序
- 布局(一)——流体浮动三列布局