Web Front-end
H5 Tutorial
Detailed explanation of the sample code for making an unlimited number of banner buttons on the H5 mobile terminal
Detailed explanation of the sample code for making an unlimited number of banner buttons on the H5 mobile terminal
H5 mobile terminal makes an unlimited number of banner buttons
Preface
Some banner buttons are often needed on mobile h5 pages Of course, it is very simple to make a banner button. However, product managers and designers will always give you some trouble. For example, it is obviously a button with the same format, but here is a banner button. Below, the banner requires two buttons. When entering the inner page, three buttons are squeezed into one banner.
If there is no reasonable solution, then it will undoubtedly be very disgusting. Because , we must write multiple styles. And we always want to write less code, so do we have any good solutions to achieve it?
In fact, there is. Below, in this blog post, let Let’s realize this challenge.
The desired effect.
Maybe after reading the above text, you don’t understand what I want to express. Next, let’s take a look at a rendering, and you will Understand what I'm talking about.
As shown in the picture above, the first one is a column button, the second row is two buttons, and the third row is three button.
I hope that all these needs can be met through a kind of CSS, and the html structure is extremely simple. How to achieve it? Look at the following code:
html structure
<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8">
<title>移动端H5做一个Detailed explanation of the sample code for making an unlimited number of banner buttons on the H5 mobile terminal</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>As shown in the above code.
The
bris to separate the distance between each button, mainlyp.button_boxThe content inside. The structure of
html should be said to be quite simple. First of all, the outer layer is the box of p.button_box, and inside, if you need any buttons, just write A non-self-closing sum element of a .button is sufficient.
Non-self-closing sum elements refer to other elements except self-closing elements such as
br\hr\input.
In the third line, we demonstrate how to write ordinary boxes, links, and buttons.
Since buttons are self-closing elements, we use a labelThe element is wrapped to make it available.
SASS part
First reference reset.scss and mixin.scss, see mobile H5 series blog post basics reset.scss and mixin.scss
Secondly, the CSS part is written using SASS syntax. If you don’t know how to do it, please refer to the summary of SASS learning experience of CSS pre-compilation technology. I won’t elaborate too much.
.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 I have put part of the explanation in the comments. The main idea is to use the special properties of the table to achieve this seemingly laborious requirement.
Summary
The table is so magical element. Because we used table layout back then, the code was as smelly and long as an old lady's footcloth. Therefore, we started the p+css craze. However, due to overcorrection, we ignored many awesome features of tables. .
Actually, forms are very powerful. Through this case, we used forms to successfully solve this seemingly difficult requirement. And the completion was very ideal and great.
html Elements are far from block-level elements and inline elements. There are many attributes that we need to try and understand. It looks simple, are you sure it is simple?
The above is the detailed content of Detailed explanation of the sample code for making an unlimited number of banner buttons on the H5 mobile terminal. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1677
14
1430
52
1333
25
1278
29
1257
24
How to use mobile gesture operations in Vue projects
Oct 08, 2023 pm 07:33 PM
How to use mobile gesture operations in Vue projects With the popularity of mobile devices, more and more applications need to provide a more friendly interactive experience on the mobile terminal. Gesture operation is one of the common interaction methods on mobile devices, which allows users to complete various operations by touching the screen, such as sliding, zooming, etc. In the Vue project, we can implement mobile gesture operations through third-party libraries. The following will introduce how to use gesture operations in the Vue project and provide specific code examples. First, we need to introduce a special
Solve the problem of multi-touch points on Vue mobile terminal
Jun 30, 2023 pm 01:06 PM
In mobile development, we often encounter the problem of multi-finger touch. When users use multiple fingers to swipe or zoom the screen on a mobile device, how to accurately recognize and respond to these gestures is an important development challenge. In Vue development, we can take some measures to solve the problem of multi-finger touch on the mobile terminal. 1. Use the vue-touch plug-in vue-touch is a gesture plug-in for Vue, which can easily handle multi-finger touch events on the mobile side. We can install vue-to via npm
What does h5 mean?
Aug 02, 2023 pm 01:52 PM
H5 refers to HTML5, the latest version of HTML. H5 is a powerful markup language that provides developers with more choices and creative space. Its emergence promotes the development of Web technology, making the interaction and effect of web pages more Excellent, as H5 technology gradually matures and becomes popular, I believe it will play an increasingly important role in the Internet world.
How to distinguish between H5, WEB front-end, big front-end, and WEB full stack?
Aug 03, 2022 pm 04:00 PM
This article will help you quickly distinguish between H5, WEB front-end, large front-end, and WEB full stack. I hope it will be helpful to friends in need!
A complete guide to implementing mobile responsive layout in Vue (Vant)
Jun 09, 2023 pm 04:09 PM
A Complete Guide to Implementing Mobile Responsive Layout in Vue (Vant) Mobile responsive layout is a very important part of modern web development. With the popularity of mobile devices, how to quickly respond to the size and resolution of the user's mobile phone screen has become a One of the challenges front-end engineers have to face. The Vue framework comes with responsive layout features, and there are also many third-party libraries to help us implement responsive layout. Among them, Vant component library is a Vue mobile UI library because it is very powerful, easy to use and customized, and is fully compatible with mobile devices.
How to solve the double-click amplification problem on mobile terminals in Vue development
Jun 29, 2023 am 11:06 AM
With the popularity of mobile devices, using Vue for mobile development has become a common choice. However, we often face a problem during mobile development, which is double-clicking to zoom in. This article will focus on this problem and discuss how to solve the specific method of double-click amplification on the mobile terminal in Vue development. The double-click enlargement problem on mobile devices occurs mainly because the mobile device automatically enlarges the zoom ratio of the web page when double-clicking on the touch screen. For general web development, this kind of double-click to enlarge is usually beneficial because it can
How to implement h5 to slide up on the web side to load the next page
Mar 11, 2024 am 10:26 AM
Implementation steps: 1. Monitor the scroll event of the page; 2. Determine whether the page has scrolled to the bottom; 3. Load the next page of data; 4. Update the page scroll position.
How to use position in h5
Dec 26, 2023 pm 01:39 PM
In H5, you can use the position attribute to control the positioning of elements through CSS: 1. Relative positioning, the syntax is "style="position: relative;"; 2. Absolute positioning, the syntax is "style="position: absolute;" "; 3. Fixed positioning, the syntax is "style="position: fixed;" and so on.
