H5 모바일 단말기에서 배너버튼을 무제한으로 만들기 위한 샘플코드에 대한 자세한 설명

黄舟
풀어 주다: 2017-03-10 16:49:28
원래의
1703명이 탐색했습니다.


H5 모바일 단말기는 배너 버튼을 무제한으로 만들 수 있습니다

머리말

몇몇 배너 버튼은 모바일 h5 페이지에서 자주 필요한 버튼입니다. 물론 그렇습니다. 배너 버튼을 만드는 것은 매우 간단합니다. 그러나 제품 관리자와 디자이너는 항상 문제를 일으킬 것입니다. 예를 들어 분명히 동일한 형식의 버튼이지만 아래 배너에는 두 개의 버튼이 필요합니다. 내부 페이지에 들어가면 세 개의 버튼이 하나의 배너에 압착됩니다.

합리적인 해결책이 없다면 의심할 여지 없이 매우 역겨운 일이 될 것입니다. 왜냐하면 우리는 항상 더 적은 코드를 작성하고 싶기 때문입니다. , 그렇다면 이를 달성할 수 있는 좋은 솔루션이 있나요?

실제로 아래 블로그 게시물에서 이 도전을 실현해 보겠습니다.

아마도 위의 글을 읽으신 후에는 제가 표현하고 싶은 내용을 이해하지 못하실 수도 있습니다. 다음으로 렌더링을 보시면 제가 말하는 내용을 이해하실 수 있을 것입니다.

H5 모바일 단말기에서 배너버튼을 무제한으로 만들기 위한 샘플코드에 대한 자세한 설명

위 사진처럼 첫 번째는 배너버튼, 두 번째 줄은 투버튼, 세 번째 줄은 쓰리버튼입니다.

이 모든 필요가 CSS를 통해 충족되며, 이를 달성하는 방법은 매우 간단합니다. 다음 코드를 살펴보세요.

html 구조

<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>移动端H5做一个H5 모바일 단말기에서 배너버튼을 무제한으로 만들기 위한 샘플코드에 대한 자세한 설명</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="../style/style.css">
    </head>
    <body>
    <br>
    <!-- 第一行按钮 -->
    <p class="button_box">
        <p class="button pink">确定</p>
    </p>
    <br>
    <!-- 第二行按钮 -->
    <p class="button_box">
        <p class="button pink">付款</p>
        <p class="button">取消订单</p>
    </p>
    <br>
    <!-- 第三行按钮 -->
    <p class="button_box">
        <p class="button pink">设为默认</p>
        <a class="button">修改</a>
        <label class="button">删除<input type="submit"></label>
    </p></body></html>
로그인 후 복사

위 코드와 같습니다.

은 각 버튼 사이의 간격을 분리하는 것으로 주로 br 내부의 내용입니다.p.button_box

html의 구조는 우선 상당히 간단하다고 해야 할까요. 모두 외부 레이어는

의 상자이고 내부에 버튼이 필요하면 .button non-self-closed 요소와 p.button_box

비자기 닫힘 요소를 작성하면 됩니다.

등 자체 닫는 요소를 제외한 다른 요소를 참조하세요.brhrinput

세 번째 줄에서는 일반 상자, 링크, 버튼 작성 방법을 보여줍니다.

이후. 버튼은 자동으로 닫히는 요소이므로 사용할 수 있도록

요소로 래핑합니다. label

SASS 부분

첫 번째 인용문은 Reset.scss 및 mixin.scss입니다. 모바일 H5를 참조하세요. 시리즈 블로그 게시물 기본 Reset.scss 및 mixin.scss

둘째, CSS 부분은 SASS 구문을 사용하여 작성되었습니다. 그렇지 않은 경우 CSS 사전 컴파일 요약을 참조하세요. 자세한 설명은 필요하지 않습니다.
.button_box {
    display: table;     // 将 button_box 外层盒子模拟成表格
    width: 100%;        // 表格非完整块级元素,需要设定宽度
    table-layout:fixed; // 设定表格内单元格的宽度为自动等宽,重要!
    border-collapse: collapse;  // 合并表格和单元格边框
    .button {
        display: table-cell;    // 将子元素模拟成单元格
        font-size: 1.5rem;text-align: center;
        background: #eee;color: #555;   // 设定默认按钮样式
        box-shadow: 0 0 0 1px #ddd;     // 利用阴影模拟边框(阴影不占用盒子模型)
        text-decoration: none;          // 如果元素是链接,则去掉下划线
        @include hlh(4.8rem);           // 引用高度行高隐藏溢出代码块
        &.pink {        //设定一个特殊按钮样式,可根据需要设定多个
            background: #F13E7A;
            color: #fff;
            box-shadow:0 0 0 1px #F13E7A;
        }
        input {display: none;}      // 如果是按钮,则隐藏
    }
}
로그인 후 복사

sass 부분에 대한 설명은 주로 테이블의 특수한 속성을 사용하여 이 모양을 구현하려는 생각입니다.

요약

테이블, 정말 마법 같은 요소죠. 그 당시 우리는 테이블 레이아웃을 사용했기 때문에 코드가 노부인의 발을 감싸는 것처럼 냄새나고 길어서 시작했습니다. p+css의 열풍 때문에 우리는 많은 멋진 것들을 무시했습니다. 테이블의 특징.

사실 테이블은 정말 대단합니다. 이번 사례를 통해 우리는 이 문제를 성공적으로 해결하기 위해 어려운 요구 사항인 것 같습니다. 그리고 매우 이상적으로 그리고 아주 잘 완성되었습니다. >

html 요소는 블록 수준 요소 및 인라인 요소와는 거리가 멀고, 이해해야 할 속성이 많이 있습니다. 간단해 보이지만, 정말 쉽나요?

위 내용은 H5 모바일 단말기에서 배너버튼을 무제한으로 만들기 위한 샘플코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!