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
MySQL 8.0.21 installation and configuration method graphic tutorial
Record the installation and configuration method ...
Detailed steps for developing Java payment interface for Alipay
Table of contents first step Step 2 Step 3 Step 4...
HTML5 and jQuery to implement preview code examples before uploading local pictures
HTML5 and jQuery implement the preview of local i...
Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP
Problem: The website published through IIS is pla...
Getting Started Tutorial for Beginners⑧: Easily Create an Article Site
In my last post I talked about how to make a web p...
Implementation steps of js object-oriented encapsulation cascading drop-down menu list
The cascading drop-down menu developed in this ex...
Simple tutorial on using Navicat For MySQL
recommend: Navicat for MySQL 15 Registration and ...
Vue+Bootstrap realizes a simple student management system
I used vue and bootstrap to make a relatively sim...
Analysis of the principles of docker containers
Table of contents 01 What is the essence of a con...
JavaScript realizes the queue structure process
Table of contents 1. Understanding Queues 2. Enca...
How to implement function currying and decurrying in Javascript
Function currying (black question mark face)? ? ?...
Linux kernel device driver memory management notes
/********************** * Linux memory management...
How to handle forgotten passwords in Windows Server 2008 R2
What to do if you forget Windows Server 2008R2 So...
Detailed explanation of the Svelte implementation principle for simple and easy JavaScript development
Table of contents Demo1 create_fragment SvelteCom...
How to view the database installation path in MySQL
We can view the installation path of mysql throug...