專案中必須知道有關css和html的常識

2021-09-25 12:41:02 字數 1222 閱讀 3171

根據模組化的思想,將目錄劃分為html,css,image三大部分。 css部分:(base.css、globa.css和mod資料夾) 1、base.css放置的是reset,clearfix等基礎類和工具類; 2、globa.css放置的是布局樣式,包括header,footer等樣式; 3、mod資料夾下面放置的模組,元件的樣式; html部分:(mod資料夾和template資料夾) 1、mod資料夾下面放的是模組的**片段集合。如果有可能盡可能粒度劃分的更細,因為這些都是**片段,希望以後有工具做到**片段和css的自動載入; 2、template資料夾下面放的是產出物,其實就是一些模組的拼合。只要模組寫的夠好這塊工作就很好做了。 images部分:(base資料夾、data資料夾、icon資料夾和mod資料夾) 1、資料夾的部署和css部署是對應的,base和global的前景圖和背景圖放在base資料夾裡面。 2、用作例子的示例放在data裡面比如,頭像之類的 3、第三方和icon放在icon的資料夾中 4、mod資料夾中放的是模組所需要的前景圖和背景圖,小圖示用sprite合併到base中 下面是幾個有關css的tips: 1、對非a標籤新增偽類狀態,例如span:hover{}。在採用偷天換日的手法a:hover span{},解決ie6相容只許新增乙個a:hover觸發ie6下a標籤hover狀態的haslayout即可。

2、選項卡去掉虛線框,ie解決方案:;ff下解決方案:a:focus

3、內聯元素居中水平採用父元素text-align:center;垂直採用height=line-height;塊級元素水平居中自身margin:0 auto;text-align:left(對子內聯元素不入侵) 父元素text-align:center;塊級元素可以採用text-indent調解左邊距,比padding-left的好處在與不會影響固定寬度值

4、小存為gif檔案比png-8要小,但是像css sprites這種顏色種類不多的大存為png-8要比gif要小

5、內聯元素用display:inline-block;比較給力,ie6下雖然不支援這個屬性,但是會觸發內聯元素的haslayout,所以表象一樣。塊級元素就不行了

6、內聯元素float:left;之後按理說應該表現為塊級,但是文字在ie6和ie7下會填充上一行的空隙。解決方案white-space: pre;

7、ie6下當高度小於font-size的時候,會被撐高。解決方案:font-size:1px;

8、css在瀏覽器渲染過程中是從右向左讀取的,盡量不用名字空間約束樣式名,盡量不對元素直接寫樣式。

專案中必須知道有關css和html的常識

根據模組化的思想,將目錄劃分為html,css,image三大部分。css部分 base.css globa.css和mod資料夾 1 base.css放置的是reset,clearfix等基礎類和工具類 2 globa.css放置的是布局樣式,包括header,footer等樣式 3 mod資料夾...

15個你必須知道的CSS常識

1 不要使用過小的做背景平鋪。這就是為何很多人都不用 1px 的原因,這才知曉。寬高 1px 的平鋪出乙個寬高 200px 的區域,需要 200 200 40,000 次,占用資源。2 無邊框。推薦的寫法是 border none 哈哈,我一直在用這個。border 0 只是定義邊框寬度為零,但邊框...

你必須知道的css系列 開篇有益

css這個話題在web2.0即將走到終端,3.0即將到來的今天可以相信絕大多數的開發人員都不陌生。其實這門技術本身並不難掌握,就拿我自己來說,記得07年因為當初工作需要從第一次知道css這個概念到能上手使用,前後好像就用了乙個禮拜的時間,當時還自以為是的覺得css也就是這麼回事,但隨著時間的推移,才...