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