網站div+css系統做法

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

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

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

<head>

<title>一個簡單的CSS網頁</title>

<!--

.jiandan {

font-size: 16px;

font-weight: bold;

color:#f00;

}

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

-->

</style>

</head>

<body>

<div class="aa"><span class="jiandan">一個簡單網頁</span></div>

</body>

</html>

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

一、善用css縮寫規則

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

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. 關于文字的縮寫規則：

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.內部樣式塊

<style>

<!–

h1{color:red;}

–>

</style>

3.@import

@import url{a.css}

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

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

4.內聯樣式

選擇器是css的一個基本概念，基本規則如下：

1.規則結構：

h1 {color:red;}

選擇器 {屬性:值;}

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

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

常用語法

1)分組：

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

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

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

定義:

.stylename{color:red;}

注意:

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

3)ID選擇器,即與id屬性對應的樣式

定義:

#a{color:red;} ->這個定義對用id=”a”的元素

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

1)父子結構,跟文檔結構圖對應

如p span{border:1px solid red;}對應的是<p>下面的<li>標簽,這個很用用途,可以準確定位.

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

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

(2) p + span{} ,匹配緊接著p元素后出現的第一個span標簽,2者要有相同的父標簽

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

語法:img[alt]{border:1px solid;}

表示對應有alt屬性的img標簽,當然可以支持多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img標簽,也可以與具體值對應:如:img[alt=”攝影”]{};

屬性選擇器中的高級應用,特殊匹配:

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

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

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

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

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

3)偽類和偽元素

日常使用中主要是<a>標簽的幾個偽類:link:hover:active:visited

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

注意:動態偽類可以應用到任何元素,如,input:focus{background:red;}當input標簽獲得焦點時背景變紅

以上語法組合使用,就能實現定位準確、簡單間接的樣式了。

三、選擇器分類整合

優先級別遵循：行內樣式 >ID > Class >標記

基本選擇器

標記選擇器（eg:<p></p>）

類別選擇器(eg:class)

ID選擇器

復合選擇器

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

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

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

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

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

示例結構：

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

</div>

示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

五、使用組選擇器為不同元素應用相同的樣式

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

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

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

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

a.red:link {color: #FF0000}

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

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

a.blue:visited {color: #FF00FF}

現在應用在不同的鏈接上：

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

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

七、 CSS的最近優先原則

/*如果對一個元素定義了多次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其他行內樣式 >ID > Class >標記 */

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

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

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

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

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

注意：

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

--元素style設定

--head區<style></style>中的設定

--外部引用css文件

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

如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色，因為在css定義中.yellow在.blue的后面。

八、書寫正確的鏈接樣式

當用css定義鏈接的各種狀態時，要注意書寫的順序即：: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的四種狀態的樣式，如果此時要定義一個鼠標放上的狀態只要定義a:hover就可以了，其它三種狀態就是A中所定義的樣式。

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

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

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

禁止換行：white-space:nowrap

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

十二、區別relative和absolute

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

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

十三、區別塊級元素block和內聯元素inline

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

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

十四、區別display和visibility

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

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邊框若顯若無，須注意，定是高度設置已忘記；

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

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

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

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

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

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

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

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

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

網站欄目：網站div+css系統做法
轉載來源：http://m.newbst.com/news6/116306.html

成都網站建設公司_創新互聯，為您提供響應式網站、品牌網站制作、App開發、ChatGPT、網站設計公司、商城網站

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

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網站div+css系統做法