css的学习分享
所学的css知识看多,会看懂。这只是在实践中发现的问题:
一. ???h1比div还大 h1上下有边距 为什么浮动不了 (现不知道)
二. css写了 表现不出来.... 选择器问题 ?一直搞不懂选择器。
/*780=80 =113 33 a 31=20*/ .warp{width: 780px;margin: 0 auto;border-left: 1px solid #e7e7e7;border-right: 1px solid #e7e7e7;}
header{width: 100%;overflow: hidden;}
.logo{margin:;padding:; height: 80px;
background-color: #3399cc;color: #fff;
line-height: 80px;text-indent: 36px;
font-size:30px;
font-family:"微软雅黑";
}
.nav-top{width: 100px;}
.nav-top li{
text-align: center;
margin-top: 0 32px;
float: left; }
section{}
.leftside{width: 200px;}
.leftside .nav-main{background-color:#3399cc;color:#fff;text-indent: 10px; }
.leftside a:hover{background-color: #ff0000;text-decoration: underline;}
.rightside{}
footer{}
练习明白 (一定要加)
1,页面或者body设置宽度 margin: 0 auto 居中内容
尽量不设置高度;overflow:hidden隐藏掉 避免有背景颜色下全渲染,全屏是蓝色。。。
2,浮动给li就好了 ,ul ol 不要考虑 ,li里的a要变成块元素 display:block; 一般要清除浮动 clear:both;一般情况下 不起作用。
所有要用第二种,visibility:hidden;height:0;IE的是.clearfloat{zoom:1;}
.clearfloat{ / 类选择器
display:block; /*变成块元素*/
clear:both; /*清除浮动 一定要设置高度为0*/
content:"";
visibility:hidden;
height:0;
}
3,
/*细节background要加 no-repeat*/
/*盒子模型写在前面*/
/*颜色尽量用3位数,不要英文*/
尽量不要*设置padding margin 为0;
4 有些要按顺序来 从大范围到小范围(和id,class没关系)
如:伪类 link hover visited active 不按顺序有彩蛋。 //a:hover{}
body,body,h1,h2,ul,li,header,footer,a,p,h3,h4,h5,{
margin: 0;
padding: 0;
color: #333;
font-family:Verdana, Geneva, sans-serif, "宋体";
list-style:none;
display: block;
}
a{text-decoration: none;}
ul,li{list-style: none;}
* 字体 字体样式 不要点 颜色 块元素
a 不要下横线
a :hover 下横线 颜色
p 行高
wrap 居中 限定宽度 边框 颜色等
头 宽100% 溢出隐藏
内元素 宽100% 高80 字体 字体样式 缩进
边距 浮动
ul
li 外边距 浮动