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 부분에 대한 설명은 주로 테이블의 특수한 속성을 사용하여 이 모양을 구현하려는 생각입니다.

요약