今天嘗試還原這個(gè)畫面，編寫代碼的過(guò)程中，遇到的疙瘩有：
1、自定義列表
自定義列表<dl></dl>。每個(gè)自定義列表項(xiàng)<dt></dt>。每個(gè)自定義列表項(xiàng)<dd></dd>。
【后來(lái)發(fā)現(xiàn)很不好用，還不如寫<li><img src=""/><p>文字</></li>，不好用的原因是，沒(méi)辦法將圖片和文字放在同一行顯示，我認(rèn)為這是<dl>本身所帶的性質(zhì)決定的，這種列表不只是把信息列出來(lái)，更加傾向于以注釋的形式顯示。因此dt和dd沒(méi)辦法顯示在同一行?！?/p>
2、怎么使列表項(xiàng)顯示在同一行
<ul class="list">
? ? ? <li></li>
? ? ? ?···
? ? ? <li></li>
</ul>
.list{
? ? ?定義寬度?
}
.list li{
? ? ?display:block;
? ? ?float:left;
}
3、副標(biāo)題
4、
文件夾內(nèi)圖片保存名不規(guī)范寫成了5 .png,后改正為5.png就行了。
5、絕對(duì)路徑：寫下完整路徑（不推薦） 相對(duì)路徑：從當(dāng)前文件開始找 ../找到他的上一層文件，如下
../../則是向上兩層尋找
6、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（Adaptive Web Design）指能使網(wǎng)頁(yè)自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁(yè)設(shè)計(jì)方式及技術(shù)。（不要濫用絕對(duì)相對(duì)定位會(huì)造成網(wǎng)頁(yè)尺寸變形）
實(shí)現(xiàn)自適應(yīng)
首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽
<meta name="viewport" content="width=device-width,initial-scale=1"/>
意思為：viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度。網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。
兼容（IE6，IE7，IE8）
第二，不使用絕對(duì)寬度
網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度布局，也不能使用具有絕對(duì)寬度的元素。
具體如下：
或者
第三 相對(duì)大小的字體
字體也不能使用絕對(duì)大?。╬x）,只能使用相對(duì)大?。╡m）,如下
意思為：字體大小是頁(yè)面默認(rèn)大小的100%，即為16px
h1的大小是默認(rèn)的1.5倍，（16*1.5）
第四 流動(dòng)布局
流動(dòng)布局的意思是各個(gè)區(qū)塊的位置是浮動(dòng)的，不能是固定的
float的優(yōu)點(diǎn)，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow(溢出)，避免使用滾動(dòng)條
絕對(duì)定位需要非常小心的使用
第五 選擇加載CSS
自適應(yīng)網(wǎng)頁(yè)的核心是css3引入的media Query模塊。意思為自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的css文件。
代碼意思為：如果屏幕的寬度小于400px（max-device-width: 400px），就加載tinyScreen.css文件
代碼意思為：如果屏幕大于400px小于600px時(shí)加載smallScreen.css文件
第六 @media規(guī)則
在同一個(gè)CSS文件中，可以根據(jù)不同的屏幕分辨率吧。選擇不同的CSS規(guī)則
代碼意思為：如果屏幕寬度小于400像素，則column塊取消浮動(dòng)，寬度自動(dòng)調(diào)節(jié)，sidebar塊不顯示
第七 圖片的自適應(yīng)
實(shí)現(xiàn)圖片的自動(dòng)縮放功能，如下：
max-width 定義元素的最大寬度。
該屬性值會(huì)對(duì)元素的寬度設(shè)置一個(gè)最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負(fù)值。
windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。
兩種情況：
1、不管怎么樣只顯示固定數(shù)目的圖。
2、隨著屏幕的增大顯示更多，或者隨著屏幕的減小顯示更少。
7、關(guān)于float的理解，float可以使兩個(gè)div并排，也就是消除了這兩個(gè)div的行。給容器添加圖片，如果容器內(nèi)部沒(méi)有撐開容器的元素的話，圖片是不會(huì)顯示出來(lái)的。因此我在一個(gè)圖片上使兩個(gè)div用float成為行顯示，圖片消失也是理所當(dāng)然的。但是這很難接受為什么float又支持文字環(huán)繞呢？難道說(shuō)文字不是撐開容器的元素么？
解釋的通。文字環(huán)繞和背景圖片環(huán)繞其實(shí)是一樣的。但我把圖片和文字（h-left-img）(h-left-p)用float弄成一行的時(shí)候，背景圖片消失不是錯(cuò)誤了。實(shí)際上圖片正如文字一樣環(huán)繞著這兩個(gè)元素，圖片之所以不見了，只是由于清楚行之后沒(méi)有樂(lè)撐開容器的元素。一旦添加了元素，背景圖片又再次出現(xiàn)叻。
8、圖片的放置
9、自適應(yīng)和響應(yīng)式的區(qū)別
?我們平時(shí)談?wù)摰淖赃m應(yīng)布局，大多指的就是寬度自適應(yīng)布局。在這種布局下，出現(xiàn)了兩派：百分 ? ? ? ?比寬度布局；流式布局。這里說(shuō)的是第一派，寬度使用百分比，文字使用 em，現(xiàn)在也很多開始使 ? ? ?用rem了，也就是所謂的高清方案。
自適應(yīng)是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小 的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整網(wǎng)頁(yè)內(nèi)容大小，但是無(wú)論怎樣，他們主體的內(nèi)容和布局是沒(méi)有變的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng)，而且涵蓋的內(nèi)容更多。自適應(yīng)還是暴露出一個(gè)問(wèn)題，如果屏幕太小，即使網(wǎng)頁(yè)能夠根據(jù)屏幕大小進(jìn)行適配，但是會(huì)感覺(jué)在小屏幕上查看，內(nèi)容過(guò)于擁擠，響應(yīng)式正是為了解決這個(gè)問(wèn)題而衍生出來(lái)的概念。它可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)，布局和展示的內(nèi)容可能會(huì)有所變動(dòng)。
10、版本2 photo3的目標(biāo)是，圖片位置固定，一行顯示5張，圖片大小隨屏幕大小改變而改變。
以下是背景。
