十：框架布局
将浏览器窗口分成几个独立的窗口，分别显示不同的页面布局方式
浏览器不兼容时显示内容
十一：DIV+CSS布局
blogstyle.css:
页面元素样式初始化：
*{
margin:0px;
padding:0px;
}
body,a{
font-size:12px
}
a{
text-decoration:none;
{
.clear{
clear:both;
}
上、中、下共享样式规则：
#top，#content,#footer{
width:960px;
margin:10px auto;
border:1px solid gray;
}
top部分的样式规则；
#top{
height:#;
}
#top #tfun{
height:#;
}
#top #blogtitle{
height:#;
}
#top #nav{
height:#;
}
子菜单中的样式规则：
#top #nav ul{}
#top #nav ul li{}
content部分的样式规则；
#content{
height:#;
border:0px;
}
#content #left{
width:68%;
border:1px solid gray;
height:100%;
float:left;
}
#content #right{
width:30%;
border:1px solid gray;
height:100%;
float:right;
}
footer部分的样式规则：
#footer{
heighr:#;
}
#footer div{
width:#;
margin:0px auto;
text-align：center;
}
#footer div a{
display:block;
width:#;
heighr:#;
float:left;
}
#footer p{
text-align：center;
}
/
/content有固定高度，float后不会回弹
十二：ul与li和div与a
通配符选择器：所有的元素
#content *{} 代表content选择器的后代所有元素都共享样式
*{
margin:0px;
padding:0px;
}
ul{
width:#;
list-style:none;
margin-left:20px;
}
li{
width:100px;
float:left;
}
li{
display:inline-block;
width:#;
height:#;
}
li{
width:#;
height:#;
font-size:#;
line-height:#;
}
div{
width:600px;
margin:0px auto;
text-align：center;
}
div a{
display:block;
width:60px;
height:25px;
float:left;
}
十三：方法和技巧
1.制作横向排列---ul与li 或 div与a
li{
display:block;
width:#;
height:#;
float:left;
}
ul{
/font-size:0px;/
}
li{
display；inline-block;
width:#;
height:#;
float:left;
//font-size:18px
//li与li之间注释掉
}
a{
display:block;
width:#;
height:#;
float:left;
}
a{
dispaly:inline-block;
width:#;
height:#;
float:left;
}
2.设置元素之间距离方法；
a.margin与padding 方框样式
b.text-align与vertical-align 文本样式
c.align与valign 表格属性
d.line-height 字体样式
两盒子都有外边距是取较大者
3.设置两个图片之间的距离
![]()
与
margin与padding调节距离
4.元素默认样式
body{
margin:8px;
}
ul{
margin-top:16px;
margin-button:16px;
paddint-left:40px;
}
p{
margin-top:(font-size)px;
margin-button:(font-size)px;
height:自适应内容；
width：独占整行；
}
hn{
margin-top:(n的变化而变化)px;
margin-top:(n的变化而变化)px;
height:自适应内容；
width：独占整行；
}
div{
width:独占整行；
height：自适应内容；
}
span{
width:自适应内容；
height：自适应内容；
}
font-size:16px;
block元素：独占一行
inline元素：自适应内容
项目中遇到的几个问题：
1.背景图片与插入图片
background：url() repeat-x; //属性
![]()
//元素
2.表单图片提交按钮与图片链接
![]()
3.图片透明度问题：opacity属性(0.0~~1.0)
![]()
img{opacity:1.0;}
img:hover{opacity:0.5;}
4.文字容器伪类问题：
td{
backgroud-color:#99cccc; (背景色)
cursor:pointer/text/crosshair/wait/help (指针状态)
}
5.背景图片的定位：
background：url() 重复 水平移动距离 垂直移动距离(正下移，负上移)
background：url() position定位
6.float定位
父级容器的回弹(最好都给定width和height)
float定位时文件的流动性(对象)
clear的使用：只对块级容器有作用
7.position定位
position:absolute；绝对定位 --绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块(页面或画布)
position:relative；相对定位 --元素“相对于”它的起点进行移动,元素仍然占据原来的空间
父级容器绝对定位与相对定位对子容器定位的影响
8.行级容器与块级容器的区别
行级容器：inline
weith和height不受影响
padding与margin不能改变本身位置
居中时可直接设与容器等高的line-height
块级容器：block 、inline-block、 flex
可设width和height
padding与margin能改变本身位置
9.居中:
1).
文本 元素
2).align/valign 属性
3).margin:0px auto; 方框样式
4).position: absolute; 绝对定位
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
浙公网安备 33010602011771号