韩顺平_php从入门到精通_视频教程_第15讲_di-css作业评讲①_学习笔记_源代码图解_PPT文档整理_韩顺平java从入门到精通视频教程(全94讲)学习笔记整理(齐全).docx-CSDN博客

本文链接：https://blog.csdn.net/wenximalong/article/details/8184749

文西马龙：http://blog.csdn.net/wenximalong/

作业1

home1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="home1.css" />
		<title>作业1</title>
	</head>
	<body>
		<div class="div1">
			<ul class="faceul">
				<li><img src="m4.jpg" /></li>
			</ul>
		</div>
	</body>
</html>

home1.css

.div1{
	width: 500px;
	height: 300px;
	border: 1px solid red;
}

.faceul li{
	list-style-type: none;
}

background: pink;

background-color: pink;
<body style="background: url('m4.jpg')">
是背景不是图片，背景多用，背景很节省带宽，虽然把图片平铺了，很多张图片在浏览器里显示，但是只向服务器发送了一次请求，
如果是这样
<img src="m4.jpg" />
<img src="m4.jpg" />
<img src="m4.jpg" />
<img src="m4.jpg" />
<img src="m4.jpg" />
有些浏览器会真的向服务器发送5次请求，很浪费带宽

经验：优先考虑使用背景图片

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<link rel="stylesheet" type="text/css" href="home1.css" />
		<title>test</title>
	</head>
	<!--平铺
	<body style="background: url('m4.jpg')"> -->
	<!--不平铺
	<body style="background: url('m4.jpg') no-repeat;"> -->
	<!--只平铺x轴
	<body style="background: url('m4.jpg') repeat-x"> -->
	</body>
</html>

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录