學習css中得與惑

標籤：

css的學習分享 

  所學的css知識看多，會看懂。這隻是在實踐中發現的問題：

 一. ？？？h1比div還大  h1上下有邊距   為什麼浮動不了  （現不知道）

二. css寫了 表現不出來....      選取器問題 ？一直搞不懂選取器。

 1 /*780=80  =113   33  a 31=20*/ 2  3 .warp{width: 780px;margin: 0 auto;border-left: 1px solid #e7e7e7;border-right: 1px solid #e7e7e7;} 4 header{width: 100%;overflow: hidden;} 5 .logo{margin: 0;padding: 0; height: 80px; 6       background-color: #3399cc;color: #fff; 7       line-height: 80px;text-indent: 36px; 8       font-size:30px; 9       font-family:"微軟雅黑";10   }11 .nav-top{width: 100px;}12 .nav-top li{13     text-align: center;14     margin-top: 0 32px;15     float: left;16 17 }18 section{}19 .leftside{width: 200px;}20 .leftside .nav-main{background-color:#3399cc;color:#fff;text-indent: 10px; }21 .leftside a:hover{background-color: #ff0000;text-decoration: underline;}22 .rightside{}23 footer{}

View Code

 

練習明白 （一定要加）

 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 外邊距 浮動

學習的樂趣是分享和比較（有成就感）！！！

 

學習css中得與惑