Beautiful list view using css
Welcome friend to view this article. If you are a web designer and work with web development related job, so this programming tutorial will help you so much, and you create a modern style web design page.
First of all, I will discuss something about this topic, you have already read the tutorial title. I just give you basic information about List view, then I will discuss, how do you represent list view style in a modern web page style in HTML page view?
What is List View In HTML:
List view display any elements using LI tag(<li>some elements </li>). The HTML list tags are used on the web articles, website navigation menus, and product features of websites.
Let me tell you a little about this HTML List Tags. The HTML list tags offer authors three ways for specifying a list of page information.
There are three types of lists you can use, and each one has a specific purpose and meaning. These are:
Unordered list — These list items use to group a set of related items, in no particular order.
Ordered list — These list items use to group a set of related items, in a specific order.
Description list — These list items use to display a list of terms and their descriptions.
e.g
- Removing and Cleaning Projector Filters.
- Resetting Filter Counter.
- Cleaning Projector Passageway, Lens and Casing.
- Checking Projector Performan.
Now I will stop to tell you about basic information of HTML List Tags. If you want to know more about HTML List Tags, click here
Friends, today’s topic I want to tell you is that how do you display an HTML List view with Beautiful ListView in HTML webpage?
You can create it in your web page using simple HTML code and some CSS code. One more you need to connect the Font Awesome CSS link on your web page. I’ve already attached the Font Awesome CDN link to my POST example, so don’t worry, if you forget to add the Font Awesome link. Let’s go to follow the example code:
Example Code:
<!DOCTYPE html> <html> <head> <title>HTML List View Using Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <style type="text/css"> .marker ul li{ list-style: none; line-height: 28px; margin-bottom: 10px; } .marker ul li::before{ position: absolute !important; left: 27px !important; display: block !important; font-family: FontAwesome; content: "\f00c"; font-size: 17px !important; color: #6fbf52 !important; } </style> <body> <div class="row"> <div class="col-md-6 marker"> <ul> <li>Removing and Cleaning Projector Filters.</li> <li>Resetting Filter Counter.</li> <li>Cleaning Projector Passageway, Lens and Casing.</li> <li>Checking Projector Performan.</li> </ul> </div> </div> </body> </html>
If you are new in HTML, you start to learn HTML so you are welcome(HTML Tutorial). You have experience in HTML code, so you can present in very quickly on your development page. if any question, don’t forget to comment. Thanks for reading.