黑马程序员php培训：4天带你搞定CSS视频教程(11)
- 格式：docx
- 大小：202.47 KB
- 文档页数：3
回顾
1、十六进制和十进制的转换
a)十进制位的权重是10，从右向左是10的0次方，10的一次方，10的二次
方…，同理16进制位的权重是16，从右向左是16的0次方，16的一次方，
16的二次方…,16进制有16个数，（0-9，A，B，C，D，E，F）。
练习
（1C）16=（28）10
（236）16=（566）10
（236）8=（158）10
（1001）2=（9）10
（1111）2=（15）10
1K=1024b=210
1M=1024K=220
1G=1024M=230
1T=1024G=240
2、关于颜色的介绍
a)光的三原色是RGB，R（red红色）G(green 绿色) B（blue蓝色），所有的
光线都是由这三种颜色组成，每种颜色分为256等分（0-255），如果用10
进制表示颜色，颜色的位数可能是1位，可能是2位，也可能是3位，这样表
示容易产生歧义，我们将10进制转成16进制表示，用两位的十六进制数表示
颜色。
比如#112233，这个颜色是11红+22绿+33的蓝组成。
#110000 红色
#005500 绿色
#000061 蓝色
#000000 黑色
#FFFFFF 白色
#C1C1C1 灰色
3、Overflow：hidden
a)如果指定宽高，超出的部分隐藏
b)如果没有指定宽高，而且子元素浮动，overflow:hidden可以触发
haslayout属性。
c)Overflow:auto:超出了指定高度就出现垂直滚动条
4、margin后面参数详解
a)margin:10px; 上下左右
b)margin:10px 20px; 上下——左右
c)margin:10px 20px 30px; 上——左右——下
d)margin:1px 2px 3px 4px; 上—右—下—左
e)margin和padding的规则是一样的
5、圆角表格
a)传统的方法：切片
b)css3：border-radius
6、定位（position）
a)绝对定位（absolute）
i.以页面的左上角为圆点
ii.不保留自己的占位
iii.要以父级的左上角为圆点：父级相对，子级绝对
iv.Z-index用来调整图层的顺序
b)相对定位（relative）
i.以自己的左上角为圆点
ii.保留自己的占位
iii.z-index调整图层的顺序
c)固定定位(fixed)
i.固定的页面的某个地方。
d)静态定位（static）这是一个默认的定位方法
作业
完整代码如下：
<style type="text/css">
*{ /*清0*/
margin:0px;
padding:0px;
}
#banner{
width:780px;
background:url(images1/banner1_bg.jpg) repeat-x;
margin:auto;
}
#daohang{
list-style-type:none;
width:780px;
margin:auto;
background:url(images1/button1_bg.jpg) repeat-x;
overflow:hidden;
zoom:1;
}
#daohang li{
width:80px;
height:32px;
background:url(images1/button1.jpg) no-repeat;
font-size:12px;
float:left;
text-align:center;
line-height:32px;
cursor:pointer; /*光标移动上去变成手型*/
}
#daohang li:hover{ /*当鼠标移动到li上的时候*/
background:url(images1/button2.jpg) no-repeat;
color:#FFF;
}
</style>
</head>
<body>
<div id="banner"><img src="images1/banner1_left.jpg" /></div> <ul id="daohang">
<li>首页导读</li>
<li>在线用户</li>
<li>查询网友</li>
<li>在线好友</li>
<li>好友名单</li>
<li>查看讯息</li>
</ul>
</body>。
