H5 모바일 단말기에서 배너버튼을 무제한으로 만들기 위한 샘플코드에 대한 자세한 설명
- 黄舟원래의
- 2017-03-10 16:49:281666검색
H5 모바일 단말기는 배너 버튼을 무제한으로 만들 수 있습니다
머리말
몇몇 배너 버튼은 모바일 h5 페이지에서 자주 필요한 버튼입니다. 물론 그렇습니다. 배너 버튼을 만드는 것은 매우 간단합니다. 그러나 제품 관리자와 디자이너는 항상 문제를 일으킬 것입니다. 예를 들어 분명히 동일한 형식의 버튼이지만 아래 배너에는 두 개의 버튼이 필요합니다. 내부 페이지에 들어가면 세 개의 버튼이 하나의 배너에 압착됩니다.
합리적인 해결책이 없다면 의심할 여지 없이 매우 역겨운 일이 될 것입니다. 왜냐하면 우리는 항상 더 적은 코드를 작성하고 싶기 때문입니다. , 그렇다면 이를 달성할 수 있는 좋은 솔루션이 있나요?
실제로 아래 블로그 게시물에서 이 도전을 실현해 보겠습니다.
아마도 위의 글을 읽으신 후에는 제가 표현하고 싶은 내용을 이해하지 못하실 수도 있습니다. 다음으로 렌더링을 보시면 제가 말하는 내용을 이해하실 수 있을 것입니다.
<!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>
위 코드와 같습니다.
html의 구조는 우선 상당히 간단하다고 해야 할까요. 모두 외부 레이어는은 각 버튼 사이의 간격을 분리하는 것으로 주로
br내부의 내용입니다.p.button_box
의 상자이고 내부에 버튼이 필요하면 .button non-self-closed 요소와 p.button_box
비자기 닫힘 요소를 작성하면 됩니다.세 번째 줄에서는 일반 상자, 링크, 버튼 작성 방법을 보여줍니다. 이후. 버튼은 자동으로 닫히는 요소이므로 사용할 수 있도록등 자체 닫는 요소를 제외한 다른 요소를 참조하세요.
brhrinput
요소로 래핑합니다. label
.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!