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

2021-06-04 分類：網站建設

如果您僅僅知識想做一個簡單的css樣式，是這樣子的

一個簡單的CSS網頁

一個簡單網頁

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

一、善用css縮寫規(guī)則

/*注意上、右、下、左的書寫順序*/

1. 關于邊距（4邊）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px (省略的上等于下)

1px （四邊都相同）

2. 簡化所有：

*/ body{margin:0}------------表示網頁內所有元素的margin為0

#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0

3. 縮寫（border）特定樣式：

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. 關于文字的縮寫規(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. 關于背景圖片的：

Background:#FFF url(log.gif) no-repeat fixed top left;

6. 關于列表：

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 關系

type 數據類型,有多種

href 路徑

部分瀏覽器支持候選樣式,關鍵字:alternate:

2.內部樣式塊

3.@import

@import url{a.css}

注意:此指令必須放在中的設定

--外部引用css文件

（2）優(yōu)先級不是按訪問順序來設定的，而是又css中的聲明順序來設的。

如上例中

此處顯示為黃色

也顯示為黃色，因為在css定義中.yellow在.blue的后面。

八、書寫正確的鏈接樣式

當用css定義鏈接的各種狀態(tài)時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。

:link --------鏈接的顏色

:visited -----鼠標點擊后的顏色

:hover -------鼠標放上去未點的顏色（懸停）

:active-------鼠標點擊瞬間的顏色

九、 :hover的靈活運用

IE6不支持除a標簽以外的:hover屬性，我們了解:hover屬性是鼠標懸停效果。在IE7和FF中，對幾乎任意元素都可以設置: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標簽要注意的小問題

當我們定義a{color:red;}時，它代表了A的四種狀態(tài)的樣式，如果此時要定義一個鼠標放上的狀態(tài)只要定義a:hover就可以了，其它三種狀態(tài)就是A中所定義的樣式。

只定義了一個a:link時，一定要記得把其它三種狀態(tài)定義出來！

十一、禁止內容換行與強制內容換行

在表格或層中我們可能希望內容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。

禁止換行：white-space:nowrap

強制換行：word-break: break-all; white-space: normal;

十二、區(qū)別relative和absolute

Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

Relative---CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區(qū)的原始點進行定位。

十三、區(qū)別塊級元素block和內聯元素inline

塊級---可定義寬高，另起獨占一行（如：div ul）

內聯---不可定義寬高，如文本元素（如a span）

十四、區(qū)別display和visibility

display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然被保留。而display:none則相當把元素從頁面中去除，其占用位置也將被刪除。

2. 首字下沉：

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. 拼音漢字：

布魯斯狼bu lu si lang

二十九、 Min-height多瀏覽器兼容問題

Div{

min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

三十、 CSS布局口訣 - CSS BUG順口溜

· IE邊框若顯若無，須注意，定是高度設置已忘記；

· 浮動產生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；

· 三像素文本慢移不必慌，高度設置幫你忙；

· 兼容各個瀏覽須注意，默認設置行高可能是殺手；

· 獨立清除浮動須銘記，行高設無，高設零，設計效果兼瀏覽；

· 學布局須思路，路隨布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，兼容好，友好引擎喜歡迎。

· 所有標簽皆有源，只是默認各不同，span是無極，無極生兩儀內聯和塊級，img較特殊，但也遵法理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習，萬物皆規(guī)律。

· 圖片鏈接排版須小心，圖片鏈接文字鏈接若對齊，padding和vertical-align:middle要設定，雖差微細倒無妨。

· IE浮動雙邊距，請用display：inline拘。

· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。

標題名稱：網站div+css系統(tǒng)做法
URL網址：http://aaarwkj.com/news/116306.html

成都網站建設公司_創(chuàng)新互聯，為您提供做網站、網站收錄、全網營銷推廣、網頁設計公司、云服務器、網站設計

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

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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