第七章网页

day07
知识回顾
1、浮动与定位的区别
脱离正常文档流
o float:left | right
o position:absolute | fixed
浮动脱离文档流，不脱离文本流
定位既脱离文档流，又脱离文本流
2、显示与隐藏可以通过哪些方式显示?
display属性
o display:block显示
o display:none 隐藏（元素隐藏，占位也不存在了）
visibility属性
o visibility: visible 显示
o visibility:hidden 隐藏（占位还在，“隐身”）
opacity属性
o opacity:1显示
o opacity:0 隐藏(元素透明)
3、圣杯布局的实现思路
4、左侧宽度固定，右侧宽度自适应的两栏布局，手写代码
一、等高布局
1、利用内容撑开父元素的特点实现等高布局
实现思路：
• 需要几列就需要嵌套几层
• col盒子设置背景(width:100%)
• left、center和right盒子需要浮动(同时需要给父元素清除浮动)
• 给col这几个盒子设置相对定位，将左侧和中间盒子的背景露出来
•将文字归位(margin-left)
<div class="wrap">
<div class="col1"> <!--第一列的背景-->
<div class="co12"> <!--第二列的背景-->
<div class="co13 clearfix"> <!--第三列的背景-->
<div class="left">左侧盒子</div>
<div class="center">中间盒子</div>
<div class="right">右侧盒子</div>
</div>
</div>
</div>
</div>
”的片转义字围水印~ 合并拆分× 搜索
<style>
.clearfix {
*zoom:1；
.clearfix::after (
content:"";
display：block;
clear: both;
.wrap {
width: 1000px；
margin: 0 auto;
overflow: hidden;
}
.co13>div [
min-height：200px;
.co11{
width：100%;
background：pink;
.co12 [
width：100%；
background:yellow;
/* 设置以下属性露出pink背景
position: relative;
1eft:200px；
.co13 {
width:100%；
background：tomato;
/* 设置以下属性露出yel1ow背景*/
position: relative;
left:300px；
.left {
width：200px;
float：left;
<< 2/9 > >1
的天于联到phk有景中的
margin-left:-500px;
.center 
width:300px；
float： left;
/* 将中间盒子的文字放在yellow背景中*/
margin-left:-300px;
，right [
width: 500px；
float：1eft;
</style>
优缺点：
结构复杂，需要多层嵌套，不太好理解
拓展性强，兼容性强
二、cSS精灵技术
css sprites(雪碧图)，图像拼合、贴图定位
其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-
repeat",“background-position”的组合进行背景定位
适用于一般小图标，不适合大背景大布局背景
优息；
• 减少网页的http请求，从而大大的提高页面的性能
• 图片命名上的困扰
更换风格方便
缺点：
必须要限定容器大小符合背景图元素位置，需要计算
维护的时候比较麻烦，如果页面背景有少改动，一般就要改这张合并的图片
三、cSS制作空心三角形
基本思路是，用css绘制两个三角形，通过绝对定位让两三角形不完全重叠
<div class="arrow">
<div class="arrow1"></div>
<div class="arrow2"></div>
</div>
<style>
.arrow (
position: relative;
.arrow1 {
/* 制作三角形：宽高为0，设置border, 需要的一个边框颜色留下，其他颜色设为透明
width: 0；
height:0；
border： 50px solid;
border-color:transparent red transparent transparent;
position: absolute;
left:0；
.arrow2 {
/* 制作三角形：宽高为0，设置border，需要的一个边框颜色留下，其他颜色设为透明★
width:0;
height: 0;
border: 50px solid;
border-color: transparent white transparent transparent;
position: absolute;
left:1px;
</style>
四、css滑动门技术
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
它从新的鱼度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。如微信官网导航。
滑动门核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度，以便能适应不同字数的导航栏。
实现思路：
a标签控制左门，因为导航是可以点击的，需要给a标签设置padding-left
span标签控制右门，设置background-position，添加padding-right
<div class="item">
<a href="#"><span>首页</span></a>
</div>
<style>
.item [
height：34px;
line-height: 34px；
float: left;
margin-right: 5px；
a {
display:inline-block;
height：34px;
background:url("./images/lTcb_ve.png") no-repeat left top; padding-left: 10px;
color：#fff;
text-decoration: none;
span {
display: inline-block;
height: 34px；
background:url("./images/1Tcb_ve.png") no-repeat right top; padding-right: 10px;
</style>
smnlate