文本布局&列表标签的应用
课后作业:疯狂动物城角色介绍代码
1. html代码
<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代码
/* 层叠样式 */
* {
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. 案例效果图
素材包及代码文件
https://download.csdn.net/download/SDXYGZH/86510917