寫(xiě)完標(biāo)題以后發(fā)呆了好大一會(huì)兒，多少年沒(méi)提筆寫(xiě)過(guò)文章了啊，寫(xiě)成大白話(huà)了，你可不能怪我啊 ? ? (*???)。去年在站酷上寫(xiě)過(guò)兩篇關(guān)于前端入門(mén)的小教程，那時(shí)候也是累的半死。昨天在公司的時(shí)候翻出來(lái)看了看，我去，寫(xiě)的什么渣渣?。?！不能讓你看啊，不然我高大威武帥氣英俊的形象在你心里就崩塌了。重寫(xiě)！
-----------寫(xiě)這里的時(shí)候距離上面那一段已經(jīng)過(guò)去倆小時(shí)了(。?＿?。)?，理由很簡(jiǎn)單，我嘴饞了，下去買(mǎi)了一堆零食，哈哈，現(xiàn)在一邊吃零食一邊寫(xiě)，老分心了~~~
首先說(shuō)一下，為了讓更方便的不懂代碼的你能快速接觸前端，所以有些地方我寫(xiě)的可能不準(zhǔn)確，也不深入，但是這并不耽擱你去寫(xiě)這些東西。
好吧，啰嗦一大堆，正式開(kāi)始吧。單獨(dú)寫(xiě)一堆理論你估計(jì)頭又大了（即便你悟性這么大）嘿嘿，所以我還是做個(gè)實(shí)例吧！先得畫(huà)個(gè)效果圖，得在你面前班門(mén)弄斧了。
做圖的時(shí)候其實(shí)也需要先想一下布局，logo，導(dǎo)航，banner，列表這些必不可少的東西怎么排版，心里先有個(gè)譜。
但是我突然決定用去年寫(xiě)教程時(shí)做的那張效果圖，任性一次唄！
首先先總結(jié)一下之前說(shuō)的前端是什么東西，都負(fù)責(zé)做什么的，html是啥，css是啥，js是啥。
設(shè)計(jì)師在把界面設(shè)計(jì)出來(lái)以后是不能直接用在網(wǎng)頁(yè)上的，設(shè)計(jì)的一些按鈕啊，鏈接、輸入框這些需要交互的在一張圖上是肯定不能實(shí)現(xiàn)的，所以現(xiàn)在需要前端來(lái)把這些東西分分類(lèi)，該是圖片的，該是按鈕的，或者是輸入框的，這些都給他放到指定的框里面，讓他們起到設(shè)計(jì)師想讓他們發(fā)揮的作用。這些框通俗來(lái)說(shuō)就是div（或者是其他的HTML標(biāo)簽），這就是html要起到的作用。
但是你只是把他們放到一個(gè)個(gè)框里面，功能是可以實(shí)現(xiàn)了，但是你發(fā)現(xiàn)只是這些的話(huà)界面就像沒(méi)設(shè)計(jì)一樣，你們?cè)O(shè)計(jì)師的心血白費(fèi)了啊，所以這時(shí)候css就出來(lái)了，css就是樣式，負(fù)責(zé)的部分是把之前框里面的東西讓他按照你設(shè)計(jì)的界面出現(xiàn)在相應(yīng)的位置，以你想要的樣式（顏色、大小、背景、位置等等）顯示在界面上。
到這里以后你發(fā)現(xiàn)html+css這些東西就基本能把網(wǎng)頁(yè)做出來(lái)了，但是你這界面不行啊，平平靜靜的完全吸引不了別人的眼球啊，我們經(jīng)常在網(wǎng)上看到一些特別炫酷的效果，人家有咱也得能做啊，這些就是js要做的事啦！
所以一般情況下，所謂的前端就是html+css+js；
html：內(nèi)容結(jié)構(gòu)
css：表現(xiàn)樣式
js：行為交互
go on！??！
html就是一個(gè)個(gè)的標(biāo)簽組成的，所有的元素都需要放在標(biāo)簽里面，而標(biāo)簽一般來(lái)說(shuō)是成對(duì)出現(xiàn)的，有開(kāi)始標(biāo)簽就有閉合標(biāo)簽（代表著標(biāo)簽到此結(jié)束），例如：<div></div>，當(dāng)然也有一些特殊的標(biāo)簽是單標(biāo)簽，不分開(kāi)始和閉合標(biāo)簽。例如img標(biāo)簽，input標(biāo)簽等。
之前也有說(shuō)過(guò)，標(biāo)簽分為塊狀元素和行內(nèi)元素。塊狀元素就是不管寬度是多少，他都占一行，他用不完一行也不讓別人用（太霸道了?。。。?，最常見(jiàn)的就是div這個(gè)標(biāo)簽。行內(nèi)元素顧名思義就是可以在一行展示，不像塊狀一樣霸道，自己用多少，占得位置就是多少，比如<span></span>標(biāo)簽、<a></a>標(biāo)簽就都是行內(nèi)元素。
標(biāo)簽有很多，大概快有上百個(gè)標(biāo)簽了，但是不用都記住，常用的也就那幾個(gè)：
<div></div>：最常用的標(biāo)簽，可以把它當(dāng)做一個(gè)盒子，里面什么都可以包。他還有一個(gè)常用的作用就是你可以把一些同一個(gè)模塊里覺(jué)得零碎的標(biāo)簽，給他包起來(lái)，這樣結(jié)構(gòu)就很清晰，類(lèi)似于你用ps時(shí)候ctrl+g分組一樣，哈哈，你分的一些模塊完全都可以包在這個(gè)標(biāo)簽里面。
其他的大部分標(biāo)簽?zāi)愣伎梢韵壤斫鉃楹蚫iv一樣的東西，只不過(guò)叫的名字不一樣。其實(shí)作用都是一樣的，都是一個(gè)個(gè)盒子（大部分，有一些是替代不了的，例如img標(biāo)簽）。他們其實(shí)就是帶著特殊含義的標(biāo)簽（例如p標(biāo)簽就是代表文字段落的意思）。如果你全部用div也是可以的，但是你想一下整個(gè)界面都是div，多可怕，你分不清哪個(gè)是哪個(gè)。。。
<p></p>：p標(biāo)簽里面一般放的是文字，他又有段落的意思。但是我們也可以把它當(dāng)做div盒子來(lái)用，里面放個(gè)圖片什么的都是可以的，唯一不好的是可能是對(duì)seo有點(diǎn)影響，這些你就先不用考慮，畢竟主業(yè)還是設(shè)計(jì)師嘛。以后有興趣可以學(xué)。
<h1><h1>：h1標(biāo)簽是標(biāo)題的意思，其實(shí)作用和p標(biāo)簽差不多了，只是他會(huì)默認(rèn)帶著字號(hào)和加粗，包括之前說(shuō)的h2、h3等等。他的有個(gè)特點(diǎn)是在搜索的時(shí)候權(quán)重會(huì)高一點(diǎn)，也就是代表重要性高。
<a></a>：a標(biāo)簽是超鏈接，就是網(wǎng)頁(yè)上你可以點(diǎn)擊跳轉(zhuǎn)界面的東西，看網(wǎng)頁(yè)的時(shí)候你會(huì)發(fā)現(xiàn)有些東西是點(diǎn)擊不了的，有些東西你鼠標(biāo)移動(dòng)上去就變成一個(gè)小手的樣子，代表著可以點(diǎn)擊，這個(gè)往往都是a標(biāo)簽實(shí)現(xiàn)的。
<ul></ul>、<li></li>：這兩個(gè)標(biāo)簽放一塊是因?yàn)樗麄兛偸浅蓪?duì)出現(xiàn)的，有ul的時(shí)候就有l(wèi)i，有l(wèi)i的時(shí)候就有ul，ul里面放著li，他是代表無(wú)序列表的意思，一般導(dǎo)航上會(huì)用到。
<img /> ： 這是一個(gè)單標(biāo)簽，這個(gè)的作用是引入圖片。每個(gè)標(biāo)簽都有自己的屬性，要引入圖片的時(shí)候在src屬性里面加入要加入圖片的鏈接地址，圖片就顯示出在界面上啦。
<input />：文本框 ，就是平常像注冊(cè)登錄一樣的界面里輸入東西的地方，可以有很多類(lèi)型。
累死了，累死了。標(biāo)簽很多，列舉不完，這個(gè)其實(shí)做的多了，就好了，其實(shí)都一樣的東西。所以不要害怕哦，哈哈。
腰酸背痛啊，誒呦我這把老骨頭。接著來(lái)
上面寫(xiě)的是html部分啊，就先寫(xiě)這些，不敢寫(xiě)的深了，怕你一下接受不下，嘿嘿，不懂再問(wèn)我吧。
下面簡(jiǎn)單再說(shuō)一下css
前面也說(shuō)了，css負(fù)責(zé)的就是把界面按照你設(shè)計(jì)的東西表現(xiàn)出來(lái)，變得好看起來(lái)。給某一個(gè)標(biāo)簽設(shè)置樣式最常見(jiàn)的引入方法有三種方式：
1：直接在元素上利用標(biāo)簽的style屬性設(shè)置：
<div style='' font-size :16px; ''>你好啊，美女！</div>
這代表的意思是給div標(biāo)簽里的文字加上字體大小為16像素的樣式
2：在html文件里用<style></style>標(biāo)簽把樣式包起來(lái)。
<div></div>
<style>
div {
font-size:16px;
}
</style>
上面的代碼和第一種方法起到的作用是一樣的。
3：外部引入css文件，這種方法是現(xiàn)在比較推薦的一種方法，我也有說(shuō)過(guò)之前，現(xiàn)在的界面想把樣式和結(jié)構(gòu)分離開(kāi)，這樣維護(hù)起來(lái)會(huì)比較容易，我調(diào)整界面的時(shí)候只需要調(diào)整css文件就行了。
方法是在html的head標(biāo)簽里面使用link標(biāo)簽引入后綴為css文件
<link type="text/css" rel="stylesheet" href="style.css">
在外部新建一個(gè)名字為style.css的文件，然后在css文件里面寫(xiě)入樣式
div {
font-size:16px;
}
css給標(biāo)簽設(shè)置樣式的時(shí)候也有三種方法：
1：直接使用標(biāo)簽名稱(chēng)設(shè)置（上面的例子就是）
div {
font-size:16px;
}
這個(gè)表示的意思是界面上多的div的樣式都是字體為16像素大小
2：使用標(biāo)簽的class屬性設(shè)置類(lèi)名來(lái)做
<div class="demo"></div> ? ? ? ----------------------我們先給div元素設(shè)置一個(gè)名字叫demo的類(lèi)名
css里的設(shè)置方法
.demo{
font-size:16px;
}
css里對(duì)類(lèi)名設(shè)置的方法是在類(lèi)名前加入一個(gè)“ . ”然后設(shè)置
同個(gè)界面可以有很多歌相同類(lèi)名的div
3：使用標(biāo)簽的id屬性設(shè)置類(lèi)名來(lái)做
? ? ?<div id="demo"></div> ?----------------------我們先給div元素設(shè)置一個(gè)名字叫demo的id名css里的設(shè)置方法
#demo{
font-size:16px;
}
css里對(duì)id名設(shè)置的方法是在類(lèi)名前加入一個(gè)“# ”然后設(shè)置
每個(gè)界面叫demo的id只能有一個(gè)，id名稱(chēng)不能重復(fù)。
歇歇！
js這一塊就暫時(shí)不說(shuō)了，前期沒(méi)必要學(xué)習(xí)這個(gè)啦。
開(kāi)始實(shí)例做吧
首先新建一個(gè)文件夾作為項(xiàng)目的站點(diǎn)。文件夾里一般會(huì)放下面幾個(gè)文件
css文件夾、images文件夾、js文件夾 、 界面
這樣做是為了讓你的文件分好類(lèi)，這樣看著更有調(diào)理，其實(shí)你完全可以不建文件夾，統(tǒng)統(tǒng)放在一個(gè)里，只要你引入的路徑對(duì)了。
新建一個(gè)界面index.html。
做之前先大概確定一下界面的布局，把大區(qū)域分一下，比方說(shuō)這一個(gè)界面，大模塊的話(huà)沒(méi)有左右結(jié)構(gòu)，就是從上到下的結(jié)構(gòu)，導(dǎo)航--banner--小列表---小banner---列表---底部。所以你界面body里面的直接挨著的大模塊就是這大概六個(gè)div了。
<body>
<div class="daohang"> 這里面寫(xiě)導(dǎo)航的內(nèi)容?</div>
<div class="banner1"> 這里寫(xiě)banner的內(nèi)容 </div>
<div class="xiaoliebiao"> 這里寫(xiě)banner下面的類(lèi)似于熱門(mén)列表的部分 </div>
<div class="banner2"> 這里寫(xiě)小banner里面的內(nèi)容 </div>
<div class="liebiao"> 這里寫(xiě)衣服的列表區(qū)域 </div>
<div class="footer"> 這里寫(xiě)底部區(qū)域的內(nèi)容 </div>
</body>
在做的時(shí)候我們可以發(fā)現(xiàn)中間區(qū)域的部分一般會(huì)有一個(gè)固定寬度，這個(gè)現(xiàn)在來(lái)說(shuō)一般是1200px，市面上流行的顯示器寬度基本都已經(jīng)大于1200了，所以設(shè)置一個(gè)安全區(qū)域來(lái)保證我們的界面在所有電腦上都不會(huì)出現(xiàn)橫向滾動(dòng)條。所以我們的版心就是1200，居中。
<div class="daohang"></div>
.daohang {
width:1200px;
margin:0 auto; ?----------------這是最常用的塊狀元素居中的設(shè)置方式，行內(nèi)元素設(shè)置居中是在父元素 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?上加入text-align:center;就行了。
}
導(dǎo)航區(qū)域分為兩部分，一個(gè)是logo在左邊，一個(gè)是導(dǎo)航列表在右邊。
所以我們先把這兩塊做起來(lái)
<div class="daohang">
<div class="logo"> 這里放logo圖片 </div>
<div class="nav"> 這里放導(dǎo)航列表 </div>
</div>
然后需要做的是把logo的圖片切下來(lái)了，比如說(shuō)我們切下來(lái)一個(gè)logo.png 的圖片放在images文件夾內(nèi)
（我不寫(xiě)詳細(xì)的代碼文件了，就在這里面簡(jiǎn)單寫(xiě)寫(xiě)吧）
<div class="logo"><img ?src="images/logo.png" /></div>
<div class="nav">?
<ul>
<li><a herf="#">首頁(yè)</a></li>
<li><a herf="#">極致藝術(shù)</a></li>
......
</ul>
?</div>
這時(shí)候如果你直接看寫(xiě)的效果的話(huà)會(huì)發(fā)現(xiàn)logo和導(dǎo)航是在兩行的，這就是我們說(shuō)的塊狀元素的特點(diǎn)。但是我們現(xiàn)在要求他倆在一行，這時(shí)候就需要用到css了
css有個(gè)屬性叫float，有三個(gè)值left、right、none，相信以你的聰明可以知道是啥意思哈。
.logo{
float:left;
}
.nav {
float:right;
}
一個(gè)左浮動(dòng)一個(gè)右浮動(dòng)。
可以看到這兩個(gè)盒子是在一行了，但是，導(dǎo)航里面的每一個(gè)導(dǎo)航都還是各占一行，這是因?yàn)閘i標(biāo)簽也是塊狀元素。咋辦，當(dāng)當(dāng)當(dāng)當(dāng)~還是浮動(dòng)啊，左浮動(dòng)就好了
.nav li {
float:left;
}
.nav li 代表著類(lèi)名為nav的下面的標(biāo)簽為li的子元素。
具體的顏色，字體大小，邊框，鼠標(biāo)移動(dòng)過(guò)去的效果也可以在css里設(shè)置一下。
font-size設(shè)置字體大小
color設(shè)置顏色
border設(shè)置邊框 ，方法是 border:1px solid #333333;分別代表邊框?qū)挾?px，solid是表示實(shí)線(xiàn)的意思，當(dāng)然還有虛線(xiàn)的設(shè)置，可以自己看看哈，后面#333333就不用說(shuō)了，邊框顏色；
這個(gè)里面我們發(fā)現(xiàn)只有底部有邊框，所以我們可以像margin和padding一樣，分開(kāi)設(shè)置。只要設(shè)置border-bottom:2px solid #333;就行了，同樣還有，border-top、border-left、border-right這幾個(gè)。
我們現(xiàn)在想讓他鼠標(biāo)經(jīng)過(guò)的時(shí)候出現(xiàn)底部邊框
a標(biāo)簽有個(gè)hover狀態(tài)，表示鼠標(biāo)移動(dòng)過(guò)去的狀態(tài)（其實(shí)其他標(biāo)簽也可以設(shè)置hover屬性，也可以識(shí)別）
所以我們這樣設(shè)置，.nav li a:hover { border-bottom:2px solid #333333; }就好啦?。?！
晚上八點(diǎn)多了，得先歇會(huì)兒，吃個(gè)飯。你要不要喝個(gè)茶再看，哈哈。
酒足飯飽以后就不想干活了咋辦，嗝~。話(huà)說(shuō)也不知道你有耐心看到這里沒(méi)有?？吹竭@里有獎(jiǎng)勵(lì)，哼哼~。
好吧，看了一會(huì)兒running man ，接著寫(xiě)點(diǎn)兒，
改寫(xiě)banner區(qū)域了吧，banner的話(huà)可以看到整個(gè)區(qū)域是占滿(mǎn)屏幕的，沒(méi)有說(shuō)只是中間1200的內(nèi)容，但是可以看到的是，其實(shí)banner也有中間區(qū)域的，所以我們需要在這個(gè)外面的div里面再設(shè)置一個(gè)1200寬度的div（這個(gè)其實(shí)看具體banner的內(nèi)容長(zhǎng)什么樣了）,除了中間的內(nèi)容區(qū)域，外面的是純色的嘍，最喜歡純色的內(nèi)容了。我們先把中間的banner切圖下來(lái)，交banner1.png放在images文件夾內(nèi)。
<div class="banner1">
<div class="bannerbox"><img src="images/banner1.png" /></div>
</div>
.banner1 {
width:100%; ? -----------------因?yàn)楹竺娴募兩尘笆钦紳M(mǎn)屏幕的，所以設(shè)置100%的寬度
background:#B8E1E9;
}
.bannerbox {
width:1200px;
margin:0 auto;----------------里面的內(nèi)容區(qū)域是1200px;居中
}
.bannerbox img {
width:100%;-------------------banner里面的img圖片，寬度設(shè)置為1200，也就是父元素.bannerbox的 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?100%
}
突然想到一個(gè)問(wèn)題好像還沒(méi)有說(shuō)，margin，padding，雖然之前給解釋過(guò)，但是我覺(jué)得可能有點(diǎn)蒙，也不知道能寫(xiě)清楚不能，margin就是外邊距，margin的距離是不包含在盒子的寬高以?xún)?nèi)的，如果我們要設(shè)置兩個(gè)元素之間的距離的話(huà)，一般用margin。padding是內(nèi)邊距，例如一個(gè)盒子想要里面的內(nèi)容距離這個(gè)盒子的邊框之間有一定距離的話(huà)，就是用padding。如果設(shè)置背景的情況下，padding出來(lái)的距離是有背景的，就是說(shuō)padding是在自己家做邊距，margin是在家門(mén)外做間距。
快十一點(diǎn)了，就先這樣，以后有時(shí)間再寫(xiě)嘍。撒有哪啦。
未完待續(xù)......
