练习项目一:乐视新闻
作者:
测试媛617 | 来源:发表于
2019-04-16 18:33 被阅读0次<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 192px;
/*border: 1px solid red;*/
/*水平居中*/
margin: 10px auto;
}
.wrap_content{
width: 180px;
margin: 0 auto;
/*设置字体大小为0，解决下面img元素和自已间的间隙*/
font-size: 0;
}
p{
background-color: #f2f2f2;
margin: 0;
/*单独设置字体大小*/
font-size: 14px;
height: 36px;
line-height: 36px;
color: #333333;
}
img{
width: 180px;
}
.item{
margin-top: 16px;
}
</style>
</head>
<body>
<!--class可以重复使用-->
<div class="wrap">
<div class="wrap_content">
<!--大盒子中的每一项-->
<div class="item">
<img src="image/001.png">
<p>萌虎王源..</p>
</div>
<div class="item">
<img src="image/002.png">
<p>华晨宇拜师...</p>
</div>
<div class="item">
<img src="image/003.png">
<p>范丞丞...</p>
</div>
</div>
</div>
</body>
</html>
本文标题：练习项目一:乐视新闻
本文链接：https://www.haomeiwen.com/subject/vwhiwqtx.html
网友评论