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
Detailed explanation of several examples of insert and batch statements in MySQL
Table of contents Preface 1.insert ignore into 2....
9 great JavaScript framework scripts for drawing charts on the web
9 great JavaScript framework scripts for drawing ...
Solution to the img tag problem below IE10
Find the problem I wrote a simple demo before, bu...
How to install theano and keras on ubuntu system
Note: The system is Ubuntu 14.04LTS, a 32-bit ope...
A few things about favicon.ico (it’s best to put it in the root directory)
Open any web page: for example, http://www.baidu....
Uncommon but useful tags in Xhtml
Xhtml has many tags that are not commonly used but...
AsyncHooks asynchronous life cycle in Node8
Async Hooks is a new feature of Node8. It provide...
Summary of MySql import and export methods using mysqldump
Export database data: First open cmd and enter th...
Tutorial on installing MySQL 5.7.28 on CentOS 6.2 (mysql notes)
1. Environmental Preparation 1.MySQL installation...
mysql batch delete large amounts of data
mysql batch delete large amounts of data Assume t...
Mysql date formatting and complex date range query
Table of contents Preface Query usage scenario ca...
Solve the problem of secure_file_priv null
Add secure_file_priv = ' '； then run cmd ...
Implementation of removing overlapping time and calculating time difference in MySQL
Table of contents need: drive: Ideas: accomplish:...
HTML table markup tutorial (39): The bright border color attribute of the header BORDERCOLORLIGHT
In the table header, you can define the light bor...
How to solve the problem of clicking tomcat9.exe crashing
A reader contacted me and asked why there were pr...