上周六嘗試寫我的第二個響應式頁面當作練習，去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%);
}
最後一項的漸變背景稍後再說，padding-top的數值在原網頁上給的是46.04317%。經過測試，該數值應為我們需要顯示的背景圖檔的高與寬的比，此例中為400/860≈46.51%，實際操作中可微調，確定容器高度不大于目前圖檔顯示的高度即可。
此時li:before這個僞元素和<li>都已經擁有了高度，兩個<li>各自使用
style="background-image:url(images/metro-2.jpg)"
将背景圖檔加入，同時為<li>添加樣式對背景圖加以控制：
background-position: center center;
background-repeat:no-repeat;
background-size:100%;
到這裡可以為<li>添加一個hover，将background-size調大一些，<li>的樣式中給上過渡屬性：transition:all 0.3s ease-in-out;最基本的效果就已經實作了。
為了實作和原網頁中一樣的效果，接下來還有内容。實際應用中光圖檔展示肯定是不夠的，此執行個體中圖檔上就有一層漸變效果，左側還有一段文字，整個圖檔區域是一個超連結。于是，繼續完善。
<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;
}
這裡我有一個疑問，<a>作為<p>的父級元素，也是絕對定位的，這個<p>的位置卻好像按需要的那樣找到了更上一層的<li>作為了參照，到底這個<p>以誰作為了參照？等會兒再琢磨琢磨。
到這裡為止，<ul>、box以及<body>似乎被忽略了，他們還沒有高度呢！這個在之前清除浮動的一篇文章中學到了經驗，給<ul>一個class="clearfix"，通過以下代碼将<ul>丢失的高度找回來。
.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix { *zoom:1; }
<ul>的高度有了，box和<body>的高度自然就有了，到此結束！
前端小菜的第一篇記錄，雖然隻是解決了一個很小的問題，實作了一個很簡單的效果，但還是學到了新的知識，嘗到了親自動手、解決問題的快樂。希望能夠得到大神們的批評指教。
![Vue.js的常見用法及基本原理 Vue.js 快速入門[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)