寫完標(biāo)題以后發(fā)呆了好大一會(huì)兒，多少年沒提筆寫過文章了啊牢裳，寫成大白話了逢防，你可不能怪我啊 ? ? (*???)。去年在站酷上寫過兩篇關(guān)于前端入門的小教程蒲讯，那時(shí)候也是累的半死忘朝。昨天在公司的時(shí)候翻出來看了看，我去判帮，寫的什么渣渣＞粥摇！晦墙！不能讓你看啊悦昵，不然我高大威武帥氣英俊的形象在你心里就崩塌了。重寫晌畅！
-----------寫這里的時(shí)候距離上面那一段已經(jīng)過去倆小時(shí)了(但指。?＿?。)?抗楔，理由很簡(jiǎn)單棋凳，我嘴饞了，下去買了一堆零食连躏，哈哈剩岳，現(xiàn)在一邊吃零食一邊寫，老分心了~~~
首先說一下入热，為了讓更方便的不懂代碼的你能快速接觸前端拍棕，所以有些地方我寫的可能不準(zhǔn)確疲迂，也不深入，但是這并不耽擱你去寫這些東西莫湘。
好吧，啰嗦一大堆郑气，正式開始吧幅垮。單獨(dú)寫一堆理論你估計(jì)頭又大了（即便你悟性這么大）嘿嘿，所以我還是做個(gè)實(shí)例吧尾组！先得畫個(gè)效果圖忙芒，得在你面前班門弄斧了。
做圖的時(shí)候其實(shí)也需要先想一下布局讳侨，logo呵萨，導(dǎo)航，banner跨跨，列表這些必不可少的東西怎么排版潮峦，心里先有個(gè)譜。
但是我突然決定用去年寫教程時(shí)做的那張效果圖勇婴，任性一次唄忱嘹！
首先先總結(jié)一下之前說的前端是什么東西础米，都負(fù)責(zé)做什么的，html是啥添诉，css是啥屁桑，js是啥。
設(shè)計(jì)師在把界面設(shè)計(jì)出來以后是不能直接用在網(wǎng)頁上的吻商，設(shè)計(jì)的一些按鈕啊掏颊，鏈接、輸入框這些需要交互的在一張圖上是肯定不能實(shí)現(xiàn)的艾帐，所以現(xiàn)在需要前端來把這些東西分分類乌叶，該是圖片的，該是按鈕的柒爸，或者是輸入框的准浴，這些都給他放到指定的框里面，讓他們起到設(shè)計(jì)師想讓他們發(fā)揮的作用捎稚。這些框通俗來說就是div（或者是其他的HTML標(biāo)簽）乐横，這就是html要起到的作用求橄。
但是你只是把他們放到一個(gè)個(gè)框里面，功能是可以實(shí)現(xiàn)了葡公，但是你發(fā)現(xiàn)只是這些的話界面就像沒設(shè)計(jì)一樣罐农，你們?cè)O(shè)計(jì)師的心血白費(fèi)了啊，所以這時(shí)候css就出來了催什，css就是樣式涵亏，負(fù)責(zé)的部分是把之前框里面的東西讓他按照你設(shè)計(jì)的界面出現(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就是一個(gè)個(gè)的標(biāo)簽組成的，所有的元素都需要放在標(biāo)簽里面隅要，而標(biāo)簽一般來說是成對(duì)出現(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這個(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è)模塊里覺得零碎的標(biāo)簽，給他包起來蟀淮，這樣結(jié)構(gòu)就很清晰最住，類似于你用ps時(shí)候ctrl+g分組一樣，哈哈怠惶，你分的一些模塊完全都可以包在這個(gè)標(biāo)簽里面涨缚。
其他的大部分標(biāo)簽?zāi)愣伎梢韵壤斫鉃楹蚫iv一樣的東西，只不過叫的名字不一樣策治。其實(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盒子來用，里面放個(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)和加粗藐吮，包括之前說的h2溺拱、h3等等。他的有個(gè)特點(diǎn)是在搜索的時(shí)候權(quán)重會(huì)高一點(diǎn)谣辞，也就是代表重要性高迫摔。
<a></a>：a標(biāo)簽是超鏈接，就是網(wǎng)頁上你可以點(diǎn)擊跳轉(zhuǎn)界面的東西泥从，看網(wǎng)頁的時(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帆阳，他是代表無序列表的意思哺壶，一般導(dǎo)航上會(huì)用到。
<img /> ： 這是一個(gè)單標(biāo)簽蜒谤，這個(gè)的作用是引入圖片变骡。每個(gè)標(biāo)簽都有自己的屬性，要引入圖片的時(shí)候在src屬性里面加入要加入圖片的鏈接地址芭逝，圖片就顯示出在界面上啦塌碌。
<input />：文本框 ，就是平常像注冊(cè)登錄一樣的界面里輸入東西的地方旬盯，可以有很多類型台妆。
累死了，累死了胖翰。標(biāo)簽很多接剩，列舉不完，這個(gè)其實(shí)做的多了萨咳，就好了懊缺，其實(shí)都一樣的東西。所以不要害怕哦，哈哈鹃两。
腰酸背痛啊遗座，誒呦我這把老骨頭。接著來
上面寫的是html部分啊俊扳，就先寫這些途蒋，不敢寫的深了，怕你一下接受不下馋记，嘿嘿号坡，不懂再問我吧。
下面簡(jiǎn)單再說一下css
前面也說了梯醒，css負(fù)責(zé)的就是把界面按照你設(shè)計(jì)的東西表現(xiàn)出來宽堆，變得好看起來。給某一個(gè)標(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ù)起來會(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文件里面寫入樣式
div {
font-size:16px;
}
css給標(biāo)簽設(shè)置樣式的時(shí)候也有三種方法：
1：直接使用標(biāo)簽名稱設(shè)置（上面的例子就是）
div {
font-size:16px;
}
這個(gè)表示的意思是界面上多的div的樣式都是字體為16像素大小
2：使用標(biāo)簽的class屬性設(shè)置類名來做
<div class="demo"></div> ? ? ? ----------------------我們先給div元素設(shè)置一個(gè)名字叫demo的類名
css里的設(shè)置方法
.demo{
font-size:16px;
}
css里對(duì)類名設(shè)置的方法是在類名前加入一個(gè)“ . ”然后設(shè)置
同個(gè)界面可以有很多歌相同類名的div
3：使用標(biāo)簽的id屬性設(shè)置類名來做
? ? ?<div id="demo"></div> ?----------------------我們先給div元素設(shè)置一個(gè)名字叫demo的id名css里的設(shè)置方法
#demo{
font-size:16px;
}
css里對(duì)id名設(shè)置的方法是在類名前加入一個(gè)“# ”然后設(shè)置
每個(gè)界面叫demo的id只能有一個(gè)察净，id名稱不能重復(fù)驾茴。
歇歇！
js這一塊就暫時(shí)不說了锈至，前期沒必要學(xué)習(xí)這個(gè)啦。
開始實(shí)例做吧
首先新建一個(gè)文件夾作為項(xiàng)目的站點(diǎn)译秦。文件夾里一般會(huì)放下面幾個(gè)文件
css文件夾峡捡、images文件夾、js文件夾 筑悴、 界面
這樣做是為了讓你的文件分好類们拙，這樣看著更有調(diào)理，其實(shí)你完全可以不建文件夾阁吝，統(tǒng)統(tǒng)放在一個(gè)里砚婆，只要你引入的路徑對(duì)了。
新建一個(gè)界面index.html突勇。
做之前先大概確定一下界面的布局装盯，把大區(qū)域分一下坷虑，比方說這一個(gè)界面，大模塊的話沒有左右結(jié)構(gòu)验夯，就是從上到下的結(jié)構(gòu)猖吴，導(dǎo)航--banner--小列表---小banner---列表---底部。所以你界面body里面的直接挨著的大模塊就是這大概六個(gè)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>
在做的時(shí)候我們可以發(fā)現(xiàn)中間區(qū)域的部分一般會(huì)有一個(gè)固定寬度海蔽，這個(gè)現(xiàn)在來說一般是1200px，市面上流行的顯示器寬度基本都已經(jīng)大于1200了绑谣，所以設(shè)置一個(gè)安全區(qū)域來保證我們的界面在所有電腦上都不會(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)航列表在右邊。
所以我們先把這兩塊做起來
<div class="daohang">
<div class="logo"> 這里放logo圖片 </div>
<div class="nav"> 這里放導(dǎo)航列表 </div>
</div>
然后需要做的是把logo的圖片切下來了欲间，比如說我們切下來一個(gè)logo.png 的圖片放在images文件夾內(nèi)
（我不寫詳細(xì)的代碼文件了楚里，就在這里面簡(jiǎn)單寫寫吧）
<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>
這時(shí)候如果你直接看寫的效果的話會(huì)發(fā)現(xiàn)logo和導(dǎo)航是在兩行的，這就是我們說的塊狀元素的特點(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 代表著類名為nav的下面的標(biāo)簽為li的子元素。
具體的顏色儡遮，字體大小乳蛾，邊框，鼠標(biāo)移動(dòng)過去的效果也可以在css里設(shè)置一下。
font-size設(shè)置字體大小
color設(shè)置顏色
border設(shè)置邊框 肃叶，方法是 border:1px solid #333333;分別代表邊框?qū)挾?px蹂随，solid是表示實(shí)線的意思，當(dāng)然還有虛線的設(shè)置因惭，可以自己看看哈岳锁，后面#333333就不用說了，邊框顏色蹦魔；
這個(gè)里面我們發(fā)現(xiàn)只有底部有邊框激率，所以我們可以像margin和padding一樣，分開設(shè)置勿决。只要設(shè)置border-bottom:2px solid #333;就行了乒躺，同樣還有，border-top低缩、border-left嘉冒、border-right這幾個(gè)。
我們現(xiàn)在想讓他鼠標(biāo)經(jīng)過的時(shí)候出現(xiàn)底部邊框
a標(biāo)簽有個(gè)hover狀態(tài)咆繁，表示鼠標(biāo)移動(dòng)過去的狀態(tài)（其實(shí)其他標(biāo)簽也可以設(shè)置hover屬性讳推，也可以識(shí)別）
所以我們這樣設(shè)置，.nav li a:hover { border-bottom:2px solid #333333; }就好啦Ｍ姘恪Ｒ佟！
晚上八點(diǎn)多了壤短，得先歇會(huì)兒设拟，吃個(gè)飯慨仿。你要不要喝個(gè)茶再看久脯，哈哈。
酒足飯飽以后就不想干活了咋辦镰吆，嗝~帘撰。話說也不知道你有耐心看到這里沒有⊥蛎螅看到這里有獎(jiǎng)勵(lì)摧找，哼哼~。
好吧牢硅，看了一會(huì)兒running man 蹬耘，接著寫點(diǎn)兒，
改寫banner區(qū)域了吧减余，banner的話可以看到整個(gè)區(qū)域是占滿屏幕的综苔，沒有說只是中間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切圖下來晤柄，交banner1.png放在images文件夾內(nèi)。
<div class="banner1">
<div class="bannerbox"><img src="images/banner1.png" /></div>
</div>
.banner1 {
width:100%; ? -----------------因?yàn)楹竺娴募兩尘笆钦紳M屏幕的妖胀，所以設(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è)問題好像還沒有說做粤，margin浇借，padding，雖然之前給解釋過怕品，但是我覺得可能有點(diǎn)蒙妇垢，也不知道能寫清楚不能，margin就是外邊距肉康，margin的距離是不包含在盒子的寬高以內(nèi)的闯估，如果我們要設(shè)置兩個(gè)元素之間的距離的話，一般用margin吼和。padding是內(nèi)邊距涨薪，例如一個(gè)盒子想要里面的內(nèi)容距離這個(gè)盒子的邊框之間有一定距離的話，就是用padding炫乓。如果設(shè)置背景的情況下刚夺，padding出來的距離是有背景的，就是說padding是在自己家做邊距末捣，margin是在家門外做間距侠姑。
快十一點(diǎn)了，就先這樣箩做，以后有時(shí)間再寫嘍莽红。撒有哪啦。
未完待續(xù)......
