집 > 기사 > 웹 프론트엔드 > H5 모바일 단말기에서 다양한 목록을 만드는 방법 (6)

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

黄舟원래의: 2017-03-10 16:44:531618검색

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

이 글을 먼저 보신 분들은 위의 링크로 먼저 가보시길 추천드리며, 문맥이 일관되고 이 기사의 내용을 더 쉽게 이해할 수 있도록 해당 내용을 살펴보세요.

처음 두 장에서 2열 레이아웃에 대해 이야기했습니다. 그러나 사실 위의 이미지와 텍스트 목록의 2열 레이아웃은 비교적 간단합니다. 이번 장에서는 비교적 복잡한 레이아웃 방법을 구현해 보겠습니다.

또한 아래의 Android 4.4 및 일부 어리석은 국내 모바일 브라우저와도 호환됩니다. 실제로는

및 기타 calcvhvw의 최신 속성을 사용하여 이 레이아웃을 구현합니다. . css3

복잡한 그래픽과 텍스트의 혼합 배열표

이 부분은 좀 더 복잡하지만, 매우 일반적인 최종 렌더링을 먼저 살펴보겠습니다. >

위 그림과 같이, 이 레이아웃을 보면 어떤 DOM 프레임워크를 구축할지 알 수 없는 비교적 복잡한 목록입니다.

저는 이렇게 생각합니다. 백엔드의 출력을 용이하게 하기 위해서는 이 6개의 제품이 통일된 형식이어야 합니다. 따라서 제가 만든 HTML 코드는 다음과 같습니다. H5 모바일 단말기에서 다양한 목록을 만드는 방법 (6)

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 클래스에 차이점을 추가하지 않았습니다. 실제로 백엔드에서 출력할 때 다른 클래스가 출력될 수 있으므로 여기서는 상황이 복잡해집니다. 그런데 순수 코드만 출력합니다. 이전 블로그 게시물인 "css3의 n번째 하위 선택기에 대한 자세한 논의"를 검토하세요.

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가 요소의 높이와 너비 후크를 구현하는 방법입니다.

배치 레이아웃이 매우 중요합니다.
특정 프로젝트에서 사용하는 방법이 매우 강력한 CSS 선택기입니다.
nth-child
강조

(1.) 안드로이드 4.4 이하 및 국내 일부 모바일 브라우저에서는

등 최신 CSS 속성을 지원하지 않습니다. 따라서 이 글에서는 전통적인 CSS 기법을 사용하여 문제를 해결하는 방법을 제시합니다. (2.) 이 시리즈에서는 모바일 단말기에 대한 나의 경험과 통찰력을 단계별로 설명할 계획입니다. 일부 사람들은 첫 번째 장을 읽은 후 감탄했습니다. 이것은 거의 질문하고 싶습니다. 어떤 프로그래밍 책이든
부터 시작됩니다. clacvw부터 시작됩니다.

위 내용은 H5 모바일 단말기에서 다양한 목록을 만드는 방법 (6)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：H5 모바일 단말기에서 다양한 목록을 만드는 방법 (5)다음 기사：H5 모바일 단말기에서 다양한 목록을 만드는 방법 (5)