Web page layout exercise 2.10

Text layout & application of list tags

Homework: Zootopia character introduction code

1. html code

<div class="cneter">
		<h2>疯狂动物城角色介绍</h2>
		<h2>About Zootcpin Character</h2>
		<div class="hr"></div>
		<div class="backgrond">
			<dl>
				<dt>
					<img src="img/tuzi.jpg" alt="朱迪·霍普斯（棉尾兔)">
				</dt>
				<dd class="title">朱迪·霍普斯（棉尾兔)</dd>
				<div class="hr_text"></div>
				<br>
				<dd class="intro">
					乐观外向甚至有点急性子的活泼主义者。通过自己的奋斗成为现代动物都市的第一个兔子警官。警察局的同僚总是瞧不起她，为了证明自己，
					她从野牛警察局长手中抢到了一个失踪案，凭借过人胆识发现了案件背后的阴谋，然后迫使狐狸尼克与自己踏上了冒险旅程。
				</dd>
			</dl>
		</div>
		<div class="backgrond">
			<dl>
				<dt>
					<img src="img/fox.jpg" alt="尼克·王尔德（赤狐）">
				</dt>
				<dd class=" title">尼克·王尔德（赤狐）</dd>
				<div class="hr_text"></div>
				<br>
				<dd class="intro">

					一只在动物城里以坑蒙拐骗为生的狐狸，儿时受到歧视与偏见伤害，放弃了自己的理想。被朱迪设下圈套，被迫与她合作
				</dd>
			</dl>
		</div>
		<div class="backgrond">
			<dl>
				<dt>
					<img src="img/cow.jpg" alt="朱迪·霍普斯（棉尾兔)">
				</dt>
				<dd class="title">牛局长（非洲水牛）</dd>
				<div class="hr_text"></div>
				<br>
				<dd class="intro">
					动物城警察局第一分局局长，脾气暴躁难惹的非洲水牛，很关心这所警局。博戈勉为其难地让朱迪加入警察队伍，似乎一直在阻扰朱迪的警官梦。
				</dd>
			</dl>
		</div>
		<div class="backgrond">
			<dl>
				<dt>
					<img src="img/sheet.jpg" alt="朱迪·霍普斯（棉尾兔)">
				</dt>
				<dd class="title">副市长（绵羊）</dd>
				<div class="hr_text"></div>
				<br>
				<dd class="intro">
					市长助理，一只声音很小但是毛很多的甜美绵羊。时时刻刻都对狮市长言听计从，非常配合狮市长的一切工作。
				</dd>
			</dl>
		</div>
	</div>

2. css code

/* 层叠样式 */
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cneter {
	margin: 20px 20px;
}

.hr {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	width: 320px;
	height: 10px;
	background-color: black;
	margin-bottom: 25px;
}

.backgrond {
	margin-bottom: 15px;
	margin-left: 15px;
	padding: 20px;
	background-color: #5b5652;
	float: left;
	height: 155px;
	width: 680px;
	line-height: 25px;
	color: aliceblue;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.backgrond dl>dt {
	float: left;
	padding-right: 20px;
}

.title {
	font-size: 28px;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.hr_text {
	margin-top: 10px;
	float: left;
	width: 320px;
	height: 8px;
	background-color: rgb(255, 255, 255);
}

3. Case renderings

Material package and code files
https://download.csdn.net/download/SDXYGZH/86510917