day04-css进阶

1、弹框练习几句关键代码

<h1>提示框</h1> // 提示标题用h1标签，因为有语义的标签在搜索引擎中是有权重的。
position: fixed; // 固定定位，在滑动浏览器的时候依然保持位置不变。
left:50%; // 使用固定定位之后就无法使用auto来左右居中了，可以通过百分比来确定位置
margin-left:-250px; // left50%之后是以0，0为原点的，所以要回退物体宽度的一半。
width:100%;height:100%; // 高度百分比长度，在定位的时候支持；
z-index:1000; // 元素层级，其实就是z轴上的位置，数值越大，就排在越前面。0-正无穷
opacity:0.6; // 透明度，数值越小越透明。0 - 1.0之间;
filter: alpha(opacity = 60); // ie浏览器的透明度设定，0-100之间；

2、background 背景

background-color:#000； // 背景色,有以下几种值：#000；#000000; red;rgb(255,255,255);
background-image:url(image/bg.jpg); // 设置背景图片
background-repeat: no-repeat; // 设置不重复,repeat; no-repeat;repeat-x;repeat-y;
background-position:right top; // 背景定位：水平left center right 垂直top center bottom;
background-position:100px bottom; // 背景定位，可以用数值，也可以混用,可以写负值
background-position:30% 50%; // 整体区域的百分比对齐了背景图片的百分比；
background-attachment:fixed; // 固定背景图片。其实是基于浏览器的固定定位
background:no-repeat url(images/bg.jpg) gold 100px 10px; // 重复，背景图，背景色，距左100px，距上10px;

3、雪碧图，精灵图

.list li{background:url(image/bg01.png) no-repeat 0px 0px;} // 设定list中所有的背景图
.list .li01{background-position:0 -50px;} // 给每一个li设定背景图的位置，形成雪碧图

4、选择器权重的计算

.con div{} // 类选择器10+标签选择器1 = 11；
.con div.box{} // 类选择器10 + 标签选择器1 + 类选择器10 = 21；
#div1{} // id选择器100；
<div class=“box” id=“div1” style=“color:aqua”>哈哈哈</div> // 内联选择器1000；
.con div{ color: red !important;} // !important 权重是10000；

5、表格

table>tr>th/td; // <table><tr><th>/<td>,th是标题，td是单元格
<th colspan=“2"></th> // 单元格水平合并，注意要把多余的删掉
<td rowspan=“2”></td> // 单元格垂直合并，注意把多余的删掉
border-collapse: collapse; // 边框合并，可用值：separate collapse;
text-align:center; // 水平对齐：left center right;
vertical-align: middle; // 垂直对齐，top middle bottom; vertical-align只能用于表格

6、特征布局关键代码

background: url(images/new.png) no-repeat;
position: absolute; // 绝对定位，注意父布局需要定位。
left:434px； // 距左
top:-13px; // 距上

7、图片格式

.jpg 图片
.gif 动图
.png 可以有透明背景的图片
.svg 矢量图，不能支持很多颜色。