網(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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一個(gè)簡(jiǎn)單的CSS網(wǎng)頁(yè)</title>
<style type="text/css">
<!--
.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">一個(gè)簡(jiǎn)單網(wǎng)頁(yè)</span></div>
</body>
</html>
完整的div+css代碼制作方式
一、 善用css縮寫規(guī)則
/*注意上、右、下、左的書(shū)寫順序*/
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用斜杠組合在一起不能分開(kāi)寫。
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種方法來(lái)引入CSS樣式
1.link
<link rel=”stylesheet” type=”text/css” href=”a.css”>
rel 關(guān)系
type 數(shù)據(jù)類型,有多種
href 路徑
部分瀏覽器支持候選樣式,關(guān)鍵字:alternate:
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>
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)樣式
<p style=”color:red;”>
選擇器是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;} ,選擇器用“,”分割開(kāi),屬性用”;”分割
2)類選擇器,即通過(guò)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.這部分都是我們常見(jiàn)的css語(yǔ)法，下面談一下我們不常見(jiàn)的選擇器語(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才開(kāi)始支持,以下版本并不支持,其他的瀏覽器基本可以)
語(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開(kāi)頭的
(3)[class$=”a”],以a結(jié)束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a開(kāi)頭的
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 id="menu">
<div class="menulist">
<div class="selectit">content</div>
</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像素，字體粗體
六、 偽類和選擇符的配合使用
將偽類和類組合起來(lái)用，就可以在同一個(gè)頁(yè)面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問(wèn)后為藍(lán)色；另一組為綠色，訪問(wè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í)不是按訪問(wèn)順序來(lái)設(shè)定的，而是又css中的聲明順序來(lái)設(shè)的。
如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色，因?yàn)樵赾ss定義中.yellow在.blue的后面。
八、 書(shū)寫正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時(shí)，要注意書(shū)寫的順序即：: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中的寫法是：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中的寫法是：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. 拼音漢字：
<ruby>布魯斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby>
二十九、 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拘。
· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。
網(wǎng)站欄目：網(wǎng)站div+css系統(tǒng)做法
轉(zhuǎn)載來(lái)源：http://jinyejixie.com/news6/116306.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、App開(kāi)發(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)
