首先要感谢“LAMP兄弟连” 的精彩视频，感谢 高洛峰 老师认真细心的讲解，
由于现在屏幕分辨率都普遍增大，设计时可按照1024*768
可以定义多个css文件，分别被一个或多个html调用
一个页面中样式只会用到一次，不会被别的属性重复的时候使用id，如果同样一个样式多次在页面中使用的时候要使用类，id的优先级比类的优先级高。
不通浏览器的区别IE&FF：
1.居中不通
在CSS定义中使用“text-align:center;”
2.IE指定的最小高度为18px，当距离指定比18px小的都按18px。而FF指定多少像素就为多少像素。
如nav类，可以在其CSS定义中加入“overflow:hidden;”问题即可解决。
3.IE会自动调整高度，而FF不会，指定多高就是多高。
如想使两者一致，则可直接删除height选项。
4.FF如果使用浮动则是正常的
如想IE和FF一致可在所有的模块中添加“float:left”属性。
5.IE和FF在列表上的区别
ul {
margin:0px;
padding:0px;
list-style:none;
}
6.不同
7.border不同，IE=内容+边框 FF边框另算
可以加两种属性
width:298px !important; /* IE对此属性不起作用,FF对此起作用，FF遇到此标示直接套用此属性 */
width:300px;
字体垂直居中：
padding-top:5px;
padding-bottom:5px;
li {
height:20px;
line-height:20px;
}
CSS之初:
body {
margin:0px;
padding:0px;
font:12px Arial,宋体;
text-align:center; /* 处理IE和FF居中不通,如果此处添加文本剧中后，则在本body中的所有文本都居中，想要改变其他模块的对齐方式，则要在其他模块定义中添加“text-align:{left|right...}”等 */
}
#container {
margin-left:auto; /* 居中 */
margin-right:auto; /* 居中 */
width:960px;
text-align:left;
}
#header {
float:left;
width:100%;
height:80px; /* tem */
background:red; /* tem */
}
#header #logo{
...
}
#header #menu {
float:left;
width:100%;
height:20px;
background:#aaa;
}
#main {
float:left;
width:100%;
height:600px; /* tem */
background:blue; /* tem */
}
#footer {
float:left;
width:100%;
height:80px; /* tem */
background:black; /* tem */
}
.nav {
float:left;
width:100%;
height:10px;
clear:both;
}
html之初：
/* 分隔条 */
/* 主体部 */
/* 分隔条 */
background:url(../img/header_bg.jpg) repeat-x left top;
阅读(800) | 评论(0) | 转发(0) |
