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

How to implement encryption and decryption of sensitive data in MySQL database

Table of contents 1. Preparation 2. MySQL encrypt...

Solution to the lack of my.ini file in MySQL 5.7

What is my.ini? my.ini is the configuration file ...

CSS to implement sprites and font icons

Sprites: In the past, each image resource was an ...

HTML markup language - reference

Click here to return to the 123WORDPRESS.COM HTML ...

How to start multiple MySQL databases on a Linux host

Today, let’s talk about how to start four MySQL d...

MySQL series 6 users and authorization

Table of contents Tutorial Series 1. User Managem...

How to build YUM in Centos7 environment

1. Enter the configuration file of the yum source...

vue+tp5 realizes simple login function

This article example shares the specific code of ...

How to Customize Bash Command Prompt in Linux

Preface As we all know, bash (the B ourne-A gain ...

Example of implementing element table row and column dragging

The element ui table does not have a built-in dra...

Detailed explanation of how Nginx works

How Nginx works Nginx consists of a core and modu...

Nginx learning how to build a file hotlink protection service example

Preface Everyone knows that many sites now charge...

Summary of common problems and application skills in MySQL

Preface In the daily development or maintenance o...