上周六尝试写我的第二个响应式页面当作练习，去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; } 前端小菜的第一篇记录，虽然只是解决了一个很小的问题，实现了一个很简单的效果，但还是学到了新的知识，尝到了亲自动手、解决问题的快乐。希望能够得到大神们的批评指教。