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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>一個(gè)簡(jiǎn)單的CSS網(wǎng)頁(yè)</title>

<!--

.jiandan {

font-size: 16px;

font-weight: bold;

color:#f00;

}

.aa{width:500px;height:200px; border:1px solid #00f;}

-->

</style>

</head>

<body>

</body>

</html>

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

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

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

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. 縮寫（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);

二、運(yùn)用4種方法來引入CSS樣式

1.link

rel 關(guān)系

type 數(shù)據(jù)類型,有多種

href 路徑

部分瀏覽器支持候選樣式,關(guān)鍵字:alternate:

2.內(nèi)部樣式塊

<style>

<!–

h1{color:red;}

–>

</style>

3.@import

@import url{a.css}

注意:此指令必須放在<style>容器中,并且在所有樣式之前

建議放在一個(gè)html注釋中,<!– –>瀏覽器會(huì)不顯示注釋內(nèi)的內(nèi)容,而import等css代碼能正常工作

4.內(nèi)聯(lián)樣式

選擇器是css的一個(gè)基本概念，基本規(guī)則如下：

1.規(guī)則結(jié)構(gòu)：

h1 {color:red;}

選擇器 {屬性:值;}

這類是元素選擇器，基本可以包括所有html的元素

屬性值可以包括多個(gè)元素，如：border：1px solid red;

常用語(yǔ)法

1)分組：

選擇器和聲明都可以分組:

h1,h2,h3{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割

2)類選擇器,即通過class=”stylename”應(yīng)用的聲明

定義:

.stylename{color:red;}

注意:

在html中可以使用多類選擇:如class=”cn1 cn2 cn3″

3)ID選擇器,即與id屬性對(duì)應(yīng)的樣式

定義:

#a{color:red;} ->這個(gè)定義對(duì)用id=”a”的元素

2.這部分都是我們常見的css語(yǔ)法，下面談一下我們不常見的選擇器語(yǔ)法

1)父子結(jié)構(gòu),跟文檔結(jié)構(gòu)圖對(duì)應(yīng)

如p span{border:1px solid red;}對(duì)應(yīng)的是<p>下面的<li>標(biāo)簽,這個(gè)很用用途,可以準(zhǔn)確定位.

一些特殊應(yīng)用(IE7支持):

(1) p > span{},匹配所有p下所有的span

(2) p + span{} ,匹配緊接著p元素后出現(xiàn)的第一個(gè)span標(biāo)簽,2者要有相同的父標(biāo)簽

2)屬性選擇器:(注意:屬性選擇器ie7才開始支持,以下版本并不支持,其他的瀏覽器基本可以)

語(yǔ)法:img[alt]{border:1px solid;}

表示對(duì)應(yīng)有alt屬性的img標(biāo)簽,當(dāng)然可以支持多個(gè)屬性對(duì)應(yīng),如img[alt][title]{};表示這個(gè)2個(gè)屬性都有的img標(biāo)簽,也可以與具體值對(duì)應(yīng):如:img[alt=”攝影”]{};

屬性選擇器中的高級(jí)應(yīng)用,特殊匹配:

(1)img[class~=”b”], ~= : 與屬性中的一個(gè)值對(duì)應(yīng)的,即與<img class=”a b c”>對(duì)應(yīng)

(2)[class^=”a”],以a開頭的

(3)[class$=”a”],以a結(jié)束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等于a或以a開頭的

3)偽類和偽元素

日常使用中主要是<a>標(biāo)簽的幾個(gè)偽類:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:動(dòng)態(tài)偽類可以應(yīng)用到任何元素,如,input:focus{background:red;}當(dāng)input標(biāo)簽獲得焦點(diǎn)時(shí)背景變紅

以上語(yǔ)法組合使用,就能實(shí)現(xiàn)定位準(zhǔn)確、簡(jiǎn)單間接的樣式了。

三、選擇器分類整合

優(yōu)先級(jí)別遵循：行內(nèi)樣式 >ID > Class >標(biāo)記

基本選擇器

標(biāo)記選擇器（eg:<p></p>）

類別選擇器(eg:class)

ID選擇器

復(fù)合選擇器

“交集”復(fù)合選擇器(eg:p.menu{color:red}) 必須是標(biāo)記+類別/ID組合

“并集”復(fù)合選擇器(eg:h1,h2,h3{color:red})

“后代”復(fù)合選擇器(eg: #menu .menulist{ ... })

“子” 復(fù)合選擇器(eg: #menu .menulist .selectit { ... })

四、使用子選擇器減少id和class的定義

示例結(jié)構(gòu)：

<div class="selectit">content</div>

</div>

示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

五、使用組選擇器為不同元素應(yīng)用相同的樣式

如h1,h2,h3,div{font-size:16px;font-weight:bold}

則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體

六、偽類和選擇符的配合使用

將偽類和類組合起來用，就可以在同一個(gè)頁(yè)面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍(lán)色；另一組為綠色，訪問后為黃色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

現(xiàn)在應(yīng)用在不同的鏈接上：

<a class="red" href="...">這是第一組鏈接</a>

<a class="blue" href="...">這是第二組鏈接</a>

七、 CSS的最近優(yōu)先原則

/*如果對(duì)一個(gè)元素定義了多次樣式，則以最近的一級(jí)優(yōu)先，最近一級(jí)的樣式將覆蓋其他行內(nèi)樣式 >ID > Class >標(biāo)記 */

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

<p>此處顯示為紅色</p>

<p class="blue">此處顯示為藍(lán)色</p>

<p class="blue" style="color:green">此處顯示為綠色</p>

<p class="blue yellow">此處顯示為黃色</p>

注意：

（1）注意樣式的幾個(gè)優(yōu)先順序(優(yōu)先級(jí)由上至下遞減，下面的樣式覆蓋上面的樣式)：

--元素style設(shè)定

--head區(qū)<style></style>中的設(shè)定

--外部引用css文件

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

如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色，因?yàn)樵赾ss定義中.yellow在.blue的后面。

八、書寫正確的鏈接樣式

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

: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ì)我們做不同的訪問效果很好。

如：

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)簽要注意的小問題

當(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)定義出來！

十一、禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行

在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過一些css屬性來達(dá)到這些要求。

禁止換行：white-space:nowrap

強(qiáng)制換行：word-break: break-all; white-space: normal;

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

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

Relative---CSS中的寫法是：position:relative; 他的意思是絕對(duì)相對(duì)定位，他是參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無父級(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. 拼音漢字：

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

Div{

min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

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

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

· 浮動(dòng)產(chǎn)生有緣故，若要父層包含住，緊跟浮動(dòng)要清除，容器自然顯其中；

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

· 兼容各個(gè)瀏覽須注意，默認(rèn)設(shè)置行高可能是殺手；

· 獨(dú)立清除浮動(dòng)須銘記，行高設(shè)無，高設(shè)零，設(shè)計(jì)效果兼瀏覽；

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

· 所有標(biāo)簽皆有源，只是默認(rèn)各不同，span是無極，無極生兩儀內(nèi)聯(lián)和塊級(jí)，img較特殊，但也遵法理，其他只是改造各不同，一個(gè)*號(hào)全歸原，層疊樣式理須多練習(xí)，萬(wàn)物皆規(guī)律。

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

· IE浮動(dòng)雙邊距，請(qǐng)用display：inline拘。

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

網(wǎng)站欄目：網(wǎng)站div+css系統(tǒng)做法
轉(zhuǎn)載來源：http://www.bm7419.com/news6/116306.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、App開發(fā)、ChatGPT、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站

聲明：本網(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í)需注明來源：創(chuàng)新互聯(lián)