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:

<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:

<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

Implementation of check constraints in MySQL 8.0

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

Implementation of check constraints in MySQL 8.0

How to install and configure MySQL 8.0.12 decompressed version under Windows 10 with graphic tutorials

Introduction to the role of HTML doctype

How to use Vue3 mixin

Example of how to achieve semi-transparent background image and opaque content in CSS3

Implementation of tomcat image created with dockerfile based on alpine

Introduction to the use of common Dockerfile commands

Semantics, writing, and best practices of link A

Pure CSS to achieve left and right drag to change the layout size

Detailed explanation of JS memory space

Recommend

Unbind SSH key pairs from one or more Linux instances

JavaScript implements product details of e-commerce platform

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial

How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing

Native js implements a minesweeper game with custom difficulty

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

A simple method to regularly delete expired data records in MySQL

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

A brief discussion on VUE uni-app custom components

Common Linux English Error Chinese Translation (Newbies Must Know)

MySQL UNION operator basic knowledge points

Tutorial on installing MySQL with Docker and implementing remote connection

Detailed explanation of the transition attribute of simple CSS animation

Linux forced release of occupied ports and Linux firewall port opening method detailed explanation

Detailed explanation of Vue plugin