網(wǎng)站div+css系統(tǒng)做法

2021-06-04    分類： 網(wǎng)站建設(shè)

如果您僅僅知識(shí)想做一個(gè)簡(jiǎn)單的css樣式，是這樣子的
一個(gè)簡(jiǎn)單的CSS網(wǎng)頁(yè)
一個(gè)簡(jiǎn)單網(wǎng)頁(yè)


完整的div+css代碼制作方式

一、 善用css縮寫(xiě)規(guī)則
/*注意上、右、下、左的書(shū)寫(xiě)順序*/
1. 關(guān)于邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四邊都相同）

2. 簡(jiǎn)化所有：
*/ body{margin:0}------------表示網(wǎng)頁(yè)內(nèi)所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0

3. 縮寫(xiě)（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;

4. 關(guān)于文字的縮寫(xiě)規(guī)則：
Font-style:italic; 斜體形式
Font-variant:small-caps/normal; 變體樣式：小型大寫(xiě)字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫(xiě)成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開(kāi)寫(xiě)。

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);
縮寫(xiě)成：
List-style:none inside url(filename.gif);

二、 運(yùn)用4種方法來(lái)引入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)先級(jí)不是按訪問(wèn)順序來(lái)設(shè)定的，而是又css中的聲明順序來(lái)設(shè)的。

如上例中

此處顯示為黃色

也顯示為黃色，因?yàn)樵赾ss定義中.yellow在.blue的后面。

八、 書(shū)寫(xiě)正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時(shí)，要注意書(shū)寫(xiě)的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過(guò)記憶LoVe,Hate,兩個(gè)單詞來(lái)記住其順序。
:link --------鏈接的顏色
:visited -----鼠標(biāo)點(diǎn)擊后的顏色
:hover -------鼠標(biāo)放上去未點(diǎn)的顏色（懸停）
:active-------鼠標(biāo)點(diǎn)擊瞬間的顏色

九、 :hover的靈活運(yùn)用
IE6不支持除a標(biāo)簽以外的:hover屬性，我們了解:hover屬性是鼠標(biāo)懸停效果。在IE7和FF中，對(duì)幾乎任意元素都可以設(shè)置:hover屬性效果。這對(duì)我們做不同的訪問(wèn)效果很好。
如：
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;
}
----------------此效果針對(duì)IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果針對(duì)IE6

十、 定義A標(biāo)簽要注意的小問(wèn)題
當(dāng)我們定義a{color:red;}時(shí)，它代表了A的四種狀態(tài)的樣式，如果此時(shí)要定義一個(gè)鼠標(biāo)放上的狀態(tài)只要定義a:hover就可以了，其它三種狀態(tài)就是A中所定義的樣式。
只定義了一個(gè)a:link時(shí)，一定要記得把其它三種狀態(tài)定義出來(lái)！

十一、 禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行
在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過(guò)一些css屬性來(lái)達(dá)到這些要求。
禁止換行：white-space:nowrap
強(qiáng)制換行：word-break: break-all; white-space: normal;

十二、 區(qū)別relative和absolute
Absolute---CSS中的寫(xiě)法是：position:absolute; 他的意思是絕對(duì)定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，在沒(méi)有設(shè)定TRBL，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級(jí)沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。
Relative---CSS中的寫(xiě)法是：position:relative; 他的意思是絕對(duì)相對(duì)定位，他是參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無(wú)父級(jí)則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的原始點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。

十三、 區(qū)別塊級(jí)元素block和內(nèi)聯(lián)元素inline
塊級(jí)---可定義寬高，另起獨(dú)占一行 （如：div ul）
內(nèi)聯(lián)---不可定義寬高，如文本元素 （如a span）

十四、 區(qū)別display和visibility
display:none和visibility:hidden都可以隱藏一個(gè)元素,但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的位置空間仍然被保留。而display:none則相當(dāng)把元素從頁(yè)面中去除，其占用位置也將被刪除。

2. 首字下沉：
P:first-letter{padding:10px,fontsize:32pt;float:left}
3. 拼音漢字：
布魯斯狼bu lu si lang

二十九、 Min-height多瀏覽器兼容問(wèn)題
Div{
min-height:450px;
height:auto!important;
height:450px;
overflow:visible;????
}
三十、 CSS布局口訣 - CSS BUG順口溜
· IE邊框若顯若無(wú)，須注意，定是高度設(shè)置已忘記；
· 浮動(dòng)產(chǎn)生有緣故，若要父層包含住，緊跟浮動(dòng)要清除，容器自然顯其中；
· 三像素文本慢移不必慌，高度設(shè)置幫你忙；
· 兼容各個(gè)瀏覽須注意，默認(rèn)設(shè)置行高可能是殺手；
· 獨(dú)立清除浮動(dòng)須銘記，行高設(shè)無(wú)，高設(shè)零，設(shè)計(jì)效果兼瀏覽；
· 學(xué)布局須思路，路隨布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，兼容好，友好引擎喜歡迎。
· 所有標(biāo)簽皆有源，只是默認(rèn)各不同，span是無(wú)極，無(wú)極生兩儀內(nèi)聯(lián)和塊級(jí)，img較特殊，但也遵法理，其他只是改造各不同，一個(gè)*號(hào)全歸原，層疊樣式理須多練習(xí)，萬(wàn)物皆規(guī)律。
· 圖片鏈接排版須小心，圖片鏈接文字鏈接若對(duì)齊，padding和vertical-align:middle要設(shè)定，雖差微細(xì)倒無(wú)妨。
· IE浮動(dòng)雙邊距，請(qǐng)用display：inline拘。
· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。

標(biāo)題名稱：網(wǎng)站div+css系統(tǒng)做法
URL網(wǎng)址：http://www.muchs.cn/news/116306.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站收錄、全網(wǎng)營(yíng)銷推廣、網(wǎng)頁(yè)設(shè)計(jì)公司、云服務(wù)器、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)