一：仿淘宝页面
鼠标停留在图片上时会出现“找同款”“找相似”项
代码
<!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>
成品图
文章评论