(第一版)知識(shí)點(diǎn)

WEB前端開發(fā)做什么？
PC端頁(yè)面
移動(dòng)端頁(yè)面
解決用戶體驗(yàn)問題

必備條件是什么吴攒？
1>會(huì)上網(wǎng)颂碘，會(huì)打字，懂得互聯(lián)網(wǎng)是什么
2>興趣
3>肯練習(xí)

瀏覽器和服務(wù)器如何信息交互？
通過瀏覽器如何查看請(qǐng)求報(bào)文和響應(yīng)報(bào)文?

瀏覽器通過輸入的地址魏身，將請(qǐng)求報(bào)文發(fā)送到服務(wù)器刀脏，服務(wù)器從請(qǐng)求報(bào)文中得到要請(qǐng)求文件的信息蟀淮，服務(wù)器讀取它的信息最住，然后交給響應(yīng)報(bào)文，瀏覽器接收響應(yīng)報(bào)文怠惶，瀏覽器將文件內(nèi)容顯示出來涨缚。

瀏覽器在顯示內(nèi)容之前會(huì)做一些處理，通過瀏覽器內(nèi)核來解析響應(yīng)回來的內(nèi)容策治，才能將頁(yè)面顯示出來脓魏。
瀏覽器內(nèi)核：
內(nèi)核（Rendering Engine）：可大概譯為“渲染引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”通惫。負(fù)責(zé)對(duì)網(wǎng)頁(yè)語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用HTML轧拄、JavaScript）并渲染（顯示）網(wǎng)頁(yè)。
內(nèi)核的分類：
Trident：ie , 獵豹安全瀏覽器,360極速瀏覽器,百度瀏覽器...
Gecko：Firefox
Webkit：Safari讽膏，Chrome
Presto：Opera
不同的內(nèi)核在渲染同一內(nèi)容的時(shí)候會(huì)有差別。

頁(yè)面的本質(zhì)：從服務(wù)器中響應(yīng)回來的一段文本通過瀏覽器內(nèi)核來解析拄丰，解析出來顯示到頁(yè)面上府树。


http協(xié)議：瀏覽器與服務(wù)器交互的約定
http協(xié)議：請(qǐng)求報(bào)文 響應(yīng)報(bào)文 url      https協(xié)議  ftp協(xié)議
Url：http://192.168.16.200:8080/index.html 協(xié)議名 服務(wù)器的ip 端口號(hào) 請(qǐng)求文件的名稱
DNS域名解析系統(tǒng)  將192.168.16.200----->www.taobao.com 
 
所以建立網(wǎng)站首先要購(gòu)買 服務(wù)器和域名 ，用域名來綁定服務(wù)器  
學(xué)習(xí)那些知識(shí)才能做出精美作品料按？
1>軟件（5%的時(shí)間）
       瀏覽器: chrome  IE 火狐 蘋果 歐朋
       瀏覽器插件：F12 
       用來寫代碼的編輯器（ws奄侠、sublime......）
       Photoshop、FW（測(cè)量载矿、剪裁垄潮、編輯）


2>語言（至少花95%的時(shí)間）
     至少要學(xué)習(xí)： html   css   js這三種基本的語言

HTML 超文本標(biāo)記語言

語言：和瀏覽器認(rèn)識(shí)的語言、和瀏覽器打交道（溝通）
標(biāo)記闷盔、標(biāo)簽：<html>     <html>
標(biāo)簽對(duì)：<html></html>
單標(biāo)簽：<meta />  <img />
超：圖片弯洗、聲音、視頻超出于文本的范疇

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>hello world</body>
</html>


UTF-8是很有來頭的編碼逢勾，認(rèn)識(shí)世界各個(gè)語言牡整，能夠正確識(shí)別語言，相當(dāng)于是翻譯家溺拱，不會(huì)出現(xiàn)亂碼的現(xiàn)象


Css層疊樣式表（給網(wǎng)頁(yè)做裝修的）
width: 100px;
height: 100px;
background: red;

Javascript：腳本語言（是一種可以動(dòng)的行為）
搭建一個(gè)網(wǎng)頁(yè)相當(dāng)于搭建一個(gè)房子 html css js(冬暖夏涼)

案例：onclick="this.style.width='800px';this.style.height='800px';"
（讓頁(yè)面動(dòng)起來）


第一章常用標(biāo)簽
Html標(biāo)簽：
作用所有html中標(biāo)簽的一個(gè)根節(jié)點(diǎn)逃贝。
Head標(biāo)簽：
作用：用于存放：
title,meta,base,style,script,link
注意：每個(gè)head標(biāo)簽中都必須有一個(gè)有title標(biāo)簽，其它的可選迫摔。
Body標(biāo)簽：
作用：用于存放所有的html的結(jié)構(gòu)標(biāo)簽：
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
Title標(biāo)簽：
作用：讓頁(yè)面擁有一個(gè)屬于自己的標(biāo)題沐扳。
meta 標(biāo)簽：
常用用法：
1.Description：可以描述頁(yè)面，可以用來使用百度程序（網(wǎng)絡(luò)爬蟲）來收錄關(guān)鍵信息句占，以此提高頁(yè)面的排名沪摄。
2.Keywords：關(guān)鍵詞，可以用來提高頁(yè)面的關(guān)健詞的比重（前升排名的一種方式）
3.字符集（編碼格式）：charset

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

gbk,utf-8之間的區(qū)別：
相同點(diǎn)：都是字符的編碼格式。
區(qū)別：
utf-8:收錄是全世界所有的語言中的文字卓起。
gbk:收錄了漢字和敬，片假名。
大邢吩摹：
utf-8>gbk
性能：
uft-8<gbk
約定：將來我們?cè)谡麄€(gè)學(xué)習(xí)過程中都用utf-8;
utf-8存儲(chǔ)一個(gè)漢字占3個(gè)字節(jié)昼弟，
gbk存儲(chǔ)一個(gè)漢字上2個(gè)字節(jié)
標(biāo)簽的分類：
雙標(biāo)簽：有開始有結(jié)束，開始和結(jié)束之間是存在內(nèi)容
<h1></h1>,<p></p>
單標(biāo)簽：只有一個(gè)標(biāo)簽奕筐，自己閉合自己舱痘。
<hr /> ,<br /> ,<img/>
標(biāo)簽與標(biāo)簽之間的關(guān)系：
 嵌套關(guān)系：一個(gè)標(biāo)簽包含另外一個(gè)標(biāo)簽，他們之間構(gòu)造父子關(guān)系离赫。
 并列關(guān)系：兩個(gè)標(biāo)簽并列芭逝，他們構(gòu)造兄弟關(guān)系。
 注意：將來在書寫代碼的時(shí)候如果兩個(gè)標(biāo)簽之間的關(guān)系是嵌套關(guān)系渊胸，最好通過代碼直接反映出來（子元素相對(duì)于父元素有一個(gè)縮進(jìn)）旬盯。如果是并列關(guān)系，最好要有對(duì)齊翎猛。

h系列的標(biāo)簽(Header)：h1,h2,h3,h4,h5,h6
作用：把頁(yè)面上的文字加上標(biāo)題的語義胖翰。
h1,h2,h3,h4,h5,h6:將文字放大厚宰，加粗.并且逐漸變小江耀。（h1標(biāo)簽是最大的。）

p標(biāo)簽(Paragraph)：段落標(biāo)簽
作用：給頁(yè)面的上一段文字加上段落的說語義

hr標(biāo)簽
作用：在頁(yè)面顯示一條橫線

br標(biāo)簽
作用：換行

b u i s(沒有語義)  strong ins em del
作用：
b：加粗
u: 下劃線
i:  傾斜
s: 刪除線   
建議在含有語義化情景時(shí)盡量不要使用巨税，因?yàn)檫@些標(biāo)簽沒有語義疫稿。


strong:加粗
ins:下劃線
em:傾斜
del:刪除線
可以使用有語義化的意思

Img標(biāo)簽
作用：在頁(yè)面顯示一張圖片
src 圖片顯示的路徑
alt 如果圖片加載不出來會(huì)顯示這個(gè)屬性中的文字
title   介紹這張圖片

a標(biāo)簽（錨）
作用：可以在一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面培他。
注意：在a標(biāo)簽之內(nèi)必須要寫上文字，如果沒有遗座，那么這個(gè)標(biāo)簽在頁(yè)面上找不到舀凛。
1.可以跳轉(zhuǎn)到另外的頁(yè)面。
2.可以不跳轉(zhuǎn)（跳轉(zhuǎn)到當(dāng)前頁(yè)面）href=”#”
3.可以在當(dāng)前頁(yè)面進(jìn)行定位途蒋。
      A.設(shè)置a標(biāo)簽的href屬性為“#id名”腾降，
      B.在頁(yè)面的指定位置加入一個(gè)目標(biāo)標(biāo)簽（可以是任意標(biāo)簽）
      C.必須給這個(gè)標(biāo)簽設(shè)置一個(gè)id名：<p id=”mubiao”>這是目標(biāo)</p>
4.在一個(gè)頁(yè)面跳轉(zhuǎn)到指定的頁(yè)面的指定的位置。
a標(biāo)簽的屬性
href    a標(biāo)簽跳轉(zhuǎn)的目標(biāo)地址
target  _blank:保留原始頁(yè)面碎绎，再進(jìn)行跳轉(zhuǎn)
_self:在當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn)
base    為頁(yè)面上所有的a標(biāo)簽設(shè)置跳轉(zhuǎn)的方式（base標(biāo)簽一般放在titile標(biāo)簽下面）

路徑問題：

第一種：絕對(duì)路徑
    帶有盤符的路徑：C:\上課內(nèi)容\01html第一天\4-源代碼\1.jpg.
第二種：相對(duì)路徑
    由頁(yè)面是一個(gè)文件螃壤，圖片 也是一個(gè)文件，而現(xiàn)在需要在頁(yè)面上輸出圖片筋帖，所以需要得到圖片相對(duì)于文件的路徑.

 a.如果頁(yè)面與圖片在同一目錄下面：

<img src=”2.jpg” />
 b.如果頁(yè)面在圖片一上級(jí)目錄：

  <img src=”image/1.jpg” />
 c.如果圖片在頁(yè)面的上一級(jí)目錄：   

 <img src=”../2.jpg” />
問題：那么將來我們?cè)趯?shí)際開發(fā)中到底是用絕對(duì)路徑奸晴，還是用相對(duì)路徑？日麸？
只要不出意外情況都是用相對(duì)路徑：因?yàn)橄鄬?duì)路徑的可移植性要強(qiáng)寄啼。

無序列表 ul li
有序列表 ol
自定義列表 dl dt dd

注釋 
<!--我是html里面的注釋-->
/*我是css里面的注釋*/

Photoshop相關(guān)的操作（切圖逮光、測(cè)量、對(duì)圖片簡(jiǎn)單的處理）

首先下載ps軟件
如何得到一張圖片
1>設(shè)計(jì)師給的ps圖片
2>印屏幕：prt scsysrq 


新建畫布墩划，放大縮小圖片涕刚，新建圖層，復(fù)制圖層乙帮，吸管使用杜漠，漸變，鋼筆察净，打字驾茴，圖片切圖、去除圖片上的文字氢卡、alt+delete前景顏色锈至、ctrl+delete后景顏色



第二章 css

引入css樣式：行間樣式 內(nèi)部樣式 外部樣式

border樣式  （做練習(xí)三角）
border: 10px dashed black;
/*復(fù)合樣式 虛線有兼容問題*/
border: 10px dotted black; 
/*點(diǎn)劃線有兼容問題*/
border-top: 10px solid blueviolet;
border-left: 10px solid red;
border-right: 10px solid hotpink;
border-bottom: 10px solid yellow;


background樣式（做練習(xí)）
background-image: url("a.jpg");
/*默認(rèn)狀態(tài)下是平鋪的*/
background-repeat: no-repeat;
/*背景不平鋪*/
background-color: red;
/*背景圖片比背景顏色層級(jí)高*/
background-repeat: repeat-x;
/*背景水平平鋪*/
background-repeat: repeat-y;
/*背景垂直平鋪*/
background-position: 10px 10px;  
/*背景定位*/
第一個(gè)參數(shù)水平，第二個(gè)參數(shù)垂直
left译秦、center峡捡、right    top、center筑悴、bottom

background-attachment: fixed;
/*背景固定*/
background-attachment: scroll;
/*默認(rèn)樣式滾動(dòng)*/
合寫
background: red url("a.jpg") no-repeat center center;

顏色單位
Red（顏色單詞）  #333333(16進(jìn)制模式)  rgb(255,255,255) rgb模式

font（做練習(xí)）
         font-size 文字大小
    font-weight 文字加粗(bold加粗/normal正常)
    font-style 文字傾斜(italic傾斜/normal正常)
    line-height 行高 （文字在一行上下居中）
    font-family 字體 
    -------------------------------------
    font:font-weight font-style font-size/line-height font-family;
    font:font-size font-family(必須要寫)
        -------------------------------------
         color 文字顏色
    text-indent 首行縮進(jìn) (1em=1個(gè)文字大小)
    text-align 文本對(duì)齊方式(left/center/right)
    text-decoration 文本修飾(underline下劃線/line-through 刪除/overline 上劃線/none)    
         letter-spacing字間距
         word-spacing空格之間的間距棋返，單詞與單詞之間的間距

寫一個(gè)盒子模型
   
 可視寬（高）=border+padding+width(height) 

 1> padding內(nèi)填充(padding在元素的邊框以內(nèi)，內(nèi)容之外,padding會(huì)顯示元素的背景)
 Top|right|bottom|left

 2>Margin:(邊框以外雷猪，不顯示元素的背景)
 Top|right|bottom|left

margin疊加的問題（相鄰兩個(gè)元素上下margin是疊加，取最大值顯示）
Margin傳遞問題 （子元素的margin會(huì)傳遞給父級(jí)）

Margin-left:auto(注意下距離左側(cè)auto晰房，會(huì)把剩下的空余距離全都占掉)
Margin-right同理
Margin：0 auto求摇；居中

常見的選擇器

Id選擇器（同一頁(yè)面不能重名）#
類選擇器 .
標(biāo)簽選擇器 p
包含選擇器 .box p
群組選擇器 ,
通配符 * 

選擇器的優(yōu)先級(jí)
1.選擇器優(yōu)先級(jí)一致的情況下，后面的樣式會(huì)覆蓋前面的樣式
2.行間樣式>id選擇器>class選擇器>標(biāo)簽選擇器>通配符

包含選擇器和群組選擇器比較：
包含選擇器優(yōu)先級(jí)可以疊加(優(yōu)先級(jí)可以相互抵消)
群組選擇器優(yōu)先級(jí)不疊加

標(biāo)簽類型
塊
  1.獨(dú)占一行
  2.支持所有樣式
  3.不設(shè)置寬度的時(shí)候殊者，寬度撐滿整個(gè)一行
內(nèi)嵌
  1.可以在一行顯示
  2.不支持寬高与境，不支持上下的margin和padding等樣式的問題
  3.寬度由內(nèi)容撐開
  4.代碼換行被解析

那如何判斷他們是塊狀還是內(nèi)聯(lián)？
div猖吴、 ul li 摔刁、dl dt dd、 h1 海蔽、p 共屈、strong 、a党窜、 em

如何清除默認(rèn)樣式拗引？

塊和內(nèi)嵌的轉(zhuǎn)換？
1.display:block; 顯示為塊
2.Display:inline;顯示為內(nèi)嵌

塊狀元素如何在同一行顯示幌衣？第一種方法解決

Display:inline-block的特征：
1.塊在一行顯示
2.行內(nèi)屬性標(biāo)簽支持寬高
3.沒有寬度的時(shí)候內(nèi)容撐開寬度
4.標(biāo)簽之間的換行被解析(問題)
5.Ie6 7不支持inline-block(問題)

分頁(yè)的練習(xí)

塊元素如何在同一行顯示矾削？第二種方法解決
浮動(dòng)
浮動(dòng)的定義：使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來哼凯。

float:left | right | none | inherit;





浮動(dòng)的特征：
         1欲间、塊在一排顯示
    2、內(nèi)聯(lián)支持寬高
    3断部、默認(rèn)內(nèi)容撐開寬度
         4猎贴、脫離文檔流
    5、提升層級(jí)

清除浮動(dòng)：
1.加高
問題：擴(kuò)展性不好

2.父級(jí)浮動(dòng)
問題：頁(yè)面中所有元素都加浮動(dòng)家坎，margin左右自動(dòng)失效

3.inline-block 清浮動(dòng)方法：
問題：margin左右auto失效嘱能；

4.空標(biāo)簽清浮動(dòng)
問題：IE6 最小高度 19px；（解決后IE6下還有2px偏差）

5.br清浮動(dòng)
問題：不符合工作中：結(jié)構(gòu)虱疏、樣式惹骂、行為，三者分離的要求做瞪。

6.after偽元素 清浮動(dòng)方法（現(xiàn)在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{*zoom:1;}

after偽類： 元素內(nèi)部末尾添加內(nèi)容对粪；
:after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放 
        a装蓬、觸發(fā) IE下 haslayout著拭，使元素根據(jù)自身內(nèi)容計(jì)算寬高。
        b牍帚、FF 不支持儡遮；
7.overflow:hidden 清浮動(dòng)方法；
問題：需要配合 寬度 或者 zoom 兼容IE6 IE7等一些問題









                    

定位
  
如何讓div2移動(dòng)到圖2上面的位置暗赶？

定位元素位置控制  top/right/bottom/left  定位元素偏移量鄙币。

position:relative;  相對(duì)定位
a、不影響元素本身的特性蹂随；
b十嘿、不使元素脫離文檔流（元素移動(dòng)之后原始位置會(huì)被保留）；
c岳锁、如果沒有定位偏移量绩衷，對(duì)元素本身沒有任何影響；
d激率、提升層級(jí)

position:absolute;  絕對(duì)定位
a咳燕、使元素完全脫離文檔流；
b乒躺、使內(nèi)嵌支持寬高迟郎；
c、塊屬性標(biāo)簽內(nèi)容撐開寬度聪蘸；
d宪肖、如果有定位父級(jí)相對(duì)于定位父級(jí)發(fā)生偏移表制，沒有定位父級(jí)相對(duì)于body發(fā)生偏移；
e控乾、相對(duì)定位一般都是配合絕對(duì)定位元素使用么介；
f、提升層級(jí)


z-index:[number]蜕衡；  定位層級(jí)
a壤短、定位元素默認(rèn)后者層級(jí)高于前者；
b慨仿、建議在兄弟標(biāo)簽之間比較層級(jí)
z-index:[number]久脯；  定位層級(jí)


position:fixed； 固定定位
與絕對(duì)定位的特性基本一致镰吆，的差別是始終相對(duì)整個(gè)文檔進(jìn)行定位帘撰；
問題：IE6不支持固定定位；

position:absolute; 絕對(duì)定位元素子級(jí)的浮動(dòng)可以不用寫清浮動(dòng)方法万皿；

position:fixed;  固定定位元素子級(jí)的浮動(dòng)可以不用寫清浮動(dòng)方法摧找；（IE6不兼容）


關(guān)于層級(jí)問題的一些思考。
1.后來居上原則
2.層級(jí)優(yōu)先z-index
3.拼爹原則
4.加上定位之后牢硅，繼承失效

偽類
:link
偽類將應(yīng)用于未被訪問過的鏈接蹬耘，與:visited互斥。
:visited
偽類將應(yīng)用于已經(jīng)被訪問過的鏈接减余，與:link互斥综苔。
:hover
偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素。
:active
偽類將應(yīng)用于被激活的元素位岔，如被點(diǎn)擊的鏈接如筛、被按下的按鈕等。

需要注意的是在CSS的定義中赃承，同一個(gè)元素的:hover必須位于:link、:visited之后才能生效悴侵，:active必須位于:hover之后才能生效瞧剖。

:focus
偽類將應(yīng)用于擁有鍵盤輸入焦點(diǎn)的元素。
:first-child
偽類將應(yīng)用于元素在頁(yè)面中第一次出現(xiàn)的時(shí)候





偽元素
:first-letter
偽元素的樣式將應(yīng)用于元素文本的第一個(gè)字（母）可免。
:first-line
偽元素的樣式將應(yīng)用于元素文本的第一行抓于。
:before
在元素內(nèi)容的最前面添加新內(nèi)容。
:after
在元素內(nèi)容的最后面添加新內(nèi)容浇借。

偽元素和偽類的區(qū)別：
與偽類針對(duì)特殊狀態(tài)的元素不同的是捉撮，偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作，設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字（母）妇垢、第一行巾遭，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作肉康。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象灼舍，并不存在于文檔中吼和，所以叫偽元素。

表格

表格標(biāo)簽：
    table 表格
    thead 表格頭
    tbody 表格主體
    tr 表格行
    th 元素定義表頭
    td 元素定義表格單元

表格樣式重置
table{border-collapse:collapse;} 單元格間隙合并
th,td{padding:0;}重置單元格默認(rèn)填充

colspan  屬性規(guī)定單元格可橫跨的列數(shù)骑素。<td colspan="2"></td>
    
rowspan  屬性規(guī)定單元格可橫跨的行數(shù)炫乓。<td rowspan="2"></td>
       
表單
form   表單
<input type="…… " name="" value="" /> 
text              文本框
password     密碼
radio            單選
checkbox     復(fù)選
submit         提交
reset            重置
button         按鈕
image          圖片
file               上傳
hidden         隱藏

label  標(biāo)簽為 input 元素定義標(biāo)注
    <input type="checkbox" name="" id="a"/>
    <label for="a">……</label>

checked  在頁(yè)面加載時(shí)默認(rèn)選定的 input 元素。
    <input type="checkbox" name="" checked/>

disabled  屬性規(guī)定應(yīng)該禁用 input 元素献丑。
    <input type="checkbox" name="" disabled/>


select/option 下拉選框


textarea      文本域
    各個(gè)瀏覽器下的默認(rèn)滾動(dòng)條顯示不兼容
    css3新增 resize 調(diào)整尺寸屬性末捣；


常見的實(shí)體字符
<!--空格-->
<button>登&nbsp;&nbsp;&nbsp;&nbsp;錄</button>
<!--引號(hào)-->
<input type="text" value="這是個(gè)&quot;引號(hào)&quot;"/>
<!--大于小于號(hào)-->
<div> 這是個(gè)&lt;span標(biāo)簽&gt;</div>
<!--版權(quán)所有-->
<div>版權(quán)所有&copy;2016</div>
<!--顯示&字符-->
<div>空格的實(shí)體字符是&amp;nbsp</div>
Css Hack調(diào)整兼容性
hack雖然有黑客的意思，但是這里和黑客沒有半毛錢關(guān)系创橄，這里hack是小技巧的意思箩做。
方式一 條件注釋法（較為常用）

只在IE下生效
<!--[if IE]><![endif]-->
只在IE6下生效
<!--[if IE 6]><![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]><![endif]-->
只在IE8上不生效
<!--[if ! IE 8]><![endif]-->
非IE瀏覽器生效
<!--[if !IE]><![endif]-->

方式二 屬性前綴法
*加在屬性上 表示該屬性只針對(duì)IE567生效（最常用的是這個(gè) 還有其他的）


\9是支持ie10以及ie10以下
*  +是支持ie7以及ie7以下
_是ie以及ie6以下

 
固定布局的類型  www.jd.com
響應(yīng)式布局的類型
   流式布局（就像水一樣，其實(shí)就是按照百分比布局  https://m.jd.com/  http://m.sohu.com/）                                         
   柵格布局（bookstrap柵格布局系統(tǒng) 其實(shí)就是改變一個(gè)范圍做出改變筐摘，一格一格的改變 http://www.bootcss.com/）
   瀑布流布局 （隨窗口的改變而改變卒茬，等寬不等高，就像瀑布一樣,蒙德里安風(fēng)格 錯(cuò)落大方 超現(xiàn)實(shí)主義 簡(jiǎn)潔大氣冷抽象 時(shí)裝 家具）
   圣杯布局  雙飛翼布局（中間自適應(yīng)咖熟，兩邊不改變 www.taobao.com）
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末圃酵，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子馍管，更是在濱河造成了極大的恐慌郭赐，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,386評(píng)論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件确沸，死亡現(xiàn)場(chǎng)離奇詭異捌锭，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)罗捎，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評(píng)論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門观谦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人桨菜，你說我怎么就攤上這事豁状。” “怎么了倒得？”我有些...
    開封第一講書人閱讀 164,704評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵泻红，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我霞掺，道長(zhǎng)谊路，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,702評(píng)論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任菩彬，我火速辦了婚禮缠劝，結(jié)果婚禮上潮梯，老公的妹妹穿的比我還像新娘。我一直安慰自己剩彬，他們只是感情好酷麦，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著喉恋，像睡著了一般沃饶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上轻黑，一...
    開封第一講書人閱讀 51,573評(píng)論 1贊 305
  • 城市分裂傳說
    那天糊肤，我揣著相機(jī)與錄音，去河邊找鬼氓鄙。 笑死馆揉，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的抖拦。 我是一名探鬼主播升酣，決...
    沈念sama閱讀 40,314評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼态罪！你這毒婦竟也來了噩茄？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,230評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤复颈，失蹤者是張志新（化名）和其女友劉穎绩聘，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耗啦，經(jīng)...
    沈念sama閱讀 45,680評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡凿菩，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帜讲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衅谷。...
    茶點(diǎn)故事閱讀 39,991評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖似将，靈堂內(nèi)的尸體忽然破棺而出获黔，到底是詐尸還是另有隱情，我是刑警寧澤玩郊，帶...
    沈念sama閱讀 35,706評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布肢执，位于F島的核電站枉阵，受9級(jí)特大地震影響译红，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜兴溜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一侦厚、第九天 我趴在偏房一處隱蔽的房頂上張望耻陕。 院中可真熱鬧，春花似錦刨沦、人聲如沸诗宣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評(píng)論 0贊 22
  • 一樁弒父案想诅，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽召庞。三九已至，卻和暖如春来破，著一層夾襖步出監(jiān)牢的瞬間篮灼，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工徘禁， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诅诱，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,158評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓送朱，卻偏偏與公主長(zhǎng)得像娘荡，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子驶沼，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容