上週六嘗試寫我的第二個響應式頁面當作練習，去Bootstrap中文網上看了一些案例，最後就決定仿寫“https://bigbitecreative.com/”這個頁面，寫到兩張圖片展示區域的時候卡住了。鼠標懸停在圖片上時圖片會由中心放大，但是包裹圖片的容器大小是不能跟着被撐開的，於是我開始了艱難的探索之路……
走過的彎路和錯誤的嘗試就不說了，直接上一個成功的demo，先來張圖示意一下：
我剛接觸響應式佈局不久，Bootstrap雖然瞭解過但是還沒真正開始使用，仍然是通過給百分比寬度和媒體查詢的方式爲不同分辨率的設備編寫樣式。
該demo中，box給到96%的寬度，水平居中顯示，作爲一個大塊；<ul>直接100%寬度；<li>給49%，左浮動，第二個<li>給2%的margin-left，最基本的佈局完成。
回到問題，此時所有元素都是沒有高度的。由於是響應式佈局，所以<li>的高度不能定死，這是一個困擾我的問題，解決的方法是參照“https://bigbitecreative.com/”的方法，爲<li>增加li:before樣式：
.box li:before{
display:block;
content:"";
width:100%;
padding-top:46.51%;
background:linear-gradient(90deg,rgba(0,0,0,0.5) 0,hsla(0,0%,100%,0) 60%);
}此時li:before這個僞元素和<li>都已經擁有了高度，兩個<li>各自使用
style="background-image:url(images/metro-2.jpg)"
background-position: center center;
background-repeat:no-repeat;
background-size:100%;爲了實現和原網頁中一樣的效果，接下來還有內容。實際應用中光圖片展示肯定是不夠的，此實例中圖片上就有一層漸變效果，左側還有一段文字，整個圖片區域是一個超鏈接。於是，繼續完善。
<li>中添加一個<a>元素，和前面一樣的問題，沒有寬高。這個<a>是要覆蓋住整張圖片區域以供用戶點擊，那麼自然想到用剛纔的before來解決。代碼如下：
.box a{
display:block;
width:100%;
position:absolute;
top:0; left:0;
}.box a:before{
display:block;
content:"";
width:100%;
padding-top:46.51%;
}此時需要爲<li>加上position:relative;整理一下完整的<li>樣式：
.box li{
width:49%;
float:left;
background-position: center center;
background-repeat:no-repeat;
background-size:100%;
position:relative;
transition:all 0.3s ease-in-out;
}接下來再向<a>中添加一個<p>，浮動於左下角，高度隨屏幕縮小而增高，樣式如下：
.box p{
width:50%;
position:absolute;
left:4%;
bottom:4%;
font-size:1.2em;
line-height:1.2em;
color:#fff;
}到這裏爲止，<ul>、box以及<body>似乎被忽略了，他們還沒有高度呢！這個在之前清除浮動的一篇文章中學到了經驗，給<ul>一個class="clearfix"，通過以下代碼將<ul>丟失的高度找回來。
.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix { *zoom:1; } 前端小菜的第一篇記錄，雖然只是解決了一個很小的問題，實現了一個很簡單的效果，但還是學到了新的知識，嚐到了親自動手、解決問題的快樂。希望能夠得到大神們的批評指教。