html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、亲民、快捷</title>
<!-- link 引入样式 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入网页图标 -->
<link rel="icon" href="./image/favicon.ico">
</head>
<body>
<!-- 1. -->
<div class="header">
<!-- 给出版心 -->
<div class="nav wrapper">
<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="#" class="phone">手机版</a></li>
</ul>
</div>
</div>
<!-- 2.导航-->
<div class="main">
<div class="navigation">
<div class="navBox wrapper">
<div class="logo">
<h1></h1>
</div>
<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>
<div class="seach">
<div class="sc_input">搜一搜</div>
<div class="icon"></div>
</div>
</div>
</div>
<!-- banner -->
<div class="bannerDom">
<div class="banner wrapper">
<div class="picture">
<img src="./update/banner_1.png" alt="">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 菜单 -->
<div class="downmenu">
<ul>
<li><p>生鲜</p>水果 蔬菜</li>
<li><p>美食</p>面点 干果</li>
<li><p>餐厨</p>数码产品</li>
<li><p>电器</p>床品 四件套 被枕</li>
<li><p>居家</p>奶粉 玩具 辅食</li>
<li><p>洗护</p>洗发 洗护 美妆</li>
<li><p>孕婴</p>奶粉 玩具</li>
<li><p>服饰</p>女装 男装</li>
<li><p>杂货</p>户外 图书</li>
<li><p>品牌</p>品牌制造</li>
</ul>
</div>
</div>
</div>
<!-- goods -->
<div class="new_goods wrapper">
<div class="goods_header">
<h2>新鲜好物<span>新鲜出炉 品质可靠</span></h2>
<div class="more">查看更多</div>
</div>
<div class="goods_item">
<ul>
<li>
<img src="./update/new_goods_1.jpg" alt="">
<p class="text">睿米无线吸尘器F8</p>
<p class="price"><span>¥</span>899</p>
</li>
<li>
<img src="./update/new_goods_2.jpg" alt="">
<p class="text">智能环绕3D空调</p>
<p class="price"><span>¥</span>1299</p>
</li>
<li>
<img src="./update/new_goods_3.jpg" alt="">
<p class="text">广东软软糯米煲仔饭</p>
<p class="price"><span>¥</span>129</p>
</li>
<li>
<img src="./update/new_goods_4.jpg" alt="">
<p class="text">罗西机械智能手表</p>
<p class="price"><span>¥</span>3399</p>
</li>
</ul>
</div>
</div>
<!-- 人气popularity -->
<div class="new_goods wrapper">
<div class="goods_header">
<h2>人气爆款<span>人气爆款 不容错过 </span></h2>
</div>
<div class="goods_item">
<ul>
<li>
<img src="./update/popular_1.jpg" alt="">
<p class="text">特惠推荐</p>
<p class="introduce">我猜的到 你的需要</p>
</li>
<li>
<img src="./update/popular_2.jpg" alt="">
<p class="text">爆款推荐</p>
<p class="introduce">人气好物推荐</p>
</li>
<li>
<img src="./update/popular_3.jpg" alt="">
<p class="text">场景使用一站买全</p>
<p class="introduce">编辑精细整理推荐</p>
</li>
<li>
<img src="./update/popular_4.jpg" alt="">
<p class="text">领券中心</p>
<p class="introduce">发现更多超值优惠券</p>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hot_good">
<div class="goods_item wrapper">
<div class="hot_goods_hd">
<h2>热门品牌 <span>国际经典 品质保证</span></h2>
<div class="next">
<div class="next_left"></div>
<div class="next_right"></div>
</div>
</div>
<div class="goods_list">
<ul>
<li><img src="./update/brand_goods_1.jpg" alt=""></li>
<li><img src="./update/brand_goods_2.jpg" alt=""></li>
<li><img src="./update/brand_goods_3.jpg" alt=""></li>
<li><img src="./update/brand_goods_4.jpg" alt=""></li>
<li><img src="./update/brand_goods_5.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜 -->
<div class="fresh wrapper">
<div class="fresh_hd">
<h2>生鲜</h2>
<div class="hd_list">
<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="#">T恤</a></li>
<li><a href="#">内衣</a></li>
<li class="more">查看全部</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
css部分
@import"./base.css";
// 主题颜色
@viewColor:#27ba9b;
// 设置项目版心
.wrapper{
width: 1240px;
margin: 0 auto;
}
// top
.header{
// 宽度为100% 表示网页宽度占满
width: 100%;
height: 52px;
background-color: #333333;
ul{
// 表示版心的一半,在ul中定义了wrapper
width: 50%;
float: right;
// 在一行显示
display: flex;
// 两端对齐
justify-content: space-around;
line-height: 52px;
li{
a{
color: #dcdcdc;
font-size: 14px;
// 内边距 上下 左右
padding: 0 14px;
border-right: 1px solid #666;
}
&:nth-child(7) a{
border-right: none;
}
.phone{
// 可以删除这个看一下效果
padding-left: 10px;
&::before {
content:"";
float: left;
// 小logo的宽高
width: 13px;
height: 16px;
background: url(../image/sprites.png);
background-position: -159px -69px;
// 上右下左
margin: 17px 0 0 7px;
}
}
}
}
}
// 导航
.navigation{
width: 100%;
height: 130px;
.navBox {
display: flex;
height: 130px;
.logo{
// flex:1;
width: 205px;
height: 100%;
display: flex;
// 居中显示
align-items: center;
h1{
width: 205px;
height: 70px;
background: url(../image/logo.png) no-repeat;
background-size: 100%;
}
}
.nav{
flex:2;
height: 100%;
line-height: 130px;
ul{
display: flex;
justify-content:space-around;
li{
a{
font-size: 16px;
color:#333;
&:hover{
// 下划线与文字挨着太紧了 设置下去一点
padding-bottom: 5px;
border-bottom: 2px solid @viewColor;
color: @viewColor;
}
}
}
}
}
.seach{
flex:1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.sc_input{
width: 172px;
height: 30px;
// 水平偏移 垂直偏移 模糊距离
box-shadow: 0 0 10px rgba(78, 76, 76, 0.3);
color: #cccccc;
font-size: 14px;
line-height: 30px;
// 给放大镜腾位子
padding-left: 30px;
position: relative;
&::before{
content:"";
position: absolute;
top:0;
left:0;
width: 21px;
height: 18px;
background: url(../image/sprites.png);
background-position: -77px -68px;
}
}
.icon{
width: 23px;
height: 23px;
background: url(../image/sprites.png);
background-position: -119px -69px;
margin-left: 15px;
// 购物车小字母
position: relative;
&::after{
content: "2";
position: absolute;
// 右上角
top:-4px;
right:-10px;
width: 20px;
height: 15px;
background-color: #e26237;
border-radius: 10px;
color:#fff;
text-align: center;
font-size: 9px;
}
}
}
}
}
// banner
.bannerDom{
background-color: #f5f5f5;
.banner{
// 左侧菜单定位
position: relative;
.picture{
width: 100%;
height: 500px;
// 轮播按钮的定位
position: relative;
img{
width: 100%;
height: 500px;
}
// 轮播坐标
ul{
// 跟图片定位
position: absolute;
left: 56%;
bottom: 31px;
li{
float: left;
width: 10px;
height: 10px;
background-color:rgba(22, 21, 21, 0.43);
margin-right: 15px;
border-radius: 50%;
&:nth-child(3){
background-color: #fff;
}
}
}
// 轮播按钮
&::before,
&::after{
content: "";
position: absolute;
top:50%;
right:10px;
width: 45px;
height: 45px;
// 精灵图获取
background: rgba(0, 0, 0, 0.2) url(../image/sprites.png) no-repeat;
background-position: -23px -59px;
border-radius: 50%;
}
// 样式的层叠性改变样式
&::before{
left:260px;
// 精灵图获取 左边
background-position: 14px -59px;
}
}
// Downmenu
.downmenu{
position: absolute;
top:0;
left: 0;
width: 251px;
height: 500px;
// 或者
background-color:rgba(0, 0, 0, 0.8);
// background-color: #000000;
// 设置透明度(内容和背景层都会改变)
// opacity: 0.8;
ul{
li{
width: 251px;
height: 50px;
line-height: 50px;
font-size: 12px;
color:#fff;
&::after{
content: "";
width: 6px;
height: 6px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
// 也可以用定位
float: right;
margin-top: 20px;
margin-right: 19px;
transform: rotate(45deg);
}
&:hover{
background-color: @viewColor;
opacity: 1;
}
p{
float: left;
font-size: 16px;
margin-left: 36px;
margin-right: 15px;
}
}
}
}
}
}
// goods
.new_goods{
// 距离上一个盒子的高度
margin-top: 48px;
.goods_header{
// 表示占取页面的总宽度
width: 100%;
// 子盒子与下面之间的高度
height: 66px;
h2{
font-size: 29px;
font-weight: normal;
color: #333333 ;
span{
font-size: 16px;
color:#999;
margin-left: 34px;
}
}
.more{
float: right;
font-size: 16px;
color: #999999;
margin-top: -22px;
&::after{
float: right;
margin-top: 4px;
margin-left: 13px;
content: "";
width: 7px;
height: 13px;
// 使用精灵图获取
background: url(../image/sprites.png) no-repeat;
background-position: 0 -109px;
}
}
}
// goods_item
.goods_item {
background-color: #f0f9f4;
ul{
display: flex;
justify-content: space-around;
li{
width: 305px;
height: 405px;
text-align: center;
transition: all 1s;
img{
// 宽度继承li的宽度
width: 100%;
height: 305px;
}
.text{
font-size: 20px;
color: #333333;
margin-top: 22px;
margin-bottom: 7px;
}
.price{
font-size: 23px;
color: #9a2e1f;
span{
font-size: 17px;
color:#9a2e1f;
}
}
&:hover{
transform: translateY(-7px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.introduce{
font-size: 16px;
color: #999999;
}
}
}
}
}
.hot_good{
width: 100%;
background-color: #f5f5f5;
margin-top: 55px;
padding: 45px 0;
.goods_item{
.hot_goods_hd{
// 小图标
width: 100%;
height: 66px;
position: relative;
h2{
font-size: 29px;
font-weight: normal;
color: #333333 ;
span{
font-size: 16px;
color:#999;
margin-left: 34px;
}
}
.next{
position: absolute;
right: 2px;
bottom: 16px;
.next_left,
.next_right{
float: left;
width: 20px;
height: 20px;
background: #e2e2e2 url(../image/sprites.png) no-repeat;
background-position: 6px -31px;
background-size: 200px 200px;
}
.next_right{
background: #27ba9b url(../image/sprites.png) no-repeat -12px -31px;
background-size: 200px 200px;
margin-left: 12px;
}
}
}
.goods_list{
ul{
display: flex;
justify-content: space-around;
li{
width: 244px;
height:306px;
img{
width: 100%;
height: 100%;
}
}
}
}
}
}
// 生鲜
.fresh{
.fresh_hd{
margin-top: 34px;
width: 100%;
height: 66px;
h2{
font-size: 29px;
font-weight: normal;
color: #333333 ;
float: left;
}
.hd_list{
float: right;
ul{
li{
float: left;
margin-left: 13px;
a{
font-size: 16px;
color: #333333;
padding: 2px 7px;
&:hover{
background-color: @viewColor;
color: #fff;
}
}
}
.more{
margin-left: 65px;
color: #999999;
&::after{
float: right;
margin-top: 4px;
margin-left: 11px;
content: "";
width: 7px;
height: 13px;
// 使用精灵图获取
background: url(../image/sprites.png) no-repeat;
background-position: 0 -109px;
}
}
}
}
}
}
4285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
