今日小兔鲜儿pc端案例
通过flex流式布局 使用justify-content， align-items，flex-direction等相关内容对设计稿进行还原 锻炼使用flex布局的能力
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3214394_053aky4zt3jn.css">
<link rel="stylesheet" href="./css/1.css">
<link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/x-icon" />
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" />
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
</head>
<body>
<header>
<!-- 快捷导航栏 shortcut 模块 start -->
<div class="shortcut">
<div class="w">
<ul>
<li><a href="#">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
<li><a href="#">手机版</a></li>
</ul>
</div>
</div>
<!-- 快捷导航栏 shortcut 模块 end -->
<!-- 小兔鲜儿头部 header 模块 start -->
<div class="header w">
<!-- logo -->
<h1 title="小兔鲜儿">
<a href="#">小兔鲜儿</a>
</h1>
<!-- 导航 nav -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
<!-- 搜索 search -->
<div class="search">
<i></i>
<input type="text" placeholder="搜一搜" />
</div>
<!-- 购物车 cart -->
<div class="cart">
<i>99+</i>
</div>
</div>
<!-- 小兔鲜儿头部 header 模块 end -->
</header>
<div class="main w">
<div class="left">
<div class="avatar">
<a href="#" class="pic">
<img src="./uploads/avatar_2.png" alt="">
</a>
<span class="name">哈喽</span>
<div class="vip">
<img src="./uploads/vip_gold.png" alt="">
<span>黄金会员</span>
</div>
</div>
<div class="acount">
<h2>我的账户</h2>
<ul>
<li><a href="#">个人中心</a></li>
<li><a href="#">消息通知</a></li>
<li><a href="#">个人信息</a></li>
<li><a href="#">安全设置</a></li>
<li><a href="#">地址管理</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的足迹</a></li>
<li><a href="#">邀请有礼</a></li>
<li><a href="#">幸运抽奖</a></li>
</ul>
</div>
<div class="acount">
<h2>交易管理</h2>
<ul>
<li><a href="#">我的订单</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">礼品卡</a></li>
<li><a href="#">评价晒单</a></li>
<li><a href="#">售后服务</a></li>
</ul>
</div>
<div class="acount">
<h2>我的收藏</h2>
<ul>
<li><a href="#">收藏的商品</a></li>
<li><a href="#">收藏的店铺</a></li>
<li><a href="#">收藏的文章</a></li>
</ul>
</div>
<div class="acount">
<h2>帮助中心</h2>
<ul>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="overview">
<div class="zuo">
<a href="#" class="huiyuan">
<img src="./images/vip.png" alt="">
<span>会员中心</span>
</a>
<a href="#" class="huiyuan">
<img src="./images/safe.png" alt="">
<span>安全设置</span>
</a>
<a href="#" class="huiyuan">
<img src="./images/address.png" alt="">
<span>地址管理</span>
</a>
</div>
<div class="you">
<a href="#" class="huiyuan">
<h2>6</h2>
<span>优惠券</span>
</a>
<a href="#" class="huiyuan">
<h2>70</h2>
<span>礼品券</span>
</a>
<a href="#" class="huiyuan">
<h2>120</h2>
<span>积分</span>
</a>
</div>
</div>
<div class="orders">
<div class="hd">
<h2>我的订单</h2>
<a href="#">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="bd">
<div class="sp">
<img src="./uploads/clothes_goods_5.jpg" alt="">
<div class="wzgs">
<div class="wz">
<p>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</p>
<div class="gs">
<span>颜色：白色</span>
<span>尺码：M</span>
<span>数量：1</span>
</div>
</div>
<div class="dfk">
<a href="#">待付款</a>
</div>
</div>
</div>
<div class="jg">
<span>￥99.00</span>
<span>(含运费：￥10.00元)</span>
<span>在线支付</span>
</div>
<div class="fk">
<a href="#">立即付款</a>
<a href="#">查看详情</a>
<a href="#">取消订单</a>
</div>
</div>
<div class="bd">
<div class="sp">
<img src="./uploads/clothes_goods_6.jpg" alt="">
<div class="wzgs">
<div class="wz">
<p>李宁跑步鞋男鞋空气弧型拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</p>
<div class="gs">
<span>颜色：灰色</span>
<span>尺码：42</span>
<span>数量：1</span>
</div>
</div>
<div class="dfk">
<a href="#">待付款</a>
<a href="#">查看物流</a>
</div>
</div>
</div>
<div class="jg">
<span>￥199.00</span>
<span>(含运费：￥10.00元)</span>
<span>在线支付</span>
</div>
<div class="fk">
<a href="#">立即付款</a>
<a href="#">查看详情</a>
<a href="#">再次购买</a>
</div>
</div>
<div class="bd">
<div class="sp">
<img src="./uploads/clothes_goods_4.jpg" alt="">
<div class="wzgs">
<div class="wz">
<p>美女拉屎 拉大块的屎 很大一块拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</p>
<div class="gs">
<span>颜色：绿色</span>
<span>尺码：s</span>
<span>数量：1</span>
</div>
</div>
<div class="dfk">
<a href="#">待付款</a>
<a href="#">查看物流</a>
</div>
</div>
</div>
<div class="jg">
<span>￥79.00</span>
<span>(含运费：￥0.00元)</span>
<span>在线支付</span>
</div>
<div class="fk">
<a href="#">立即付款</a>
<a href="#">查看详情</a>
<a href="#">再次购买</a>
</div>
</div>
</div>
<div class="goods">
<div class="hd">
<h2>收藏的商品</h2>
<a href="#">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="fl">
<a href="#">
<img src="./uploads/clothes_goods_1.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>55</span>
</a>
<a href="#">
<img src="./uploads/clothes_goods_2.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>20.9</span>
<i class="discount">6折</i>
</a>
<a href="#">
<img src="./uploads/clothes_goods_3.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>209</span>
</a>
<a href="#">
<img src="./uploads/clothes_goods_4.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>79</span>
</a>
</div>
</div>
<div class="goods">
<div class="hd">
<h2>我的足迹</h2>
<a href="#">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="fl">
<a href="#">
<img src="./uploads/clothes_goods_5.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>55</span>
</a>
<a href="#">
<img src="./uploads/clothes_goods_6.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>20.9</span>
<i class="discount">6折</i>
</a>
<a href="#">
<img src="./uploads/clothes_goods_7.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>209</span>
</a>
<a href="#">
<img src="./uploads/clothes_goods_8.jpg" alt="">
<p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
<span><em>￥</em>79</span>
</a>
</div>
</div>
</div>
</div>
<footer>
<!-- 联系模块 contact start -->
<div class="contact w">
<!-- 客户服务 -->
<dl class="customer">
<dt>客户服务</dt>
<dd class="online">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<!-- 关注我们 -->
<dl class="customer focus">
<dt>关注我们</dt>
<dd class="online weixin">公众号</dd>
<dd class="feedback weibo">微博</dd>
</dl>
<!-- 下载APP -->
<dl class="download">
<dt>下载APP</dt>
<dd class="code">
<img src="./uploads/qrcode.png" alt="" />
</dd>
<dd class="now">
<p class="saomiao">扫描二维码</p>
<p>立马下载APP</p>
<a href="#">下载页面</a>
</dd>
</dl>
<!-- 服务热线 -->
<dl class="hotline">
<dt>服务热线</dt>
<dd>
<p class="tel">400-0000-000</p>
<p>周一至周日 8:00-18:00</p>
</dd>
</dl>
</div>
<!-- 联系模块 contact end -->
<!-- 底部模块 footer start -->
<div class="footer">
<!-- 上半部分 服务部分 serive -->
<div class="serive">
<div class="w">
<a href="#">价格亲民</a>
<a href="#">物流快捷</a>
<a href="#">品质新鲜</a>
</div>
</div>
<!-- 下半部分 版权区域 copyright -->
<div class="copyright">
<p>
<a href="#">关于我们</a>
<span>|</span>
<a href="#">帮助中心</a>
<span>|</span>
<a href="#">售后服务</a>
<span>|</span>
<a href="#">配送与验收</a>
<span>|</span>
<a href="#">商务合作</a>
<span>|</span>
<a href="#">搜索推荐</a>
<span>|</span>
<a href="#">友情链接</a>
</p>
<div class="xiao">CopyRight @ 小兔鲜儿</div>
</div>
</div>
<!-- 底部模块 footer end -->
</footer>
</body>
</html>
CSS代码
.w {
width: 1240px;
margin: 0 auto;
}
.shortcut {
height: 52px;
line-height: 52px;
background-color: #333333;
}
.shortcut ul {
float: right;
}
.shortcut li {
float: left;
}
.shortcut li a {
color: #dcdcdc;
padding: 0 16px;
border-right: 1px solid #666666;
}
.shortcut li:last-child a {
border-right: 0;
}
.shortcut li:last-child a::before {
display: inline-block;
content: "";
width: 11px;
height: 16px;
background: url(../images/sprites.png) -160px -70px;
margin-right: 8px;
vertical-align: sub;
}
.shortcut li a:hover {
color: #27ba9b;
}
.header {
height: 70px;
margin: 30px auto;
}
.header h1 {
float: left;
margin-left: 25px;
}
.header h1 a {
display: block;
width: 207px;
height: 70px;
background: url(../images/logo.png);
background-size: 207px 70px;
text-indent: -999px;
overflow: hidden;
}
.header .nav {
float: left;
line-height: 70px;
margin-left: 40px;
}
.header .nav li {
float: left;
margin-right: 48px;
}
.header .nav a {
color: #333333;
font-size: 16px;
padding-bottom: 7px;
}
.header .nav a:hover {
color: #27ba9b;
border-bottom: 1px solid #27ba9b;
}
.search {
position: relative;
float: left;
width: 172px;
height: 30px;
margin-top: 24px;
margin-left: 34px;
}
.search input {
width: 100%;
height: 100%;
border: 0;
padding-left: 30px;
border-bottom: 2px solid #e7e7e7;
outline: none;
}
.search i {
position: absolute;
left: 4px;
top: 6px;
width: 18px;
height: 18px;
background: url(../images/sprites.png) -80px -70px;
}
.cart {
position: relative;
float: left;
width: 23px;
height: 23px;
background: url(../images/sprites.png) -120px -70px;
margin-top: 28px;
margin-left: 15px;
}
.cart i {
position: absolute;
top: -6px;
right: -12px;
height: 15px;
background-color: #e26237;
color: #fff;
font-size: 13px;
text-align: center;
line-height: 15px;
border-radius: 8px;
padding: 0 4px;
}
.footer {
height: 343px;
background-color: #333333;
}
.serive .w {
width: 1393px;
height: 174px;
border-bottom: 1px solid #434343;
}
.serive .w a {
float: left;
width: 33.33%;
height: 100%;
font-size: 28px;
color: #fff;
text-align: center;
line-height: 173px;
}
.serive .w a::before {
display: inline-block;
content: "";
width: 58px;
height: 58px;
background: url(../images/sprites.png) 0 0;
vertical-align: middle;
margin-right: 19px;
}
.serive .w a:nth-child(2)::before {
background-position: -130px 0;
}
.serive .w a:nth-child(3)::before {
background-position: -65px 0;
}
.copyright {
text-align: center;
}
.copyright p {
margin-top: 40px;
}
.copyright p a {
color: #999;
}
.copyright p span {
color: #999;
margin: 0 10px;
}
.copyright .xiao {
color: #999;
margin-top: 18px;
}
.contact.w {
height: 303px;
}
.contact dl {
float: left;
width: 25%;
height: 223px;
margin-top: 80px;
text-align: center;
color: #999;
}
.contact dt {
margin-bottom: 35px;
font-size: 16px;
}
.contact dd {
display: inline-block;
font-size: 14px;
}
.contact .customer dd {
width: 93px;
height: 92px;
border: 1px solid #eeeeee;
cursor: pointer;
}
.customer dd::before {
display: block;
content: "";
width: 29px;
height: 28px;
background: url(../images/sprites.png) -250px -70px;
margin: 22px auto 10px;
}
.customer .feedback::before {
background-position: -350px -70px;
}
.customer .online:hover::before {
background-position: -205px -70px;
}
.customer .feedback:hover::before {
background-position: -300px -70px;
}
.focus dd::before {
width: 36px;
height: 29px;
}
.focus .weixin::before {
background-position: -250px -15px;
}
.focus .weibo::before {
background-position: -350px -15px;
}
.focus .weixin:hover::before {
background-position: -205px -15px;
}
.focus .weibo:hover::before {
background-position: -300px -15px;
}
.download .code {
width: 116px;
height: 116px;
border: 1px solid #eee;
padding-top: 7px;
margin-right: 22px;
vertical-align: top;
}
.download .code img {
width: 105px;
height: 103px;
}
.contact .download .now {
text-align: left;
}
.contact .download .now a {
display: block;
width: 103px;
height: 32px;
background-color: #27ba9b;
color: #fff;
text-align: center;
line-height: 32px;
margin-top: 14px;
}
.contact .download .now .saomiao {
padding-top: 10px;
}
.hotline .tel {
font-size: 22px;
color: #666;
margin-top: 33px;
margin-bottom: 6px;
}
.hotline {
position: relative;
}
.hotline::before {
position: absolute;
left: 0;
content: "";
width: 0;
height: 189px;
border-left: 2px solid #f2f2f2;
}
.main {
width: 1240px;
display: flex;
justify-content: space-between;
}
.main .left {
width: 224px;
background-color: #fff;
margin-right: 20px;
}
.main .left .avatar {
height: 232px;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #f4f4f4;
}
.main .left .avatar .pic img {
width: 85px;
height: 85px;
border-radius: 50%;
margin-top: 46px;
}
.main .left .avatar .name {
font-size: 18px;
font-weight: bold;
margin-top: 8px;
}
.main .left .avatar .vip {
width: 93px;
height: 27px;
border-radius: 13px;
background-image: linear-gradient(264deg, #e05e2f 0%, #ea745e 95%);
line-height: 27px;
text-align: center;
color: #fff;
}
.main .left .avatar .vip img {
width: 15px;
height: 15px;
}
.left .acount {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #f4f4f4;
}
.left .acount h2 {
margin-top: 30px;
margin-bottom: 30px;
}
.left .acount ul {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.left .acount ul>li {
margin-right: 8px;
font-size: 16px;
height: 42px;
position: relative;
}
.left .acount ul>li::after {
content: '';
position: absolute;
left: -13px;
top: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #27ba9b;
opacity: 0;
}
.left .acount ul>li:hover a {
color: #27ba9b;
}
.left .acount ul>li:hover::after {
opacity: 1;
}
.main .right .overview {
width: 999px;
height: 133px;
display: flex;
background-color: #fff;
justify-content: space-between;
}
.main .right .overview .zuo,
.main .right .overview .you {
width: 495px;
height: 92px;
display: flex;
margin-top: 20px;
justify-content: space-evenly;
border-right: 1px solid #f4f4f4;
}
.main .right .overview .you {
border-right: 0;
}
.main .right .overview .huiyuan {
width: 92px;
height: 92px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.main .right .overview .zuo .huiyuan img {
width: 28px;
height: 25px;
}
.main .right .overview .zuo .huiyuan:last-child img {
width: 24px;
height: 26px;
}
.main .right .overview .huiyuan span {
font-size: 16px;
color: #333333;
margin-top: 5px;
}
.main .right .overview .you .huiyuan {
text-align: center;
}
.main .right .overview .you .huiyuan h2 {
font-size: 22px;
color: #e05e30;
}
.main .right .orders {
width: 999px;
display: flex;
background-color: #fff;
flex-direction: column;
margin-top: 17px;
padding: 0 18px;
}
.main .right .hd {
display: flex;
height: 70px;
justify-content: space-between;
align-items: center;
}
.main .right .hd h2 {
font-weight: normal;
}
.main .right .hd a {
color: #999;
}
.main .right .orders .bd {
display: flex;
width: 964px;
height: 138px;
align-items: center;
border: solid 2px #f4f4f4;
margin-bottom: 20px;
}
.main .right .orders .bd .sp {
display: flex;
width: 585px;
height: 138px;
border-right: solid 2px #f4f4f4;
}
.main .right .orders .bd .sp img {
width: 107px;
height: 107px;
margin-top: 18px;
}
.main .right .orders .bd .sp .wz {
width: 214px;
flex-direction: column;
align-items: center;
margin-top: 40px;
}
.main .right .orders .bd .sp .wz p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main .right .orders .bd .sp .gs {
color: #999;
font-size: 14px;
}
.main .right .orders .bd .sp .wzgs {
display: flex;
justify-content: space-between;
}
.main .right .orders .bd .sp .wzgs .dfk {
width: 200px;
height: 138px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 80px;
}
.main .right .orders .bd .sp .wzgs .dfk>a:first-child {
color: #e05e30;
}
.main .right .orders .bd .jg {
width: 196px;
height: 138px;
border: 2px solid #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main .right .orders .bd .jg>span:first-child {
color: #9a2e1f;
}
.main .right .orders .bd .fk {
width: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main .right .orders .bd .fk>a:first-child {
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
background-color: #27ba9b;
margin-bottom: 5px;
}
.main .right .goods {
width: 999px;
display: flex;
background-color: #fff;
flex-direction: column;
margin-top: 17px;
padding: 0 18px;
}
.main .right .goods .fl {
width: 925px;
height: 270px;
display: flex;
justify-content: space-evenly;
}
.main .right .goods .fl img {
width: 160px;
height: 160px;
margin-top: 19px;
}
.main .right .goods .fl a {
position: relative;
padding-left: 50px;
align-items: center;
flex: 1;
}
.main .right .goods .fl a p {
width: 160px;
font-size: 15px;
}
.main .right .goods .fl a span {
color: #9a2e1f;
font-weight: bold;
font-size: 16px;
}
.main .right .goods .fl a span em {
font-size: 14px;
font-weight: normal;
}
.main .right .goods .discount {
font-weight: bold;
text-align: center;
font-size: 18px;
line-height: 23px;
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 52px;
border-radius: 3px;
border: solid 2px #5eb69c;
color: #5eb69c;
}
