一：仿淘宝页面
鼠标停留在图片上时会出现“找同款”“找相似”项
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.goods{
width: 220px;
height: 330px;
border: 1px solid #f40;
position: relative;
}
img{
width: 220px;
}
.price{
margin-left: 5px;
margin-right: 5px;
}
.price > span{
line-height: 20px;
vertical-align: middle;
}
.price > span:first-child{
color: #f40;
font-size: 20px;
font-weight: bold;
}
.price > span:nth-child(2){
font-size: 12px;
background-color: #f40;
color: white;
padding-left:1px;
padding-right:1px;
}
.price > span:last-child{
float: right;
font-size: 12px;
color: #888;
}
#des{
margin-left: 5px;
margin-right: 5px;
}
#des>a{
color: #444;
font-size: 12px;
text-decoration: none;
}
#des>a:hover{
text-decoration: underline;
color: #f40;
}
.same{
height: 25px;
top:200px;
position:absolute;
display: none;
}
.same > div{
float: left;
width: 110px;
text-align: center;
background-color: #f40;
color: white;
}
.same > div:last-child{
border-left: 1px solid white;
width: 109px;
}
img:hover + .same{
display: block;
}
.store{
font-size: 12px;
}
.store > a{
color: grey;
text-decoration: none;
}
.store > a:last-child{
float: right;
}
.photo > img{
width: 20px;
height: 20px;
margin-left: 3px;
margin-right: 3px;
}
.photo > img:last-child{
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="goods">
<img src="img/clothes.png" alt="">
<div class="same">
<div>找同款</div>
<div>找相似</div>
</div>
<div class="price">
<span>¥95.00</span>
<span>包邮</span>
<span>1亿+人付款</span>
</div>
<div id="des">
<a href="#">NASA联名夹克男士春秋季2023新款宽松休闲翻领撞色长袖开衫外套男</ a>
</div>
<div class="store">
<a href="#">NASA服装官舰店</a>
<a href="#">广东广州</a>
</div>
<div class="photo">
<img src="img/tb.png"/ >
<img src="img/tianmao.png"/>
</div>
</div>
</div>
</body>
</html>
成品图
二：仿西瓜视频登录页
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
.login{
width: 827px;
height: 583px;
border: 1px solid #bdbdbd;
}
.login>div:nth-child(1):nth-child(1){
margin-top:31px;
margin-left:31px;
font-size: 26px;
font-weight:540;
}
.close{
float:right;
padding-right:32px;
font-size: 30px;
font-weight:500;
color:#999999;
}
.login>div:nth-child(2){
width: 827px;
height:31px;
border-bottom:1px solid #f4f4f4 ;
}
.login>div:nth-child(3){
width: 827px;
height:55px;
}
.captcha{
width: 526px;
height:306px;
}
.manner{
margin-left:76px;
font-size:20px;
font-weight:400;
}
.num1{
margin-left:38px;
margin-top:22px;
background-color:#f8f8f8;
font-size:20px;
border-color: white;
}
.frame1>div:nth-child(1){
float:left;
margin-left:12px;
margin-top:20px;
font-size:20px;
}
.frame1{
margin-left:76px;
margin-top:24px;
width: 415px;
height:63px;
background-color:#f8f8f8;
}
.frame2{
margin-left:76px;
margin-top:24px;
width: 415px;
height:63px;
background-color:#f8f8f8;
}
.num2{
margin-left:12px;
margin-top:22px;
background-color:#f8f8f8;
font-size:20px;
border-color: white;
}
.get{
float:right;
margin-right:12px;
margin-top:20px;
font-size:20px;
}
a{
text-decoration:none;
color:#fe3355;
}
.enter{
margin-left:76px;
margin-top:56px;
width: 415px;
height:63px;
background-color:#fe3355;
color: white;
font-size:22px;
text-align:center;
line-height:60px;
}
.method{
margin-left:76px;
margin-top:24px;
width: 415px;
height:63px;
color:#606266;
}
.method>span:nth-child(1){
float:left;
font-size:18px;
line-height:30px;
}
.method>span:nth-child(3){
float:right;
font-size:18px;
}
.pic{
float:left;
margin-left:525px;
margin-top:-310px;
width:315px;
height:324px;
border-left: 1px solid #bdbdbd;
font-size:20px;
font-weight:400;
}
.pic>div:nth-child(1){
margin-left:36px;
font-size:20px;
font-weight:400;
}
.pic>div:nth-child(2){
margin-left:36px;
margin-top:26px;
}
.text1{
margin-left:36px;
margin-top:22px;
font-size:18px;
color:#606266;
}
.text2{
margin-top:22px;
font-size:18px;
color:#fe3355;
}
.text3{
margin-left:36px;
margin-top:22px;
font-size:18px;
color:#606266;
}
.tips{
text-align:center;
font-size:18px;
color:#606266;
}
.tips>span:nth-child(3),span:nth-child(5){
color:#236ddb;
text-align:left;
}
</style>
</head>
<body>
<table>
<div class="login">
<div>
<span>登录</span>
<span class="close">x</span>
</div>
<div></div>
<div></div>
<div>
<div class="captcha">
<div class="manner">验证码登录</div>
<div class="frame1">
<div>+86</div>
<input type="text" name="" class="num1" placeholder="请输入手机号"
autocomplete="tel" style="background-color:transparent;border:0;">
</div>
<div class="frame2">
<input type="text" name="" class="num2" placeholder="请输入验证码"
autocomplete="tel" style="background-color:transparent;border:0;">
<div class="get"><a href="#">获取验证码</a></div>
</div>
<div class="enter">登录/注册</div>
</div>
<div class="pic">
<div>扫码登录</div>
<div><img src="img/erweima.png" alt="" ></div>
<div>
<span class="text1">打开</span>
<span class="text2">西瓜视频手机APP</span>
</div>
<div>
<span class="text3">我的-扫一扫登录</span>
<span><a href="#"><img src="img/wenhao.png" alt=""></a></span>
</div>
</div>
</div>
<div class="method">
<span>其他方式:</span>
<span><img src="img/qita.png" alt=""></span>
<span>密码登录</span>
</div>
<div class="tips">
<input type="checkbox">
<span>勾选即代表你同意</span>
<span>用户协议</span>
<span>和</span>
<span>隐私政策</span>
</div>
</div>
</table>
</body>
</html>
成品图
三：仿小米商城页面部分区域
样图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
{
padding: 0;
margin: 0;
}
.banner_content{
width:1500px;
height: 1600px;
float: left;
}
.parent{
width: 310px;
height: 210px;
float: left;
background-color: #5f5750;
}
.child{
width: 100px;
height: 100px;
float: left;
text-align: center;
color: white;
border-left: 1px solid #aaa;
border-top: 1px solid #aaa;
opacity: 0.5;
}
.child:hover{
opacity: 1;
}
img{
display: block;
margin: auto;
margin-top: 20px;
}
.picture{
width: 350px;
height: 240px;
float: left;
}
.picture>img{
width: 350px;
height: 200px;
}
ul{
list-style:none;
}
.picture_bottom{
float: left;
}
li:hover{
background-color: white;
color: white;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5),
-2px -2px 2px rgba(0,0,0,0.5);
text-shadow: 2px 2px 1px rgba(255, 0, 0, 0.5);
}
li{
margin: 3px;
}
</style>
</head>
<body>
<div class="banner_content">
<div class="parent">
<div class="child">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="保障服务">
保障服务
</div>
<div class="child">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="企业团购">
企业团购
</div>
<div class="child">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="F码通道">
F码通道
</div>
<div class="child">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="米粉卡">
米粉卡
</div>
<div class="child">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="以旧换新">
以旧换新
</div>
<div class="child">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="话费充值">
话费充值
</div>
</div>
<div class="pictures">
<ul>
<li class="picture">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/
0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340" alt="">
</li>
<li class="picture">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340" alt="">
</li>
<li class="picture">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" alt="">
</li>
</ul>
</div>
<div class="picture_bottom">
<img alt="test" width="1226" height="120" data-src="//cdn.cnbj1.fds.api.mi-img.com/
mi-mall/0e9ef2e2599559a625a07becb510fe31.jpg?thumb=1&w=1533&h=150&
f=webp&q=90" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e9ef2e2599559a625a07becb510fe31.jpg?
thumb=1&w=1533&h=150&f=webp&q=90" lazy="loaded">
</div>
</div>
</body>
</html>
成品图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
