H5 모바일 단말기에서 다양한 목록 만드는 방법(4)

이전 리뷰

《H5 모바일 단말기에서 다양한 목록 만드는 방법 제작 방법(1) 》
《H5 모바일 단말기에서 각종 목록 작성하기(2)》
《H5 모바일 단말기에서 다양한 목록 작성하기(3)》

이 글을 먼저 보셨다면 , 위 링크로 가셔서 해당 내용을 먼저 읽어보시면 문맥이 일관되고 이 글의 내용을 더 쉽게 이해하실 수 있을 것입니다.

처음 3장은 모두 일반적인 목록을 구현하는 방법에 대해 이야기합니다. 난이도는 쉬운 것부터 어려운 것까지 있지만 일반적으로 이 장에서는 그래픽 목록을 만들어 보겠습니다.

일반적인 2열입니다. 그림 및 텍스트 목록

2열 그림 및 텍스트 목록은 JDTB와 같은 H5 전자상거래 모바일 단말기에서 훨씬 더 일반적입니다. 아래 그림은

H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(4)

여기 그림과 텍스트 목록의 매우 간단한 2열 레이아웃이 있으며 각 블록에는 그림, 이름 및 가격이 포함되어 있습니다. 하지만 모바일 쪽이기 때문에 다양한 휴대폰의 너비가 일치하지 않습니다.

여기의 사진은 모두 동일합니다. 실제 프로젝트에는 일반적으로 제품 사진에 대한 요구 사항이 있습니다. 제품이 정사각형이 아닌 경우

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/imghw/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/imghw/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/imghw/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/imghw/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>

로그인 후 복사

코드는 비교적 길지만 한 눈에 알아볼 수 있습니다. 다양한 요소에 서로 다른 클래스를 추가했습니다. 이는 이러한 요소의 기본 스타일을 통일하고 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 구문을 모르는 경우에는 비용을 사용하는 것이 좋습니다. 30분에서 1시간 정도 SASS를 학습합니다.

여기에서는 사이트 전반에 걸쳐 몇 가지 일반적인 스타일을 추출합니다. 이렇게 하면 코드 재사용이 쉬워집니다.