Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to get the mobile html5 list

2025-01-14 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to do the Mobile html5 list", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to do the Mobile html5 list" article.

The simplest list

First of all, let's make the simplest list. The effect we want to achieve is shown in the following figure:

As shown above, what we want to implement is such a simple list. This is not the slightest difficulty.

Html code list 1, this is a list 1, this is a list 2, this is a list 3, this is a list 4, this is a list 5, this is a list 6, this is a list 7, this is a list 8.

It is important to note that this code must be added to the mobile end. Otherwise, the mobile browser will be treated as a PC version of the web page, which can be retractable.

It is recommended that the server, database, back-end programs, foreground html and CSS are all unified for utf-8 coding. Avoid garbled code caused by coding.

SASS code. List_1 {ul {} li {border-bottom:1px solid # ddd;padding:0 1.6rema; a {display: block; height: 4remt; line-height: 4remma: hidden;font-size: 1.4rem } all the units here use, we have set the font size to, which is equivalent to the normal 10px. In other words, the above is equivalent to. As for why, please go to the link at the beginning of this article to see the explanation in the previous article. Will not sass, please read sass related tutorials first. Don't find it difficult. You can learn it in an hour and have a good time in two days. It's a simple list.

First of all, let's look at the effect picture:

At first glance, this list is no different from the list above. However, if we take a closer look, we will find that the lines below are not at the top.

Don't be surprised, very often, designers design in this way, they have their own design ideas. As front-end personnel, we should faithfully restore some small details of the designer. Even if you think it's a little superfluous. He he。

The html code is exactly the same as the first example. The code will not be repeated here.

SASS code. List_1 {ul {padding-left: 1.6;} li {border-bottom: 1px solid # ddd;padding-right: 1.6; a {display: block; height: 4; line-height: 4; overflow: hidden; font-size: 1.4;}

In fact, it is only a slight change of thinking. Assign the padding value on the load li in demo1 to ul and li, and that's fine.

The above is about the content of this article on "how to get the Mobile html5 list". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report