Analysis of basic usage of ul and li
|
Navigation, small amount of data table, centered <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ul and li application</title> <style type="text/css"> #menu{width:1000px;height:35px;float:right;margin:0px; clear:both; vertical-align: bottom;} #ul li{list-style-type:none; clear:both;width:100px;display:inline; font-size: larger;} #myul li{float:left;width:100px;} </style> </head> <body> <div id="menu"> <ul id="ul"> <li><a title="" href="http://localhost:1435/BookShop/index.aspx">Home</a></li> <li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">Industry Books</a></li> <li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">Clothing Trends</a></li> <li><a title="" href="http://localhost:1435/BookShop/">Beauty Shop</a></li> <li><a title="" href="http://localhost:1435/BookShop/">Mommy Baby</a></li> <li><a title="" href="http://localhost:1435/BookShop/">Gift Books</a></li> <li><a title="" href="http://localhost:1435/BookShop/">News Information</a></li> <li><a title="" href="http://localhost:1435/BookShop/">User Comments</a></li> <li><a title="" href="http://localhost:1435/BookShop/">Contact Us</a></li> </ul> </div> By default, <div> is vertical and has dots <ul> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </div> <div> <ul> <li style="list-style-type:none;">Remove the dots</li> <li style="display:inline;">hello</li> <li>hello</li> <li style="display:inline;">hello</li> </ul> </div> <!--For horizontal method, if you want to center it, you need to set the width, and this width must be the same as the total length of the li inside. --> <div style="text-align:center;background:#def"> <ul style="width:150px;background:#eee;"> <li style="float:left;">hello</li> <li style="float:left;">hello</li> <li style="float:left;">hello</li> <li style="float:left;">hello</li> <li style="float:left;">hello</li> </ul> </div> <!--The principle of making a table, ul width is 300px, li width is 100px, then there are three columns--> <div style="text-align:center;background:#eef"> <ul id="myul" style="width:300px;background:#eee"> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </div> </body> </html> |
<<: Database index knowledge points summary
>>: Some properties in CSS are preceded by "*" or "_".
Recommend
How to use TypeScript in Vue
introduction In recent years, the call for TypeSc...
Detailed explanation and practical exercises of Mysql tuning Explain tool (recommended)
MySQL tuning Explain tool detailed explanation an...
HTML sample code for implementing tab switching
Tab switching is also a common technology in proj...
Three BOM objects in JavaScript
Table of contents 1. Location Object 1. URL 2. Pr...
Implementing Markdown rendering in Vue single-page application
When rendering Markdown before, I used the previe...
Example of implementing dynamic verification code on a page using JavaScript
introduction: Nowadays, many dynamic verification...
Several ways to update batches in MySQL
Typically, we use the following SQL statement to ...
Image hover toggle button implemented with CSS3
Result:Implementation Code html <ul class=&quo...
LinkedIn revamps to simplify website browsing
Business social networking site LinkedIn recently...
Analysis of the use of Linux vulnerability scanning tool lynis
Preface: Lynis is a security audit and hardening ...
MySQL database must know sql statements (enhanced version)
This is an enhanced version. The questions and SQ...
MySQL Interview Questions: How to Set Up Hash Indexes
In addition to B-Tree indexes, MySQL also provide...
Nginx anti-crawler strategy to prevent UA from crawling websites
Added anti-crawler policy file: vim /usr/www/serv...
Detailed explanation of Docker container network port configuration process
Exposing network ports In fact, there are two par...
Nginx rtmp module compilation arm version problem
Table of contents 1. Preparation: 2. Source code ...