学习css中得与惑

css的学习分享

所学的css知识看多,会看懂。这只是在实践中发现的问题:

 一. ???h1比div还大  h1上下有边距   为什么浮动不了  (现不知道)

二. css写了 表现不出来....      选择器问题 ?一直搞不懂选择器。

学习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 外边距 浮动

学习的乐趣是分享和比较(有成就感)!!!

上一篇:HDL_Graph_slam骨头记(3)


下一篇:C#进阶系列——DDD领域驱动设计初探(五):AutoMapper使用