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 중국어 웹사이트의 기타 관련 기사를 참조하세요!