DATE: 2018-12-30
result:
File 01: test02.html
<!DOCTYPE html>
<html>
<head lang="en">
<title> 网络小说 </title>
<meta charset="utf-8">
<link rel="stylesheet" href="./test02.css"/>
</head>
<body>
<div>
<ul class="NameList">
<li>
<span class="NameIcon">恩</span>
<span class="name">布莱恩</span>
<span class="address">大魔王</span>
</li>
<li>
<span class="NameIcon girl">东</span>
<span class="name">张卫东</span>
<span class="address">修真老师生活录</span>
</li>
<li>
<p>枫</p>
<span class="name">古枫</span>
<span class="address">天生神医</span>
</li>
<li>
<img src="./walle.jpg"/>
<span class="name">陈潇</span>
<span class="address">重生贵公子</span>
</li>
<li>
<img src="./dian.jpg"/>
<span class="name">阿克蒙德 李察</span>
<span class="address">罪恶之城</span>
</li>
</ul>
</div>
</body>
</html>File 02: test02.css
/* CSS区分大小写 */
/* 通用样式 */
*{
margin:0;
padding:0;
}
.NameList{
margin:6px 0 0 6px; /* 上右下左 */
background-color:#f3f3f3;
}
.NameList li{
list-style:none; /* 去除列表项前的标号 */
width:300px;
height:50px;
line-height:50px;
background-color:white;
/* border:1px solid #ededf5; */ /* 线宽 样式 颜色 */
margin-top:1px;
padding:5px 0; /* 上下、左右 */
}
.NameList span.NameIcon{
width:50px;
height:50px;
line-height:50px;
background: blue;
color:white;
font-size:35px;
text-align:center; /* 文字居中 */
float:left;
}
.NameList span.girl
{
background:#ff07fa;
}
.NameList img{
width:50px;
height:50px;
float:left;
}
.NameList p{
width:50px;
height:50px;
line-height:50px;
background: blue;
color:white;
font-size:35px;
text-align:center;
float:left;
}
.NameList span.name{
float:left;
width:110px;
height:100%;
margin-left:5px;
font-size: 20px;
overflow:hidden; /* 溢出时隐藏溢出部分 */
}
.NameList span.address{
float:left;
font-size:10px;
}