預(yù)備知識
- HTML 基本標(biāo)簽
- CSS 基本知識
- DIV+CSS 布局知識
- 套路：浮動與清除浮動
- 塊元素和內(nèi)聯(lián)元素的區(qū)別和用法
- 工具的使用：陰影效果的制作
一、結(jié)構(gòu)分類
- 頭部導(dǎo)航條制作
- 遮罩層制作
- 頭像伴郁、信息展示層
- 自我介紹層制作
- 技能進(jìn)度條制作
- 作品集制作
說明：以上結(jié)構(gòu)分類僅僅是個人分類方式告唆，按照不同需求可以有不同的分類方式巴帮。
二、頭部導(dǎo)航條制作
效果圖 ：
- 分析：
（1）頭部導(dǎo)航條分為左右兩側(cè)瞬女，左側(cè)為一個 名字的 Logo窍帝，且logo的兩邊顏色和字體大小均不同，鼠標(biāo)懸浮變化樣式且可以點擊跳轉(zhuǎn)鏈接诽偷；
（2）右側(cè)為一個導(dǎo)航條坤学，字間距，而且鼠標(biāo)移上去會有邊紅色框效果报慕。
（3）整個導(dǎo)航條始終定位在瀏覽器頂部不隨滾動條而變動深浮。 - 遇到問題：
1.如何讓logo和導(dǎo)航條左右分布烤蜕？
答：Logo左浮動警绩，導(dǎo)航條右浮動。2.如何讓Logo字體左右大小不同纵菌，顏色不同？
答：分別對"RS" 和 "card" 使用<span><a>xxx</a></span>標(biāo)簽包裹玄柠，分別給與CSS樣式突梦。3.右邊浮動效果？
答：使用無序列表羽利，讓列表浮動宫患，使其并排展示，并且清除列表默認(rèn)樣式这弧；4.鼠標(biāo)懸浮讓導(dǎo)航下變色效果娃闲？
答：設(shè)置下邊框鼠標(biāo)懸浮效果，添加顏色匾浪，粗細(xì)程度皇帮；5.讓整個導(dǎo)航條相對定位在頂部？
答：在其外層再包裹一層.topNavbar-inner蛋辈，相對其定位属拾；注意，需設(shè)置其寬度為100%冷溶，不然Nav無法浮動在右側(cè)渐白，因為塊元素的寬度是由內(nèi)容所決定，而內(nèi)容不能占滿一整行逞频，所以需定義其寬度纯衍。6.如何讓右邊導(dǎo)航欄和左側(cè)的logo對其？
答：設(shè)置上邊距margin-top
三苗胀、遮罩層制作
效果如圖：
- 分析：
（1）主要為兩部分組成襟诸，其中外部為圖片，內(nèi)部為遮罩基协；
（2）背景圖片需要相對瀏覽器橫縱向居中歌亲，且圖片要適應(yīng)瀏覽器而平鋪。 - 遇到問題：
1.設(shè)置背景圖平鋪堡掏，居中?
style="background-position: center center; background-size: cover;"2.遮罩層如何設(shè)置陰暗效果应结？
style=" background-color:rgba(0,0,0,0.8); "3.其他問題？
記得設(shè)置圖片和遮罩層的高度為圖片的大小style=" width = xxx px ;"
四泉唁、頭像鹅龄、信息展示層：
效果如圖：
分析：
（1）左側(cè)為頭像展示，距離周邊都有一定的距離亭畜；
（2）右側(cè)為信息展示扮休。難點：“Hello”標(biāo)志左下角的三角形制作；以及基本信息的左右對稱展示
（3）下部邊沿部分拴鸵，背景顏色玷坠，圖標(biāo)和之間距離蜗搔，以及鼠標(biāo)懸浮有背景灰色的效果。
（4）整個信息展示位居中且靠近上半部分八堡。遇到問題：
1.如何讓展示層居中且靠近上半部分樟凄？
答：對外層信息層給定一個固定寬和高，設(shè)置margin:0 auto進(jìn)行居中兄渺；設(shè)置整體margin-top:-xxx px;給定一個負(fù)值即可上浮缝龄。2.難點： “hello”標(biāo)志的和下方三角形的制作？
答-1：內(nèi)容包裹在span內(nèi)挂谍，設(shè)置背景色叔壤，為了讓內(nèi)容居中顯示更美觀，使用padding進(jìn)行填充口叙。
答-2：三角形的制作：原理：定義一個塊炼绘，使其寬和高均為0；設(shè)定其border的厚度妄田，然后設(shè)置三角形以外的部分為透明即可得到俺亮。注意一個小問題：我在寫代碼的時候遇到這樣一個問題：因為三角形的外部結(jié)構(gòu)為
.hello>.triangle，但是我在寫CSS給三角形定位的時候沒有使用.hello >.triangle形庭，而是寫成了.hello .triangle{position:absolute}铅辞，當(dāng)然厌漂，上層為.hello{position:relative}但是三角形卻相對body而定位（之前定義導(dǎo)航欄的時候也使用了position） 想知道是為什么呢萨醒？
效果和代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
span{
display:block;
border:15px solid red;
width:0;
height:0;
border-top-color:red;
border-right-color:blue;
border-bottom-color:blue;
/* border-right-color:transparent;
border-bottom-color:transparent; */
}
</style>
</head>
<body>
<span></span>
</body>
</html>
3.難點： 對信息左右對稱分布該怎么處理？
答：因為左右兩邊是一一對應(yīng)的苇倡，我們很容易想到使用<dl><dt><dd>這三個標(biāo)簽富纸。那么是如何做到的呢？首先旨椒，讓<dt><dd>元素都左浮動晓褪，同時父元素添加clearfix清除浮動；然后他們會合并成一行综慎。接下來涣仿，設(shè)置<dt>、<dd>的寬度分別各占總寬度的30%和70%（具體美感細(xì)節(jié)可以自己調(diào)節(jié)）示惊。然后設(shè)置行高line-height:xx px;好港，避免后續(xù)引起其他的bug。為了讓其和左邊照片對齊米罚，適當(dāng)調(diào)節(jié)上下的margin即可钧汹。4.
footer部分的svg鏈接如何制作？
答：此處录择，需要使用到一個工具：阿里巴巴矢量圖庫
第一步拔莱，注冊賬號碗降，選擇我們需要使用到的圖標(biāo)，加入購物車塘秦；
第二步：點擊購物車讼渊，創(chuàng)建項目，將選擇的圖標(biāo)添加進(jìn)入項目尊剔；
第三步：關(guān)鍵一步＞ァ！８潮１恃省！霹期！——看圖操作叶组，一步都不可省略！＠臁甩十！即使是添加了新圖標(biāo)也要刷新該代碼！吭产！我之前就是因為添加了新圖標(biāo)沒有刷新得到新代碼侣监，結(jié)果圖標(biāo)半天都出不來，折騰了半天才發(fā)現(xiàn)是這個問題
看圖操作一：操作說明
看圖操作二：部分截圖
接下來就是按照說明操作即可臣淤。第四步：檢查剛才的操作橄霉，是否引入了
js代碼？是否加入了CSS設(shè)置相關(guān)代碼邑蒋？是否修改了svg的圖標(biāo)代碼姓蜂？5.鼠標(biāo)浮動在“QQ、微博医吊、Github”上钱慢，有背后圓潤的暗色背景效果？
答：結(jié)構(gòu)為：<a><svg></svg</a>卿堂，設(shè)置外層a標(biāo)簽為inline-block束莫，設(shè)置邊框為border-radius:50%即圓角的設(shè)置方式，調(diào)整好大小 草描，外層添加padding,margin把footer撐起來览绿。設(shè)置鼠標(biāo)懸浮改變背景色，即可出現(xiàn)圓潤的暗色背景效果陶珠。6.注意問題：整個信息展示展示層的邊框有不是很明顯的陰影效果挟裂，如何設(shè)置？
答：實用工具——推薦網(wǎng)站:制作陰影效果揍诽，然后復(fù)制右側(cè)沒有前綴的那一串代碼即可诀蓉。
五栗竖、自我介紹層
- 分析：
（1）此部分分為2部分，其中一部分是 簡歷下載 按鈕的制作渠啤，一部分是簡單的自我介紹狐肢。 - 遇到問題：
1.如何制作簡歷下載的按鈕？
答：通常我們理解為是一個按鈕button標(biāo)簽沥曹，但是此處我們使用的不是按鈕份名，而是使用<a href="#"></a>來代替，但是它沒有外層效果妓美，所以在外層包裹一個<p>元素僵腺，設(shè)置其屬性為display:inline-block就可以使其長度適應(yīng)內(nèi)容變化而變化。同時也和上面一樣有陰影效果壶栋。2.自我介紹部分辰如？
答：這一部分比較簡單，在外層設(shè)置一個div設(shè)置其寬度贵试，讓內(nèi)容居中即可琉兜。當(dāng)然，這你也可以使用自己喜歡的字體進(jìn)行設(shè)置毙玻。
六豌蟋、技能進(jìn)度條制作
效果圖：
分析：
（1）首先是標(biāo)題部分，字體加粗桑滩；
（2）進(jìn)度條部分：主要解決兩個問題：如何制作進(jìn)度條梧疲？如何設(shè)置進(jìn)度條布局？遇到問題：
1.進(jìn)度條制作施符？
答：定義2個div往声，里外各一個，外層表示背景色戳吝，內(nèi)層表示進(jìn)度條，設(shè)置邊框和背景色即可.贯涎。2.如何布局听哭？
答：定義一個無序列表，使其浮動塘雳，然后設(shè)置兩邊寬度分別占一半（或者一半少一點陆盘，更好布局）。3.向左浮動的時候败明，原本右邊設(shè)置好的邊距擴(kuò)大了隘马？
答 ：有兩種方式，你可以對右邊的技能進(jìn)度條的左邊距設(shè)置固定值妻顶；或者是使右邊的進(jìn)度條向右浮動酸员，但是蜒车，兩種方式都要用到一個特殊的偽類元素nth-child(參數(shù))://參數(shù)even表示偶數(shù)，odd表示奇數(shù)幔嗦，也可填寫具體數(shù)字酿愧，表示第幾個;
注意 外邊框有陰影效果和圓角邊框，記得再添加樣式的時候不能遺漏邀泉。
七嬉挡、作品集制作
效果圖：
- 分析：
（1）其中，上部標(biāo)題和下面nav部分汇恤，包括進(jìn)度條部分庞钢，首先要實現(xiàn)居中布局，然后進(jìn)度條部分和之前一樣因谎，內(nèi)外兩層焊夸，只是，要使鼠標(biāo)點擊不同的選項進(jìn)度條也跟隨變化蓝角，這里要使用到部分js代碼阱穗，原理還是css。要使進(jìn)度條里面的紅色部分移動到中間部分和右邊使鹅，只需要用到2個屬性：一個是指定內(nèi)部進(jìn)度條的長度揪阶；其次是在中間和右邊的時候，需要用到margin-left:xx px;具體值當(dāng)然是自己調(diào)試?yán)瞺
（2）下面的3個作品集患朱，還是一樣的套路鲁僚，總體外部居中，指定寬和高裁厅，同時也給圖片指定寬和高冰沙。但是，一個需要注意的問題：為了后面更好添加js效果执虹，這里我們不采用浮動的方式對圖片布局拓挥，而是使用position相對定位。
最后：階段總結(jié)
總結(jié)我們在這個頁面中使用了哪些套路袋励？
1.首先清楚默認(rèn)樣式：
body{
margin: 0;
}
a{
color: inherit;
text-decoration: none;
}
*{
padding:0;
margin: 0;
}
ul,ol{
list-style: none;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
2.float 和 clearfix ：浮動和清除浮動：子元素要浮動侥啤，給它的父類添加浮動；
.clearfix::after {
content: '';
display: block;
clear: both;
}
3.固定定位茬故，例如導(dǎo)航條使用到的固定定位在頭部：父類position:relative盖灸；子類position:absolute，同時設(shè)置具體的位置top,left...
4.背景色設(shè)置暗色效果：background-color: rgba(0,0,0,0.8);
5.設(shè)置陰影: box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
6.display:block 磺芭、display:inline 赁炎、display:inline-block 三者的區(qū)別
-
display:block：塊元素
（1）block元素會獨占一行，多個block元素會各自新起一行钾腺。默認(rèn)情況下徙垫，block元素寬度自動填滿其父元素寬度讥裤。
（2）block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行松邪。
（3）block元素可以設(shè)置margin和padding屬性坞琴。
常見塊元素有：DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等
-
display:inline：內(nèi)聯(lián)元素
（1）inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里逗抑，直到一行排列不下剧辐，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化邮府。
（2）inline元素設(shè)置width,height屬性無效荧关。
（3）inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果褂傀；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果忍啤。
常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等
-
display:inline-block
（1）簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)仙辟。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)同波。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性叠国。
（2）通常和另一個屬性結(jié)合使用未檩，二者不分家
display: inline-block;
vertical-align: top;
7.設(shè)置邊框圓角：border-radius: 2px; ，具體參數(shù)可以自己調(diào)試
8.偽類元素nth-child(attr)參數(shù)值可以為 具體數(shù)字粟焊，奇數(shù)odd冤狡，偶數(shù)even ，主要為了方便給元素添加CSS效果项棠。
（完）
