仿淘宝页面

最新推荐文章于 2024-08-22 17:38:39 发布

红豆子不相思

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量449

点赞数 22

文章标签：前端 css

本文链接：https://blog.csdn.net/Z533121237/article/details/140390398

版权

淘宝登录页

<!DOCTYPE html>

<head>

<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>

用户名：<input type="text" placeholder="username"><br>

密码：<input type="password" placeholder="password"><br>

</form>

</a>

</div>

</body>

</html>

商品页

<!DOCTYPE html>

<head>

<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>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</div>

<span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br>

<span class="prod-introduce-span2">送运费险淘宝币抵0.6币 </span>

</div>

<div class="prod-boss">瓷碗批发商</div>

</div>

</a>

</li>

</ul>

</div>

</body>

</html>

红豆子不相思

关注

22
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝页面

纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭 </span><br><span class="prod-introduce-span1">纯白色骨瓷小碗陶瓷吃饭家用简约餐具套装防烫高脚10个米饭
复制链接

扫一扫