H5行動端各種各樣的清單的製作方法(六)
如果你是先看到的這篇文章,建議您先去上面的連結,把對應的內容給看一下,這樣上下文連貫,更容易理解本文的內容.
#在前面兩章中,講的都是兩列佈局的圖文列表.而事實上,兩列佈局的圖文列表還是比較簡單的.這一章,我們將要更進一步來挑戰難度.實現一個相對來說,非常複雜的佈局方式.
並且,為兼容安卓4.4以下,以及部分傻逼國產移動端瀏覽器.我們將在實踐中,放棄calc\vh\vw等css3最新屬性.只使用比較簡單的參數,來實現這個佈局.
複雜圖文混排列表
這部分是比較複雜的,但是,特別特別的常見.我們先來看一下最終效果圖.
#如上圖所示,這應該算是一個比較複雜的圖文列表了.不知道你看到這個佈局,你會構建怎麼樣的DOM框架.
#我是這樣考慮的.為了後端能夠方便的輸出,這六個產品,必須格式統一.因此,我的HTML程式碼如下:
html程式碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 4</title><link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_4">
<ul>
<li>
<a href="goods/goods.html">
<!-- 只有第一个有这个热售,其他的木有!~ -->
<i class="goods_words">热售</i>
<h3 class="goods_title">苹果iPhone6s</h3>
<p class="goods_info">A1700</p>
<em class="goods_price">￥4679.00</em>
<img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
</a>
</li>
<li>
<a href="goods/goods.html">
<h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
<p class="goods_info">A1700</p>
<em class="goods_price">￥4679.00</em>
<img src="../image/goods.jpg" alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" class="goods_photo">
</a>
</li>
<li>
<a href="goods/goods.html">
<h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
<p class="goods_info">A1700</p>
<em class="goods_price">￥4679.00</em>
<img src="../image/goods.jpg" alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" class="goods_photo">
</a>
</li>
<li>
<a href="goods/goods.html">
<h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
<p class="goods_info">A1700</p>
<em class="goods_price">￥4679.00</em>
<img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
</a>
</li>
<li>
<a href="goods/goods.html">
<h3 class="goods_title">苹果iPhone6s</h3>
<p class="goods_info">A1700</p>
<em class="goods_price">￥4679.00</em>
<img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
</a>
</li>
<li>
<a href="goods/goods.html">
<h3 class="goods_title">苹果iPhone6s</h3>
<p class="goods_info">A1700</p>
<em class="goods_price">￥4679.00</em>
<img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
</a>
</li>
</ul></p></body></html>登入後複製
可以看到,在這個HTML結構中,我並沒有給li加上不同的class.而事實上,在後端輸出的時候,是可以輸出不同的class的.但這回使事情複雜.因此,在這裡,我們就只輸出純的程式碼.順便,溫習一下我之前的博文《css3的nth-child選擇器的詳細探討》.
SASS代碼
.list_4 {
margin-top: 0.8rem;background:#fff;border-top: 1px solid #ddd;
ul {@extend .cf;}
li {
background:#fff;outline: 1px solid #ddd;
&:nth-child(-n+3) {
width: 50%;height: 0;position: relative;
a {display: block;position: absolute;left: 0;top: 0;height: 0;width: 100%;}
.goods_photo {display: block;position: absolute;right:0.5rem;}
.goods_title,.goods_info,.goods_price {z-index: 2;width: 60%;}
}
&:nth-child(1) {
float: left;padding-bottom: 55%;
a {padding-bottom: 110%;}
.goods_photo {width: 50%;bottom: 5%;}
.goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.6rem;}
.goods_words {margin-top: 1.6rem;}
}
&:nth-child(n+2):nth-child(-n+3) {
float: right;padding-bottom: 27.5%;
a {padding-bottom: 55%;}
.goods_photo {height: 70%;top: 15%;}
.goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.2rem;}
.goods_title {margin-top: 1.6rem;}
}
&:nth-child(n+4) {
width: 33.3%;float: left;
a {display: block;padding: 1rem;}
.goods_photo {width: 70%;max-width: 15rem;margin: 0.5rem auto 0;display: block;}
}
}
}
// 全站范围内用到的图文基本样式
.goods_words {
display:inline-block;
padding:0.3rem 0.5rem;border-radius: 0.3rem;background:#f60;color:#fff;font-size: 1.2rem;margin-bottom: 0.5rem;
}
.goods_title,.goods_price,.goods_info {
display: block;position: relative;
@include ts(); // 引用文字描白边代码片
@include online(1.8rem); // 引用文字超出一行省略号代码片
}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_info {color:#999;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}登入後複製
在我之前的一篇博文《純CSS實現行動端常見佈局－高度和寬度掛鉤的秘密》裡面,我就是講解的這個佈局的實現方法.在那篇文章的發布之後,有人問我,你這樣佈局,裡面的內容怎麼排布呢?我說用定位佈局,他還是沒聽明白.不知道看到我這篇文章之後,明白了沒有.
具體程式碼是什麼意思,我這裡就不詳細解釋了.自己看了分析吧.重點是nth-child的使用,可以參考我上面的博文,理解我每一個選擇器是什麼意思.以及,定位佈局等.
小結
這一章的重點有
CSS如何實現元素的高度和寬度掛鉤.
定位佈局,相當的重要
nth-child 實在是一個非常強大的CSS選擇器,在具體專案中,怎麼使用它.
強調:
(1.)安卓4.4以下和部分國產行動端瀏覽器不支援clac\ vw \ vh 等最新的CSS屬性.因此,文中的方法是使用傳統CSS中的技巧解決.
(2.)本系列文章我準備循序漸經的講解移動端的一些我的經驗見解.某些人看了第一章就驚呼,這也太簡單了.我想反問一句,幾乎任何編程書籍都是從hello world開始的.是不是也都是很簡單呢?
以上是H5行動端各種各樣的列表的製作方法(六)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
