網(wǎng)站div+css系統(tǒng)做法
2021-06-04 分類： 網(wǎng)站建設(shè)
如果您僅僅知識想做一個簡單的css樣式，是這樣子的
一個簡單網(wǎng)頁
完整的div+css代碼制作方式
一、 善用css縮寫規(guī)則
/*注意上、右、下、左的書寫順序*/
1. 關(guān)于邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四邊都相同）
2. 簡化所有：
*/ body{margin:0}------------表示網(wǎng)頁內(nèi)所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0
3. 縮寫（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. 關(guān)于文字的縮寫規(guī)則：
Font-style:italic; 斜體形式
Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開寫。
5. 關(guān)于背景圖片的：
Background:#FFF url(log.gif) no-repeat fixed top left;
6. 關(guān)于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
縮寫成：
List-style:none inside url(filename.gif);
二、 運用4種方法來引入CSS樣式
1.link
rel 關(guān)系
type 數(shù)據(jù)類型,有多種
href 路徑
部分瀏覽器支持候選樣式,關(guān)鍵字:alternate:
2.內(nèi)部樣式塊
3.@import
@import url{a.css}
注意:此指令必須放在中的設(shè)定
--外部引用css文件
（2）優(yōu)先級不是按訪問順序來設(shè)定的，而是又css中的聲明順序來設(shè)的。
如上例中
此處顯示為黃色
也顯示為黃色，因為在css定義中.yellow在.blue的后面。八、 書寫正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。
:link --------鏈接的顏色
:visited -----鼠標(biāo)點擊后的顏色
:hover -------鼠標(biāo)放上去未點的顏色（懸停）
:active-------鼠標(biāo)點擊瞬間的顏色
九、 :hover的靈活運用
IE6不支持除a標(biāo)簽以外的:hover屬性，我們了解:hover屬性是鼠標(biāo)懸停效果。在IE7和FF中，對幾乎任意元素都可以設(shè)置:hover屬性效果。這對我們做不同的訪問效果很好。
如：
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
----------------此效果針對IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果針對IE6
十、 定義A標(biāo)簽要注意的小問題
當(dāng)我們定義a{color:red;}時，它代表了A的四種狀態(tài)的樣式，如果此時要定義一個鼠標(biāo)放上的狀態(tài)只要定義a:hover就可以了，其它三種狀態(tài)就是A中所定義的樣式。
只定義了一個a:link時，一定要記得把其它三種狀態(tài)定義出來！
十一、 禁止內(nèi)容換行與強制內(nèi)容換行
在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。
禁止換行：white-space:nowrap
強制換行：word-break: break-all; white-space: normal;
十二、 區(qū)別relative和absolute
Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設(shè)定TRBL，默認依據(jù)父級的做標(biāo)原始點為原始點。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
Relative---CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當(dāng)父級內(nèi)有padding等CSS屬性時，當(dāng)前級的原始點則參照父級內(nèi)容區(qū)的原始點進行定位。
十三、 區(qū)別塊級元素block和內(nèi)聯(lián)元素inline
塊級---可定義寬高，另起獨占一行 （如：div ul）
內(nèi)聯(lián)---不可定義寬高，如文本元素 （如a span）
十四、 區(qū)別display和visibility
display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的位置空間仍然被保留。而display:none則相當(dāng)把元素從頁面中去除，其占用位置也將被刪除。
2. 首字下沉：
P:first-letter{padding:10px,fontsize:32pt;float:left}
3. 拼音漢字：
布魯斯狼
二十九、 Min-height多瀏覽器兼容問題
Div{
min-height:450px;
height:auto!important;
height:450px;
overflow:visible;????
}
三十、 CSS布局口訣 - CSS BUG順口溜
· IE邊框若顯若無，須注意，定是高度設(shè)置已忘記；
· 浮動產(chǎn)生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；
· 三像素文本慢移不必慌，高度設(shè)置幫你忙；
· 兼容各個瀏覽須注意，默認設(shè)置行高可能是殺手；
· 獨立清除浮動須銘記，行高設(shè)無，高設(shè)零，設(shè)計效果兼瀏覽；
· 學(xué)布局須思路，路隨布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，兼容好，友好引擎喜歡迎。
· 所有標(biāo)簽皆有源，只是默認各不同，span是無極，無極生兩儀內(nèi)聯(lián)和塊級，img較特殊，但也遵法理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習(xí)，萬物皆規(guī)律。
· 圖片鏈接排版須小心，圖片鏈接文字鏈接若對齊，padding和vertical-align:middle要設(shè)定，雖差微細倒無妨。
· IE浮動雙邊距，請用display：inline拘。
· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。
標(biāo)題名稱：網(wǎng)站div+css系統(tǒng)做法
URL網(wǎng)址：http://www.rwnh.cn/news/116306.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站收錄、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計公司、云服務(wù)器、網(wǎng)站設(shè)計
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 服務(wù)器空間常見的問題說明 2021-06-04
- DNS域名管理服務(wù) 2021-06-04
- 如何看待網(wǎng)站用戶需求 2021-06-04
- 國內(nèi)國外注冊域名的對比 2021-06-04
- 怎么讓網(wǎng)站發(fā)揮出它的價值？ 2021-06-04
- 網(wǎng)頁做長尾關(guān)鍵詞常用方法 2021-06-04
- 網(wǎng)絡(luò)營銷中郵件營銷注意事項 2021-06-04
- 如何做好微網(wǎng)站 2021-06-04
- 企業(yè)建網(wǎng)站最常見問題 2021-06-04
- 一個成功的營銷型網(wǎng)站應(yīng)該具備哪些要素？ 2021-06-04
- 影響網(wǎng)站開發(fā)成功的因素 2021-06-04
- 展示型網(wǎng)站 2021-06-04
- HTML的基本結(jié)構(gòu) 2021-06-04
- 廣州網(wǎng)站推廣公司教你文章關(guān)鍵詞排名優(yōu)化？ 2021-06-04
- 為網(wǎng)站起名 2021-06-04
- 網(wǎng)站Application對象 2021-06-04
- 網(wǎng)站為什么要進行改版或重新設(shè)計制作 2021-06-04
- 如何提高服務(wù)器的性能？ 2021-06-04
- 北京建網(wǎng)站公司 2021-06-04