HTML unordered list bullet points using images CSS writing

Create an HTML page with an unordered list of at least five best-selling books. The bullet point before each book must be a thumbnail that summarizes the cover. This information can be obtained on the Web. Requires CSS approach for layout.

HTML:

Copy code

The code is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="book.css" rel="stylesheet" type="text/css">
</head>

<body>
<div>
<h1 class="diffentcolor">Linux Bestsellers</h1>
<div id="menu">

</div>
<div id="content">
<ul>
<li id="book1">Bird Brother's Linux Private Recipe Basics</li>
<li id="book2">Bird Brother's Linux Private Kitchen Server Edition</li>
<li id="book3">Linux command line and shell script programming encyclopedia</li>
<li id="book4">Linux Operation and Maintenance</li>
<li id="book5">Linux/Unix System Programming Manual</li>
</ul>
</div>
</div>
</body>

book.css:

Copy code

The code is as follows:

.diffentcolor{color:green;}
#differcolor{color:green}
body, td, div, .p, a {
font-family: arial,sans-serif;
}
h1,h2{
font-family:sans-serif;
color:gray;
}
.author{
by:svitter;
}
h1{
border-bottom:1px solid black;
border-bottom:1px;
solid black;
}
div#container{width:500p}
div#menu {width:150px;float:left;}
div#content {float:left;}
li#book1{
list-style-image:url(pic/popularBook.jpg);
}
li#book2{
list-style-image:url(pic/popularBook2.jpg);
}
li#book3{
list-style-image:url(pic/popularBook3.jpg);
}
li#book4{
list-style-image:url(pic/popularBook4.jpg);
}
li#book5{
list-style-image:url(pic/popularBook5.jpg);
}

<<: idea uses docker plug-in to achieve one-click automated deployment

>>: JS practical object-oriented snake game example

A brief discussion on Python's function knowledge

Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

Blog

mysql 5.7.11 winx64 initial password change

Blog

CSS to achieve the like card effect in the lower right corner of the web page (example code)

Blog

HTML unordered list bullet points using images CSS writing

A brief discussion on Python's function knowledge

Detailed explanation of how Angular handles unexpected exception errors

How to automatically number the results of MYSQL query data

MySQL 5.7.17 installation and configuration graphic tutorial

What are the new CSS :where and :is pseudo-class functions?

Summary of the three stages of visual designer growth

MySQL database import and export data error solution example explanation

Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

mysql 5.7.11 winx64 initial password change

CSS to achieve the like card effect in the lower right corner of the web page (example code)

Recommend

Differences between FLOW CHART and UI FLOW

Detailed analysis of the problem of adding where conditions using left join in MySQL

The whole process of Vue page first load optimization

Vue's simple implementation process of imitating NetEase Cloud Music Player interface

Tips for List Building for Website Maintenance Pages

Example of adding and deleting range partitions in MySQL 5.5

Solution to the problem of eight hours difference in MySQL insertion time

MySQL paging analysis principle and efficiency improvement

Summary of some HTML code writing style suggestions

React native ScrollView pull down refresh effect

Detailed explanation of how Vue returns values to dynamically generate forms and submit data

html base url tag

DIV common attributes collection

Steps to deploy ingress-nginx on k8s

Detailed tutorial on OpenStack environment deployment based on CentOS (OpenStack installation)