html中寫一個天貓商城的購物模組介面
阿新 • • 發佈：2019-02-18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 1000px;
height: 600px;
/*border: 1px solid red;*/
margin:0px auto;
}
div{
/*border:1px solid green;*/
font-size: 12px;
}
img{
display: block;
}
.detail{
font-size:0px;
background: url(./img/con.png) no-repeat 190px center;
border:1px solid #E6E6E6;
}
.details{
display: inline-block;
padding-right: 13px;
border-right: 1px solid #E6E6E6;
text-align: center;
text-indent: 1.2em;
}
.show{
width: 220px;
display: inline-block;
margin-left: 20px;
}
.content{
font-size: 0px;
margin-bottom: 10px;
}
.price{
font-size: 16px;
color: red;
font-weight: bold;
}
.store{
color: #7F7F7F;
text-decoration: underline;
margin-bottom: 5px;
}
mark{
background-color:transparent;
color:#E5C45A;
}
span{
color: #8236E5;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="show">
<div class="imgbg">
<img src="./img/j1.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j2.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交2102筆</div>
<div class="details">評價2192</div>
<div class="details">
</div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j3.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j4.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
</div>
<div class="content">
<div class="show">
<div class="imgbg">
<img src="./img/j5.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j6.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交2102筆</div>
<div class="details">評價2192</div>
<div class="details">
</div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j7.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j8.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
</div>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 1000px;
height: 600px;
/*border: 1px solid red;*/
margin:0px auto;
}
div{
/*border:1px solid green;*/
font-size: 12px;
}
img{
display: block;
}
.detail{
font-size:0px;
background: url(./img/con.png) no-repeat 190px center;
border:1px solid #E6E6E6;
}
.details{
display: inline-block;
padding-right: 13px;
border-right: 1px solid #E6E6E6;
text-align: center;
text-indent: 1.2em;
}
.show{
width: 220px;
display: inline-block;
margin-left: 20px;
}
.content{
font-size: 0px;
margin-bottom: 10px;
}
.price{
font-size: 16px;
color: red;
font-weight: bold;
}
.store{
color: #7F7F7F;
text-decoration: underline;
margin-bottom: 5px;
}
mark{
background-color:transparent;
color:#E5C45A;
}
span{
color: #8236E5;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="show">
<div class="imgbg">
<img src="./img/j1.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j2.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交2102筆</div>
<div class="details">評價2192</div>
<div class="details">
</div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j3.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j4.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
</div>
<div class="content">
<div class="show">
<div class="imgbg">
<img src="./img/j5.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j6.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交2102筆</div>
<div class="details">評價2192</div>
<div class="details">
</div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j7.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
<div class="show">
<div class="imgbg">
<img src="./img/j8.jpg">
</div>
<div class="price">
¥239.00
</div>
<div class="introduce">
我是一行介紹字型
</div>
<div class="store">
貪玩藍月
</div>
<div class="detail">
<div class="details">月成交<mark>2102筆</mark></div>
<div class="details">評價<span>2192</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
