淘宝登录页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(237, 234, 229);
}
.login{
width: 500px;
height: 300px;
border: 1px solid rosybrown;
margin: auto;
margin-top: 200px;
background-color: antiquewhite;
line-height: 4;
text-align: center;
border-radius: 25%;
box-shadow: 10px 10px 10px gray;
}
.b{
margin: 10px;
}
button,input{
background-color: antiquewhite;
border: 1px solid royalblue;
border-radius: 25%;
}
input{
border-radius: 20%;
}
span{
font-size: 20px;
color:rgb(218, 106, 32);
text-shadow: 10px 10px 10px rgb(255, 115, 0);
}
</style>
</head>
<body>
<div class=""></div>
<div class="box"></div>
<div class="login">
<span class="font-sign">淘宝 </span>
<form action="">
用户名:<input type="text" placeholder="username"><br>
密码:<input type="password" placeholder="password"><br>
</form>
<a href="./案例1-仿淘宝商品页面.html"> <button type="submit" class="b">sign in </button>
</a>
</div>
</body>
</html>
商品页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿淘宝商品页面</title>
<!--
理解整个页面结构
1.div-box
2.ul-prods
3.li-prod
a-prod-href
img-prod-img
div-prod-introduce
div-prod-price
div-prod-boss
div-prod-sale
-->
<style>
.box{
width: 100%;
/* height: 1000px; */
/* border: 1px solid #F3F6F8; */
/* margin: auto; */
}
.prod{
width: 300px;
height: 500px;
border: 1px solid #F3F6F8;
/* border-right: 1px solid #F3F6F8;
border-bottom: 1px solid #F3F6F8; */
list-style: none;
display: inline-block;
line-height: 1.7;
margin-left: -5px;
}
.prod-href{
text-decoration: none;
}
.prod:hover{
border-color: red;
}
.prod-img{
text-align: center;
}
.prod-introduce-span1{
font-size: 17px;
color: black;
}
.prod-introduce-span2{
font-size: 16dpx;
color: rgba(242, 97, 13, 0.925);
}
.prod-price{
font-size: 22px;
color: red;
}
.prod-boss{
font-size: 14px;
color: rgb(122, 121, 121);
}
.prod-sale{
font-size: 14px;
color: rgb(122, 121, 121);
border-top: 1px solid #F3F6F8;
text-align: right;
padding-top: 10px;
}
.prod-text-box{
width: 280px;
height: 480px;
/* border: 1px solid blue; */
margin: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul class="prods">
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=15120299156&ali_refid=a3_430582_1006:1102746880:N:qP%2FhEy9F7MTPqvMrpx1xpg%3D%3D:16fa659828ac474eb874f595ab98ceeb&ali_trackid=1_16fa659828ac474eb874f595ab98ceeb&spm=a21n57.1.item.1#detail">
<div class="prod-text-box">
<div class="prod-img">
<img class="prod-img" width="280bpx" height="300px" src="https://img.alicdn.com/bao/uploaded/i2/71666419/O1CN01TVii9u1xHxIWVk33L_!!71666419.jpg">
</div>
<div class="prod-introduce">
<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>
<span class="prod-introduce-span2">送运费险 淘宝币抵0.6币 </span>
</div>
<div class="prod-price"><b>¥22.9</b></div>
<div class="prod-boss">瓷碗批发商</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>