1.3 CSS 定位布局
笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。
正文
1.定位（position)
设定元素在文档中的位置。会将标签（元素）转换为块级。
2.定位分类（属性值）
1）static:静态定位
默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）
2）relative:相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。
3）absolute:绝对定位
脱离文档流，相对于body做偏移。
绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。
4）fixed:固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。一般来做固定导航栏。
3.z-index
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
文档流默认的z-index的值为0。
用在static和relative元素上将无效。
4.网站开发策略：先整体再局部，至顶向下，逐步细化。
1）双飞翼布局
由三列组成，两端固定，中间自适应。
双飞翼布局的优点：
（1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。
（2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
2）圣杯布局
由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。
布局时与双飞翼比增加了定位和偏移设置。
PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会。下面做一个小实验来体验一下二者的此处区别。
小实验
双飞翼布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
margin: 200px 0;
}
.cosume{
float: left;
height: 300px;
}
.center{
width: 100%;
background-color: red;
}
.left,.right{
width: 300px;
}
.left{
background-color: #00fff7;
margin-left: -100%;
}
.right{
background-color: pink;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="center cosume"> PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会 </div>
<div class="left cosume"> PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会</div>
<div class="right cosume"> PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会</div>
</div>
</div>
</body>
</html>
圣杯布局：
只需修改一些CSS样式就可以
<style>
*{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
margin: 200px 0;
padding: 0 300px;
}
.cosume{
float: left;
height: 300px;
}
.center{
width: 100%;
background-color: red;
}
.left,.right{
width: 300px;
position: relative;
}
.left{
background-color: #00fff7;
margin-left: -100%;
left: -300px;
}
.right{
background-color: pink;
margin-left: -300px;
right: -300px;
}
</style>
3）侧边栏固定布局
I）两栏布局
a)左侧固定，右侧自适应
b)左侧自适应，右侧固定
c)左右都固定
II）三栏布局
a)左侧固定，中间自适应，右侧固定
b)左侧自适应，中间和右侧固定
c)左侧和中间固定，右侧自适应
总结
本次内容比较重要，定位包括布局是重中之重。
但是，笔者觉得更重要的是，一个网页的开发策略。先整体再局部，笔者习惯先观察一个网页的布局，先将大体的HTML布局做好，再细化每个模块的CSS样式。自顶向下，从用户阅读顺序出发，做的网页才有人看，才有人喜欢看。当然，每个人开发顺序不同也是再正常不过了，笔者分享出自己的习惯，是为了给一些刚刚入门的同学一些参考，更是为了让各位指正错误，共同进步！
这里给大家推荐现在所学的网课，B站的求知讲堂有一款web前端开发的课程，我的学习笔记也是大部分都是老师借鉴老师的，再加上我学习过程中的感悟。因为老师的笔记在我心中太权威，以至于填删字句都要细细斟酌。感谢求知课堂的老师！
下图是利用今日所学做成的网页效果图：
源码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day5</title>
<link rel="stylesheet" href="../css/day5.css">
</head>
<body>
<!--总体-->
<div class="wrapper">
<!--1.header-->
<div class="header">
<!--(1)logo-->
<a href="#"><img src="../img/logo.jpg" alter="logo"></a>
<!--(2)上导航栏-->
<div class="nav-top">
<ul>
<li><a href="">主页</a></li>
<li><a href="">个人业务</a></li>
<li><a href="">公司业务</a></li>
<li><a href="">小企业</a></li>
<li><a href="">信用卡</a></li>
<li><a href="">i理财</a></li>
<li><a href="">商旅预定</a></li>
<li><a href="">今日招行</a></li>
</ul>
</div>
<!--(3)二级导航栏-->
<div class="nav-sec">
<ul>
<li><a href="">金葵花理财</a></li>
<li><a href="">私人银行</a></li>
<li><a href="">出国金融</a></li>
<li><a href="">个人贷款</a></li>
<li><a href="">空中银行</a></li>
<li><a href="">一卡通</a></li>
<li><a href="">财富账户</a></li>
<li><a href="">伙伴一生</a></li>
<li><a href="">电子银行</a></li>
<li><a href="">居家生活</a></li>
<li><a href="">储蓄业务</a></li>
<li><a href="">投资理财</a></li>
<li><a href="">网上个人银行</a></li>
</ul>
</div>
</div>
<!--2.main-->
<div class="main">
<!--(1)左侧导航栏-->
<div class="nav-left">
<ul>
<li><a href="">生意贷</a></li>
<li><a href="">生意一卡通</a></li>
<li><a href="">特色创新功能</a></li>
<li><a href="">一手住房贷款</a></li>
<li><a href="">二手住房贷款</a></li>
<li><a href="">购房专享装修贷款</a></li>
<li><a href="">购房专享车位贷款</a></li>
<li><a href="">个人消费贷款</a></li>
<li><a href="">信用贷款</a></li>
<li><a href="">金葵花客户尊享贷款</a></li>
<li><a href="">金卡客户专享贷款</a></li>
<li><a href="">工资贷款</a></li>
<li><a href="">个人汽车贷款</a></li>
<li><a href="">商业用房贷款</a></li>
<li><a href="">个人留学贷款</a></li>
<li><a href="">全国个贷中心</a></li>
<li><a href="">按揭贷款月供计算器</a></li>
</ul>
</div>
<!--(2)文档区-->
<div class="content">
<h3>个人消费贷款</h3>
<h4>适用客户</h4>
<p>所有需要申请个人消费贷款的客户</p>
<p>购车、装修、旅游、留学……各种用途任您选择！贷款金额最高可达2000万元！30年超长期限，全方位满足您各种消费需求！把您的房产变成提款机，尽情享用！</p>
<p>期限：授信期限最长可达30年</p>
<p>成数：最高7成</p>
<h4>办理流程</h4>
<p>距您成功贷款，只有三步！</p>
<p>第一步：提交申请</p>
<p>第二步：银行审批</p>
<p>第三步：提款消费</p>
<h4>您需要准备的贷款申请资料</h4>
<p>1.身份证、婚姻证明</p>
<p>2.房产证</p>
<p>3.住址证明【至少任选其一】：水、电、气、电话或物管等费用账单</p>
<p>4.收入证明【至少任选其一】：工资证明/银行流水/所得税税单/社保记录/其他收入证明</p>
<p>5.用途证明：提供相应的交易证明材料</p>
<h4>如何找到招商银行个人贷款？</h4>
<p>1.欢迎致电招商银行客户经理。</p>
<p>2.向就近招商银行网点提出申请。</p>
<p>3.拨打全国统一服务热线95555。</p>
</div>
</div>
<!--3.footer-->
<div class="nav-top">
<ul>
<li><a href="">安全说明</a></li>
<li><a href="">网站声明</a></li>
<li><a href="">隐私保密条款</a></li>
<li><a href="">网站地图</a></li>
<li><a href="">友情链接</a></li>
<li><a href="">加入收藏夹</a></li>
<li><a href="">人才招聘</a></li>
<li><a href="">手机一网通</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
background: url("../img/bg.gif") no-repeat center top;
}
.wrapper{
width: 960px;
margin: 20px auto;
}
.header{
background: url("../img/main_line.jpg") no-repeat center bottom;
}
li{
list-style: none;
}
.nav-top{
background: url("../img/main_menu_bg.gif") repeat-x;
font-weight: bold;
}
.nav-top li{
display: inline-block;
line-height: 30px;
padding: 5px 0 5px 40px;
}
.nav-top a{
text-decoration: none;
color: white;
}
.nav-top a:hover{
color: aqua;
text-decoration: underline;
}
.nav-sec li{
display: inline-block;
line-height: 30px;
padding: 5px 0 20px 10px;
}
.nav-sec a{
text-decoration: none;
color: #999999;
}
.nav-sec a:hover{
text-decoration: underline;
}
.main{
overflow: hidden;
padding: 0 0 0 200px;
}
.nav-left{
width: 200px;
float: left;
position: relative;
left: -200px;
margin-right: 20px;
}
.nav-left li{
line-height: 20px;
background: url("../img/directory_bg_big.gif");
text-align: center;
padding: 5px 0;
}
.nav-left a{
text-decoration: none;
color: black;
}
.content{
width: 100%;
float: left;
border: red 1px solid;
position: relative;
top:-512px;
}
.content h3{
background: url("../img/main_content_bg.jpg") repeat-x;
text-indent: 3em;
line-height: 35px;
padding: 0 0 10px 0;
}
.content h4,p{
line-height: 18px;
text-indent: 2em;
padding: 10px 0 10px 0;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
