案例：
图片资源：
参考代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0; /*清除浏览器默认边距*/
padding: 0;
text-align:center; /*文字居中*/
}
h2{
padding:5px; /*设置标题内边距*/
font-size: 20px; /*设置文字大小*/
margin:5px; /*设置标题外边距*/
border-bottom: 2px #999 dashed; /*设置标题底部边框宽度,颜色，虚线*/
}
.nei{
padding: 0px 15px 15px 15px; /*设置图片的上右下左的边距*/
}
.wai{
margin: 50px auto;/*设置上下外边距50px，左右居中显示*/
width: 210px; /*设置<div>盒子的宽度*/
height:265px; /*设置<div>盒子的高度*/
border:solid 2px #999; /*设置盒子的边框为单实线，线宽2px，颜色灰色*/
}
.one{
color: #999;
}
</style>
</head>
<body>
<div class="wai">
<span><h2>毕业季|再见青春</h2></span>
<span class="one">36557人收听</span>
<div class="nei">
<img src="music.jpg"/>
</div>
</div>
</body>
</html>
更多推荐
HTML5网页设计基础——音乐盒的制作
发布评论