自己写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 0;
padding: 0;
}
p{
margin: 0;
margin-top: 7px;
}
#app{
margin: 0 auto;
width: 184px;
height: 364px;
border: solid 1px #ccc;
padding: 18px;
}
#title{
padding: 0;
/* width: 184px; */
height: 40px;
/* background-color: red; */
}
#watch{
/* width: 184px; */
height: 180px;
/* background-color: yellow; */
}
#goods{
/* width: 184px; */
height: 105px;
/* background-color: red; */
}
#tabs{
/* width: 184px; */
height: 39px;
/* background-color: yellow; */
}
span{
font-size:24px
}
#watch_img{
width: 184px;
height: 111px;
}
#img1{
width: 184px;
height: 111px;
}
#watch_p{
border-top: 1px solid #fff3ff;
text-align: center;
width: 184px;
height: 69px;
background-color: #fff3ff;
}
#p1{
font-weight: bold;
}
#img2{
width: 87px;
height: 75px;
}
#img3{
width: 87px;
height: 75px;
}
#goods_img2{
width: 87px;
height: 75px;
float: left;
margin: 5px;
margin-left: 0;
margin-top: 0;
}
#goods_img3{
width: 87px;
height: 75px;
float: left;
margin: 5px;
margin-right: 0;
margin-top: 0;
}
#goods div p{
font-size: 14px;
padding: 0;
margin: 0;
}
#goods div{
text-align: center;
}
#tabs a{
float: left;
font-size: 13px;
margin: 0;
margin-right: 4px;
text-decoration-line: none;
color: black;
}
a :hover{
color: orange;
}
#tabs p{
float: left;
font-size: 13px;
margin: 0;
margin-right: 4px;
}
.gray{
color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div id="title">
<span>众筹</span>
</div>
<div id="watch">
<div id="watch_img"><img id="img1" src="img/m1.png" alt="图片没有找到"></div>
<div id="watch_p">
<p id="p1">苹果I-WATCH呼吸表带</p>
<p>一场手腕的呼吸革命</p>
</div>
</div>
<div id="goods">
<div id="goods_img2">
<div><img id="img2" src="img/m2.png" alt="图片没有找到"></div>
<p>大圣原版手偶</p>
</div>
<div id="goods_img3">
<div> <img id="img3" src="img/m3.png" alt="图片没有找到"></div>
<p>智能运动鞋</p>
</div>
</div>
<div id="tabs">
<a href="">智能手表</a>
<p class="gray">|</p>
<a href="">创意新品</a>
<p class="gray">|</p>
<a href="">时尚家居</a>
<p class="gray">|</p>
<a href="">动漫周边</a>
<p class="gray">|</p>
<a href="">指纹手机</a>
</div>
</div>
</body>
</html>
