前端学习笔记-02列表以及图片_前端列表显示图片-优快云博客

本文链接：https://blog.youkuaiyun.com/KathyLJQ/article/details/113839101

这个博客包含多个HTML和CSS的基础示例，如标题、图像、无序和有序列表的样式，以及背景图片的设置。它展示了如何使用HTML创建结构，以及如何用CSS进行样式化，包括列表类型、图片提示和背景定位。此外，还涵盖了不同类型的列表（无序和有序）及其样式选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Baidu</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<h1>Test 01 <img src="img/icon.png" ></h1>
		<hr >
		<h1>Test 02 <img src="img/icon.png" ></h1>
		<hr >
		<ul>
			<li>Listening 
				<br>
					<a href="https://www.hjenglish.com/new/p611902/">英语听力训练</a>
			</li>
			<li>Writing
				<br>
					<a href="https://www.hjenglish.com/new/p611902/">英语写作训练</a>
			</li>
			<li>Reading
				<br>
					<a href="https://www.hjenglish.com/new/p611902/">英语阅读训练</a>
			</li>
		</ul>
		
		<ol>
			<li>Listening 
				<br>
					<a href="https://www.hjenglish.com/new/p611902/">英语听力训练</a>
			</li>
			<li>Writing
				<br>
					<a href="https://www.hjenglish.com/new/p611902/">英语写作训练</a>
			</li>
			<li>Reading
				<br>
					<a href="https://www.hjenglish.com/new/p611902/">英语阅读训练</a>
			</li>
		</ol>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<img src="img/1.png"  width="20%">
		<img src="img/2.png"  width="20%">
		<img src="img/3.png"  width="150px">
		<img src="img/4.png"  width="150px">
		<img src="img/1.png"  width="150px">
		<img src="img/1.png"  width="100px">
	</body>
</html>

在这里插入图片描述 1. 图片的提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>hello</center>
		<img src="../img/4.png" title="图片加载出来的提示" alt="图片加载不出来的提示">
	</body>
</html>

无序列表的三种样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ul>
		<ul type="disc">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ul>
		<ul type="square">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ul>
	</body>
</html>

在这里插入图片描述
3. 有序列表的三种样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol type="1">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ol>
		<ol type="a">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ol>
		<ol type="A">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ol>
		<ol type="i">
			<li>how are you?</li>
			<li>I'm fine. You?</li>
			<li>I'm fine too.</li>			
		</ol>
	</body>
</html>

在这里插入图片描述
4. 设置背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;margin: 0;
			}
			body{
				background-image: url(../img/bangchen.gif);
				background-repeat: no-repeat;<!--设置图片背景不重复平铺，默认情况下是重复平铺的-->
				background-position: right bottom;<!--将图片位置调整到右下角-->
			}
		</style>
	</head>
	<body>
	</body>
</html>