Example code for using HTML ul and li tags to display images

Example code for using HTML ul and li tags to display images
Copy the following code to the code area of ​​Dreamweaver, and the following image will be displayed during preview, realizing the image display function.

Copy code
The code is as follows:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">



Copy code
The code is as follows:

<!--The following defines the CSS style, including a div, i.e. layout, and tags such as ul, li, img, etc. -->
<span style="color:#990000;">#layout{width:700px;border:2px solid #ccc;padding:2px;overflow:auto;zoom:1;diaplay:inline;}
#layout ul{list-style:none;}
#layout li {
list-style-type: square;
no-repeat 0px 4px;
padding-left:20px;
}
body{margin:0 auto;font-size:12px;font-family:Verdana;line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{padding:0;margin:0;}
img{border:0px;}
#layout ul li a img {
padding: 1px;
border: 1px solid #elelel;
margin-bottom:3px;
display:block;
}
a{color:#05a;text-decoration:none;}
a:hover{color:#f00;}
#layout ul li {
float: left;
width: 72px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
text-align: center;
}
#layout ul li a {
display: block;
}
#layout ul li a:hover img {
padding: 0px;
border: 2px solid #FF6600;
}</span>
</style>
</head>
<body>
<div id="layout">


Copy code
The code is as follows:

<!--The following is to define the image as a li tag and set the height and width. You only need to modify the src path and image name 001.jpg where the image is placed-->
<ul>
<span style="color:#993300;"><li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li></span>
</ul>
</div>
</body>
</html>

<<:  JavaScript selector functions querySelector and querySelectorAll

>>:  MySQL 5.7 Common Data Types

Recommend

Unbind SSH key pairs from one or more Linux instances

DetachKeyPair Unbind SSH key pairs from one or mo...

JavaScript implements product details of e-commerce platform

This article shares a common example of viewing p...

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial

This article shares the installation and configur...

Native js implements a minesweeper game with custom difficulty

This article example shares the specific code of ...

How to use html css to control div or table to be fixed in a specified position

CSS CodeCopy content to clipboard .bottomTable{ b...

A simple method to regularly delete expired data records in MySQL

1. After connecting and logging in to MySQL, firs...

Example of writing mobile H5 to invoke APP (IOS, Android)

iOS 1. URL scheme This solution is basically for ...

A brief discussion on VUE uni-app custom components

1. Parent components can pass data to child compo...

Common Linux English Error Chinese Translation (Newbies Must Know)

1.command not found command not found 2. No such ...

MySQL UNION operator basic knowledge points

MySQL UNION Operator This tutorial introduces the...

Tutorial on installing MySQL with Docker and implementing remote connection

Pull the image docker pull mysql View the complet...

Detailed explanation of the transition attribute of simple CSS animation

1. Understanding of transition attributes 1. The ...

Detailed explanation of Vue plugin

Summarize This article ends here. I hope it can b...