CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。
創(chuàng)新互聯(lián)從2013年成立，先為喀什等服務(wù)建站，喀什等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為喀什企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
CSS樣式主要包含以下三種類型：
1、行內(nèi)樣式（內(nèi)嵌樣式）：結(jié)構(gòu)的內(nèi)部，即寫在標(biāo)簽內(nèi)的樣式；寫在標(biāo)簽的開始部分內(nèi)部，style屬性當(dāng)中。
例：標(biāo)記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"/標(biāo)記
2、內(nèi)部樣式（內(nèi)聯(lián)樣式）：寫在HTML頁面內(nèi)部，存放于head標(biāo)記當(dāng)中，樣式寫在style標(biāo)記內(nèi)。
例：style選擇器 {屬性名：屬性值；屬性名：屬性值；......}/style
3、外部樣式（外聯(lián)樣式）：寫在css文件內(nèi)。
例：link type="text/css" rel="stylesheet" href="css/main.css" /
擴(kuò)展資料：
使用CSS樣式的優(yōu)點(diǎn)：
CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計(jì)。CSS對開發(fā)者構(gòu)建Web站點(diǎn)的影響很大，并且這種影響可能是無止境的。將網(wǎng)頁的大部分甚至是全部的表示信息從HTML或XML文件中移出，并將它們保留在一個(gè)樣式表中有諸多優(yōu)點(diǎn)，如降低文件大小、節(jié)省網(wǎng)絡(luò)帶寬以及易于維護(hù)等。
此外，站點(diǎn)的表現(xiàn)信息和核心內(nèi)容相分離，使得站點(diǎn)的設(shè)計(jì)人員能夠在短暫的時(shí)間內(nèi)對整個(gè)網(wǎng)站進(jìn)行各種各樣的修改。
CSS簡化了網(wǎng)頁的格式代碼，外部的樣式表還會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式將被只保存一次）。
只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用。這就避免了一個(gè)個(gè)網(wǎng)頁的修改，大大減少了工作量。
參考資料來源：百度百科-CSS
關(guān)于如何處理網(wǎng)站的CSS，各個(gè)網(wǎng)站做法都不一樣，這隨著網(wǎng)站的性質(zhì)及大小不同，公司前人留下的規(guī)范不同，以及CSS工程師的眼界不同而有所不同。由于我從業(yè)經(jīng)歷有限，所知甚淺，只能說些膚淺業(yè)余的內(nèi)容，不準(zhǔn)確之處歡迎指出。
就CSS文件而言，有的網(wǎng)站分為header.css, body.css, footer.css，不做評價(jià)；
有的分為reset.css, main.css, content.css，不做評價(jià)；
有的分為common.css,然后每個(gè)種類的頁面一個(gè)CSS，例如home.css(主頁), album.css(相冊頁面),message.css(站內(nèi)信頁面),blog.css(日志頁面)等，不做評價(jià)；
有的分為base.css，然后每個(gè)活動(dòng)頁面一個(gè)單獨(dú)的CSS，等，不做評價(jià)；
還有的直接將CSS嵌在頁面中，而非外部鏈接調(diào)用，不做評價(jià)。
這些不同的處理方法，沒有什么正確與錯(cuò)誤之分，只有適合不適合。每種方法都有其存在的道理，所以我是沒有資格做任何評價(jià)的。
就每個(gè)CSS文件的內(nèi)容而言，一般都會(huì)有一段長長的CSS reset（樣式重置），然后就是有著統(tǒng)一前綴，命名較長的樣式內(nèi)容，就像人人網(wǎng)的部分樣式截圖：
使用長命名，統(tǒng)一的父級命名避免樣式?jīng)_突時(shí)無可厚非的。確實(shí)！曾經(jīng)我也如此。
三、我是如何對網(wǎng)站CSS進(jìn)行架構(gòu)的
首先關(guān)于CSS文件，我一般只使用一個(gè)文件，這無關(guān)于網(wǎng)站的大小，網(wǎng)站越大，某種意義上我這種做法的優(yōu)勢與潛力就會(huì)體現(xiàn)的越明顯。我這種單CSS文件的做法適合于web2.0的網(wǎng)站，例如像是SNS網(wǎng)站（開心、人人、白社會(huì)），嘀咕網(wǎng)，蝦米網(wǎng)，凡客這類網(wǎng)站，如果是門戶網(wǎng)站，sorry，鐵定不適合。
讓網(wǎng)站單CSS誰都會(huì)，關(guān)鍵是為何可以使用單CSS文件，這個(gè)CSS文件不會(huì)很大嗎，如果一個(gè)網(wǎng)站有400個(gè)頁面，那么這個(gè)CSS文件豈不要數(shù)百K。非也，在網(wǎng)站頁面風(fēng)格一致，在web系統(tǒng)結(jié)構(gòu)良好的情況下，CSS文件可以控制的非常小，而且高性能，同時(shí)頁面擴(kuò)展性也非常好。下面就開始一點(diǎn)一點(diǎn)的展示，內(nèi)容較多，需要慢慢來~~
1、整體概述
頁面布局與文章內(nèi)容顯示需要，我將整體架構(gòu)做成了一張圖片，見下圖：
2、關(guān)于CSS reset
CSS reset(css重置)基本上是不需要的，至少可以說80%的的CSS reset都是沒有必要的，反而增加了頁面CSS 的overwrite，尤其像開心網(wǎng)*{margin:0;}這樣子業(yè)余的做法更是要不得（反而破壞了很多UI的兼容性，比如說單復(fù)選框等）。我不是一概鄙棄CSS reset，有些常用標(biāo)簽我也是會(huì)簡單重置一下的，而且會(huì)避免overwrite（樣式重寫），以保證樣式最精簡，渲染最高效。如下代碼示例：
body{
line-height:1.4;
color:#333;
font-family:arial;
font-size: 12px;background:white;}
input,textarea,select{font-size:12px;font-size:100%;font-family:arial;font-family:inherit;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
margin:0;
}
h4,h5,h6{
font-size:1em;
}
ul,ol{
padding-left:0;
list-style-type:none;
}
/*image with no-border*/a img{border:0;}img{border:0;}
這就是我全部的CSS reset。就這些就足夠了，我是沒有遇到什么兼容性的問題，不要盲從于一些主流的做法，就這些，足夠了。
3、關(guān)于CSS通用樣式庫
完整的通用樣式庫如下（您可以根據(jù)自己的喜好重命名或是添加刪除部分樣式）：
.l{float:left;}.r{float:right;}.cl{clear:both;}
.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}
.fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋體';}.fw{font-family:'微軟雅黑';}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
.tdl{text-decoration:underline;}.tdn,.tdn:hover,a.tdl:hover{text-decoration:none;}
.g0{color:#000000;}.g3{color:#333333;}.g6{color:#666666;}.g9{color:#999999;}.red{color:red;}.wh{color:white;}
.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}.vimg{margin-bottom:-3px;}
.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;}
.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}
.rel{position:relative;}.abs{position:absolute;}
.dn{display:none;}.db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}
.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}
.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}
.fix{*zoom:1;}.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}.z{_zoom:1;}
上面的樣式是有簡單的分類的，某種意義上講，CSS庫與js庫屬于類似的東西。
關(guān)于此樣式庫，您可以直接在您的頁面頭部head標(biāo)簽內(nèi)嵌入如下代碼：
link rel="stylesheet" href="" type="text/css" /
如果您想下載此CSS文件，您可以狠狠地點(diǎn)擊這里：(右鍵-[目標(biāo)|鏈接另存為])。您可以隨意修改，如果能保留我的一個(gè)個(gè)人信息，那真是感激不盡~~
4、網(wǎng)站CSS樣式庫
這里的樣式是根據(jù)當(dāng)前實(shí)際的項(xiàng)目內(nèi)容指定的。例如，文字鏈接顏色是什么，文字鏈接經(jīng)過的樣式是什么；一些常用的背景色樣式，常用的邊框樣式等，以及一些高寬等。按照我的經(jīng)驗(yàn)，網(wǎng)站CSS樣式庫又可以架構(gòu)為以下幾部分：
①網(wǎng)站常見顏色，尤其是鏈接色
②網(wǎng)站常見背景色（我習(xí)慣用bg+顏色前2字母表示，例如.bgf7表示background:#f7f7f7;）
③網(wǎng)站常見邊框色，這里類似于CSS 通用庫中的margin屬性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名習(xí)慣不一樣，但是盡量簡單為好，甚至您可以像Google一樣，直接兩個(gè)字母（大小寫混搭）表示。另外，一定要告知設(shè)計(jì)師，邊框取色不宜多，不能憑感覺，要有所犧牲，也就是如果之前使用了#cecece的邊框色，后面的即使使用#d0d0d0更好看，請使用#cecece代替，這就是團(tuán)隊(duì)協(xié)作。
④網(wǎng)站遺留的單margin屬性，例如，某一div留白較大，有個(gè)單獨(dú)的margin-top:35px的屬性，ok，這個(gè)屬性請放在網(wǎng)站CSS樣式庫中，以.mt35{margin-top:35px;}保留，以供之后類似布局或需要的地方使用。
⑤網(wǎng)站遺留的單padding屬性，例如，雙欄自適應(yīng)布局時(shí)，無論是浮動(dòng)自適應(yīng)，還是絕對定位自適應(yīng)，都需要使用padding-left值，此時(shí)的padding-left多單樣式，可抽取出來，以網(wǎng)站樣式庫的形式存在。記住，是單屬性，且不可從通用元素中抽取單獨(dú)的padding值，否則是給自己挖火坑。
⑥網(wǎng)站遺留的width屬性，在流體布局思想下，寬度是有限的，是珍貴的，需好好利用。
⑦網(wǎng)站常用的一些height屬性，指一些高度值，例如height:18px; height:20px; height:24px; height:50px; height:100px; height:200px;等。
記住一個(gè)原則：網(wǎng)站通用的元素（按鈕，導(dǎo)航，選項(xiàng)卡的）的樣式千萬不能分離作為網(wǎng)站的CSS樣式庫。
5、網(wǎng)站通用小圖標(biāo)樣式集
小圖標(biāo)的樣式合并是普遍處理的較好的，由于其規(guī)律可循，所以經(jīng)常在CSS文件較上的位置看到有關(guān)小圖標(biāo)的CSS合并樣式，這在SNS網(wǎng)站中很是常見。一般合并樣式部分樣式為{background:url(xx.png) no-repeat;}，分離部分的樣式是{background-position:x, y;}，就實(shí)現(xiàn)而言，我覺得沒有多少說頭，只是命名有些自己的見解。在小圖標(biāo)樣式命名的時(shí)候，我的建議是不要關(guān)聯(lián)圖片的內(nèi)容，比如說一個(gè)相冊的下圖標(biāo)，不應(yīng)該使用iAlbum這樣的命名。原因有三：
1. 思考圖片的命名殺死n多腦細(xì)胞
2. 命名較長，占用字節(jié)數(shù)，也就是CSS文件大小
3. 也是最重要的，后期的維護(hù)。設(shè)想下，如果日后相冊的圖標(biāo)不再被使用了，原來相冊圖標(biāo)的位置可以被其他小圖標(biāo)（如RSS小圖標(biāo)）替換嗎？理論上可以，實(shí)際上，我們除了必要的html替換，還需要重新修改圖標(biāo)樣式的命名，即iAlbum→iRss的命名，而往往取而代之的做法是直接在后面添加新的圖標(biāo)。
我目前的做法是使用一個(gè)不常用的標(biāo)簽作為網(wǎng)站的小圖標(biāo)專用標(biāo)簽，例如s標(biāo)簽，或是u標(biāo)簽，我習(xí)慣將小圖標(biāo)單獨(dú)為一個(gè)小圖標(biāo)Sprite，每個(gè)圖標(biāo)放在20*20像素的格子中。在這種情況下，我都是使用矩陣命名法。命名只關(guān)聯(lián)位置，例如，我使用u標(biāo)簽作為整個(gè)網(wǎng)站的小圖標(biāo)專用標(biāo)簽，則按照圖標(biāo)的位置（假設(shè)一行20個(gè)圖標(biāo)），我會(huì)依次命名為：u00,u01,u02…u019,u10,u11,…u119…。這種命名的好處是不用關(guān)心到底哪個(gè)位置是那個(gè)圖標(biāo)，不用擔(dān)心命名沖突，在小圖標(biāo)位置以及內(nèi)容更換的情況下也無需重命名。
例如，上圖中標(biāo)注的u113的意思其實(shí)是u(1,13)，這種小圖標(biāo)命名的方法我稱之為“小圖標(biāo)矩陣命名法”。此命名略有不足在于在使用小圖標(biāo)時(shí)需要打開源文件或通過注釋準(zhǔn)確查詢到對應(yīng)的class。
6-10、網(wǎng)站通用樣式
這里的“網(wǎng)站通用樣式”可以說與“網(wǎng)站通用樣式庫”最為對立的兩部分。網(wǎng)站通用樣式專指“獨(dú)立元素”的通用樣式，所謂“獨(dú)立元素”指的是網(wǎng)站通用的導(dǎo)航，菜單，按鈕，選項(xiàng)卡，文本框裝飾，圖片裝飾，圓角處理等等。這些“獨(dú)立元素”的樣式千萬不能對其進(jìn)行分離并歸入“網(wǎng)站通用樣式庫”中，否則，日后會(huì)給你留下無盡的痛苦的！
我?guī)缀鯊牟粚Π粹o或是導(dǎo)航進(jìn)行定寬，都是寬度自適應(yīng)，這樣，可以大大節(jié)約Sprite背景圖片以及CSS代碼的成本。以前多有探討，這里不多說了。
網(wǎng)站通用樣式的代碼量在整個(gè)CSS文件中所占據(jù)的比重是相當(dāng)大的，如果您的CSS文件中發(fā)現(xiàn)CSS通用樣式只占整個(gè)CSS文件的一小部分，尤其網(wǎng)站項(xiàng)目較大時(shí)，那就需要引起警惕，可能最后的結(jié)果就是CSS文件超負(fù)荷，最后反而一團(tuán)糟。
11、網(wǎng)站公共結(jié)構(gòu)樣式
所謂“網(wǎng)站的結(jié)構(gòu)樣式”主要指的是最外框div的樣式，一般限制網(wǎng)站的寬度(960~990不等)，還有就是網(wǎng)站的分欄布局樣式，這里的樣式僅僅針對主體結(jié)構(gòu)，例如left_part，或是right_part；還包括網(wǎng)站的頭部的一些公用結(jié)構(gòu)，底部的樣式結(jié)構(gòu)等。
我是強(qiáng)烈建議公共結(jié)構(gòu)僅僅定寬定高，設(shè)置浮動(dòng)屬性，切不可在結(jié)構(gòu)樣式上添加margin或是padding屬性，這會(huì)使網(wǎng)站的公共結(jié)構(gòu)的重用性大大降低！
12、單頁面的精細(xì)結(jié)構(gòu)
如果上述11項(xiàng)您都架構(gòu)的非常好，那么您在編寫每個(gè)具體頁面的時(shí)候，就會(huì)非常輕松，非常迅速。因?yàn)?0%~90%的樣式都可以從上面11項(xiàng)中直接拿來用（上述11項(xiàng)全部都是網(wǎng)站公用樣式）。
對于中型大型網(wǎng)站，我們可能要花3~4天甚至更多的時(shí)間分析頁面設(shè)計(jì)圖，處理CSS Sprite，架構(gòu)網(wǎng)站的CSS，這段時(shí)間不寫任何頁面，就是處理網(wǎng)站（可以說是）唯一的CSS文件。所謂“磨刀不誤砍柴功”，站在整站的角度上去思考CSS是非常重要的，這可以讓你避免迷路，有助于寫出精簡高效的樣式代碼。
當(dāng)我們把1-11項(xiàng)都完成了，就開始著手寫頁面了，這時(shí)候，整個(gè)網(wǎng)站的頁面基本上都在你腦中了，您在下手的時(shí)候就會(huì)清除：我現(xiàn)在做的是哪個(gè)頁面，在整個(gè)網(wǎng)站中扮演著什么樣的地位，這個(gè)頁面的CSS對整個(gè)網(wǎng)站的CSS有什么影響，這里的樣式該怎么處理（分離，合并還是獨(dú)立）等。
一般而言，就我個(gè)人經(jīng)驗(yàn)，每個(gè)頁面，即使這個(gè)頁面看上去很復(fù)雜，其代碼開銷也是非常小的。其新增的代碼開銷去處有三處：一是分離一些樣式歸入“網(wǎng)站CSS樣式庫”中；二是凡事使用的CSS Sprite的樣式與其他樣式進(jìn)行合并；三就是一些精細(xì)的復(fù)雜的樣式，這些就是CSS文件的架構(gòu)的最后一部分“單頁面的精細(xì)結(jié)構(gòu)了”，何為單頁面的精細(xì)結(jié)構(gòu)，如下圖的樣式，就可以說是精細(xì)結(jié)構(gòu)，需要獨(dú)立出來新寫樣式（可適當(dāng)分離，注意“適當(dāng)”一詞）：
例如上圖鼠標(biāo)經(jīng)過后顯示，紅色虛框樣式，剪刀，粗邊框投影，最優(yōu)惠標(biāo)示，一些按鈕等就屬于精細(xì)結(jié)構(gòu)，我們需要在頁面上單獨(dú)寫一個(gè)樣式。雖然理論上，我們使用分離也是可以實(shí)現(xiàn)這個(gè)效果的，但是此時(shí)html代碼的開銷實(shí)在太大，根本就不適合使用分離，這里就該老老實(shí)實(shí)的寫樣式。這里的寫法，命名都應(yīng)該跟隨內(nèi)容而不是屬性本身。我們可以在單一類別的頁面使用同樣的前端的前綴避免樣式?jīng)_突等~~
四、關(guān)于適用性
有些東西雖然看上去好，但是卻不適用。通過上述的CSS架構(gòu)，我可以把網(wǎng)站的樣式控制地非常的精簡與高效（當(dāng)然，需要設(shè)計(jì)師與后臺(tái)工程師的通力配合），但是，對于別人，套用此架構(gòu)可能就沒有這樣的效果，可能反而會(huì)更糟。前面也提到了，這種架構(gòu)是我自己摸索出來的，是根據(jù)自己的寫法，布局思想，甚至性格等形成的，帶有明顯的個(gè)人印記。
比方說，我是個(gè)推崇自適應(yīng)布局（流體布局）的人，是個(gè)十足的自適應(yīng)控，但是，有很大一部分同行是固定布局（像素級兼容，有計(jì)算）。固定布局固然有其優(yōu)點(diǎn)，但是其CSS代碼的消耗量以及頁面的擴(kuò)展性我是很詬病的，顯然，這是無法應(yīng)用到我這里的架構(gòu)中的。
其次，不少CSS剛?cè)腴T的頁面開發(fā)工程師對CSS屬性理解不夠透徹，常會(huì)寫一些沒有必要的冗余代碼。對于他們而言，但CSS文件的架構(gòu)確實(shí)很吃力。
說實(shí)話，我對自己的這個(gè)CSS架構(gòu)的適應(yīng)性都不看好，一是自己在表達(dá)方面的火候欠缺，沒有很好的展示架構(gòu)的精髓，二是因?yàn)榇思軜?gòu)本身需要有很多的控制，這種控制受制于設(shè)計(jì)師，網(wǎng)站頁面架構(gòu)，CSS工程師自身的功力，一旦樣式泛濫，這種架構(gòu)也就毫無意義，反而弄巧成拙；但是，一旦控制下來，那么網(wǎng)站就CSS性能這塊保證領(lǐng)先，而這些需要優(yōu)秀的有眼界的CSS工程師來掌控，需要優(yōu)秀的設(shè)計(jì)師，程序員通力協(xié)作。雖然全然套用我展示的這套架構(gòu)會(huì)由于不熟悉或是掌控不夠而產(chǎn)生問題，但是，里面一些概念，一些思想應(yīng)該能有一定的啟示作用的，這也是本文的意義所在了。
我只是個(gè)初出茅廬的小生，我知道，很多真正功力深厚的前端開發(fā)人員有著更好的更廣泛適應(yīng)的前端架構(gòu)，如果您有幸來到這里，歡迎分享您的一些見解與認(rèn)識。還有，文中若有您覺得不合理的觀點(diǎn)，也非常歡迎通過評論或是郵件18612269127@163.com)的方式進(jìn)行指正。我們需要在不斷的交流中提高的。
CSS可以很方便的用來控制網(wǎng)頁的外觀。主要有以下特點(diǎn)：
1.可以同時(shí)更新多個(gè)網(wǎng)頁的樣式。
2.使網(wǎng)頁的表示層與結(jié)構(gòu)層徹底分離
3.大大減小了網(wǎng)頁文件的大下
4.加快了網(wǎng)頁的加載速度
現(xiàn)在用CSS來布局網(wǎng)頁已經(jīng)是一種潮流，如果要向網(wǎng)頁設(shè)計(jì)方面發(fā)展，必須精通CSS。
用了JQ庫，樣式在style里，不過要配合js用
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
script src="jquery-3.3.1.min.js"/script
/head
style
.div1{
text-align: center;
background: beige;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span1{
/* margin-top: 7px; */ /* div的時(shí)候打開注釋 */
background: #CCCCCC;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.div2{
text-align: center;
background: lawngreen;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span2{
background: white;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.hid1{
display: none;
}
.hid2{
}
/style
body
!-- button的 --
button class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/button
hr
hr
!-- div的 --
!-- div class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/div --
/body
script
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2");
$(".div1").toggleClass("div2");
$(".hid1").toggle();
$(".hid2").toggle();
})
})
/script
/html
您好，現(xiàn)在dreamweaver 很少用
原因：
1、 多余的代碼很多。
2、自動(dòng)化對于水平不提高要多打鍵盤。
一般編輯器用的是 Editplus , notepad 個(gè)人還是推薦用 Editplus
自己建網(wǎng)站要學(xué)。
1/ html
2/ css
3/ javascript
4/ mysql
5/ php
這么就完全可以自己建網(wǎng)站。
關(guān)于難度的話。
html + css 是容易看書完全可以自學(xué)。這兩 背一背常用的(屬性和值)英文單詞就行。
不到一百個(gè)，其他的可以百度搜索。
javascript 還是比較看視頻教程好理解些。新手看書學(xué)有點(diǎn)費(fèi)力 :)
php的話 會(huì)javascript 就很容易。10天可以學(xué)會(huì)。函數(shù)比較相似 語法 差不多。
php 背一背常用的 string 和 array 函數(shù) 有時(shí)間經(jīng)常看手冊。這么難不到哪去。
php 最終是經(jīng)驗(yàn)。代碼怎么寫也影響網(wǎng)站的速度。
最后難得就是mysql (數(shù)據(jù)庫)
難的就是數(shù)據(jù)庫設(shè)計(jì)。要鍵博客之類的網(wǎng)站的話也不是很難。
還有有時(shí)間的話 看一看
1、xml
2、jquery
3、ajax
這三個(gè)也經(jīng)常使用 jquery 是javascript 的類。ajax是javascript 技術(shù)。
xml 這怎么說呢，一般跟flash 用?？墒俏矣迷诰W(wǎng)站存儲(chǔ)緩存方面。
代碼方面上面就說了
然后設(shè)計(jì)軟件方面的話。
1/ photoshop 是 最基本中基本了。
2/ illustrator 矢量圖，一般用在 制作小圖標(biāo)和人物，顏色清晰干凈(個(gè)人很喜歡)
3/ flash 動(dòng)畫 一般用在 網(wǎng)站廣告，菜單，和 圖片展示 等。。要學(xué)的話跟action 一起學(xué)。
4/ 3ds max 這個(gè)看個(gè)人 想學(xué)的話就學(xué)吧。我是因?yàn)樵诠居行┛腿艘?三圍 圖片和logo 才學(xué)的。
我現(xiàn)在上的公司是賣圖片的。出售量最高的 是
1、illustrator
2、flash
3、photoshop
4、painter
5、...
6、....
illustrator 站 60%
有什么疑問可以追問。
重慶分公司
重慶分公司
