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 class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题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.

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

小結

這一章節,我們透過簡單的一個雙列佈局的圖文列表,著重要掌握以下幾點內容

在移動端,要用到左右邊框的時候,盡量不要使用border邊框來實現.本例使用outline來模擬.
在使用outline 來模擬邊框的時候,一定要配合背景顏色的使用,來避免2px 邊框.
CSS3文字描邊的實作方法.text-shadow
css3一行文字標題超出顯示省略號的實作方法
##sass引入程式碼區塊的兩種方法,以及之間的異同(請自行考慮或參考相關教程)

#在
html5 中a 標籤是可以嵌套塊級元素的.而在xhtml或更早的html版本裡,是不推薦這樣做的.這裡不要混淆,或者感覺到不合適.與時俱進.

以上是H5行動端各種各樣的列表的製作方法詳解(四)的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：如何增強網絡上的用戶體驗Apr 19, 2025 am 12:08 AM

H5通過多媒體支持、離線存儲和性能優化提升網頁用戶體驗。 1）多媒體支持：H5的和元素簡化開發，提升用戶體驗。 2）離線存儲：WebStorage和IndexedDB允許離線使用，提升體驗。 3）性能優化：WebWorkers和元素優化性能，減少帶寬消耗。

解構H5代碼：標籤，元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成：1.標籤定義內容類型，用尖括號包圍，如。 2.元素由開始標籤、內容和結束標籤組成，如內容。 3.屬性在開始標籤中定義鍵值對，增強功能，如。這些是構建網頁結構的基本單位。

了解H5代碼：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles