H5行動端各種各樣的清單的製作方法(四)

前情回顧

《H5行動端各種各樣的清單的製作方法(一)》
《H5行動端各種各樣的清單的製作方法(二)》
《H5行動端各種各樣的清單的製作方法(三)》

如果你是先看到的這篇文章,建議您先去上面的鏈接,把對應的內容給看一下,這樣上下文連貫,更容易理解本文的內容.

#前面三章,都是說一個普通的列表應該如何去實現.難度由易到難,但總的來說,一看就能掌握.這一章,我們來做圖文列表.

普通兩列圖(圖為正方形)文列表

兩列的圖文列表是非常常見的.在JD\TB等電商移動端H5更是比比皆是.這裡,我們先來做一個最簡單的.如下圖所示.

H5行動端各種各樣的列表的製作方法詳解(四)

這裡是一個非常簡單的雙列佈局的圖文列表,每一塊,包含圖片,名稱和價格.在PC端實現這樣的佈局實在是太簡單了.但是由於我們在移動端,不同的手機的寬度是不一致的.因此,要求是自適應的.

這裡的所有圖片都是統一規格,皆為正方形的.在實際的項目中,一般都會對產品的圖片有所要求.如果您的產品並非正方形的.下面我們會有相關的教程.

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 2</title>
<link rel="stylesheet" href="../style/style.css"></head><body><p class="list_2">
    <ul>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题4</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
    </ul></p></body></html>

登入後複製

程式碼比較長.但是還是一眼就能看清楚的.我們給不同的元素加上了不同的class.而這樣做的目的是為了在全站範圍內,用到這些元素的基本樣式可以得到統一,並且實現CSS的代碼復用.

SASS代碼

.list_2 {    
ul {        
@extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
        li {            
        width: 50%;float: left;padding: 1rem 0;
            outline: 1px solid #ddd;  // 使用 outline 模拟边框 (outline不占据盒子模型)
            background: #fff;  // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
            a {                display: block;
                text-decoration: none; // 去除默认下划线
            }            .goods_title,.goods_price {                
            padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
                text-align: center;
            }            .goods_photo {                
            width: 60%;margin: .5rem auto;display: block;
            }
        }
    }
}// 全站范围内用到的图文基本样式.goods_title,.goods_price {    
display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片}
    .goods_title {color:#000;font-size: 1.2rem;}
    .goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}

登入後複製

再次強調一下,本系列教程的CSS部分是採用了SASS語法,如果你不會SASS語法,建議花上半個小時到一個小時的時間來學習SASS.

這裡,我們將全站內通用的一些樣式摘取出來.這樣方便代碼復用.