假如在你切完所有圖之後,假如你切的**是娛樂性的**.(重複性比較多)當你所有工作已經做完時,你的上頭告訴你,要把所有**裡的內容的樣式縮寫!而且要統一~樣式裡面所有的重複的沒用的,都刪,就象給所有樣式脫了一層外套,讓它越簡單越好! 這時你不用煩腦,很簡單!來看看我是如何做的:
先觀查你**裡經常用到的樣式,重複性比較多的,把它寫在共用的樣式裡!這個樣式表裡放的都是共有的,在任何html頁面裡只要能用到這個共用樣式表裡的樣式,都可以把它鏈過去!
例如:
這是一些常用的屬性在共用裡寫好,在子樣式裡就不用再去定義了。
example source code
.clearfix:after
綠茶給.cls
apatana
這個樣式很重要，是我在網上看到的。加上這個樣式，就不用給div定義高了。其作用主要是為了清除浮動。
未清除浮動，ff沒能獲取容器的高度，所以邊框和背景會出錯。外邊距也跟著出錯。可能布局也會受到強烈的干擾。主要是由於對浮動的理由不同所造成的。只要合理的巢狀與清除浮動，即可避免此問題。
example source code
p form,h1,h2,h3,h4,h5,h6,h7
ul,li
下面這個是浮動樣式,在div+css裡這個樣式很常用：
example source code
.fleft
.fright
.cleft
.cright
.cboth
下面這個是字型樣式：
example source code
.font_bold
.font_14
.font_red
.font_blue
.font_gray
.font_10
example source code
a a:hover
下面這幾個是自己隨意定義的,**裡用的比較多的.如果有特殊的你可以在子樣式裡定義。
example source code
a.red
a.gray
a.blue
a.xhx
(這個是代下劃線的,如果你的這個鏈結樣式,在滑鼠沒有移上去時就有下劃線時,就加上這個。
因為class="(這個裡可以用多個樣式)"
例如:您好
這個樣式就是紅色的代下劃線的.如果不加xhx那就是紅色的不代下劃線樣式,只有滑鼠移上去之後才會出下劃線!
分開寫,這樣可以套用多個文字樣式,這樣重複性少很多!
example source code
img
(寫上這個會預設的在文字中間,要不然和文字會對不齊)
a.img20 img,img.img20
a.img45 img,img.img45
a.img60 img,img.img60
a.img90 img,img.img90
a.img150 img,img.img150
a.img260 img,img.img260
a.img300 img,img.img300
a:hover img.img20,a:hover img.img45,a:hover img.img60,a:hover img.img90,a:hover img.img150,a:hover img.img260,a:hover img.img300
a:hover
比如你的大小比較多,你可以象我這樣寫,把大小的樣式寫義出來,然後在用到的時候直接用就可以
我定義這個是:代邊框,而且邊框裡面與之間有一象索的距離.當滑鼠移上去邊框變顏色
example source code
a.img20 img,img.img20
例如:這個,為什麼後面有個(img.img20) ,這個是不代鏈結的,在後加上這個樣式,上就會有邊框而且不代鏈結a.img20 img,這個是給代鏈結用的這樣就會代鏈結。
還有就是你**裡經常用到的框架比較多的把它寫出來,寫好後下邊要做的工作就是把你寫的這些樣式，另做乙個html頁面,把你這些樣式都在html頁面裡做出來,分好欄目!
都做好後,當你瀏覽時,頁面顯示的效果就是你寫的樣式的效果.這些工作做完後你就可以給你的**進行修理了!
當你需要用到共有裡的樣式時,你就開啟那個html頁面,找相對應的那個樣式!直接拿過去套用就可以了,不用再去css裡找了!
關於CI框架引入CSS與JS檔案
最近用了一下ci框架，使用到了bootstrap，引入css檔案的時候一直不生效，琢磨這找到了原因。首先，在根目錄找到.htaccess檔案，修改為如下內容 rewriteengine on rewritecond 1 index php images js img css robots txt r...
Box模型與CSS框架
常用css樣式屬性 box模型 行級元素轉換為塊級元素為了換行或使用塊級元素才有的css樣式 注意 當框的屬性為block時，此元素前後帶有 換行符 h2 1 left 屬性規定元素的左邊緣，該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移 2 right 屬性規定元素的右邊緣，該屬性定義...
jquery框架 CSS操作
css css方法 css獲採樣式 h1 css h1 click function offset position scrolltop scrollleft offset獲取絕對定位座標 mydiv 123回到頂部特效 未實現 top position獲取相對父元素的座標 div1 div2 he...