小兔鲜首页HTML+css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小兔鲜</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
</head>
<body>
<!--顶部导航-->
<div class="top">
<div class="nav">
<ul>
<li>
<a href="">请先登录</a><span>|</span></li>
<li>
<a href="">免费注册</a><span>|</span></li>
<li>
<a href="">我的订单</a><span>|</span></li>
<li>
<a href="">会员中心</a><span>|</span></li>
<li>
<a href="">帮助中心</a><span>|</span></li>
<li>
<a href="">关于我们</a><span>|</span></li>
<li>
<a href=""><img src="img/未标题-1.png" />手机版</a>
</li>
</ul>
</div>
</div>
<!--导航部分-->
<div class="continer navbar">
<div class="logo">
<img src="img/1_03.png" />
</div>
<div class="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="">居家</a>
</li>
<li>
<a href="">洗护</a>
</li>
<li>
<a href="">孕婴</a>
</li>
<li>
<a href="">服装</a>
</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="搜一搜" />
<img src="img/搜索.png" />
<img src="img/购物车.png" />
<div class="amount">
<font>2</font>
</div>
</div>
</div>
<!--轮播图部分-->
<div class="grapbg one">
<div class="continer">
<img src="img/slideshow-img.jpg" />
<div class="left">
<ul>
<li>
<a href=""><span>生鲜</span>
<font>水果 蔬菜</font><i>></i></a>
</li>
<li>
<a href=""><span>美食</span>
<font>面点 干果</font><i>></i></a>
</li>
<li>
<a href=""><span>餐厨</span>
<font>数码产品</font><i>></i></a>
</li>
<li>
<a href=""><span>电器</span>
<font>床品 四件套 被枕</font><i>></i></a>
</li>
<li>
<a href=""><span>居家 </span>
<font>奶粉 玩具 铺食</font><i>></i></a>
</li>
<li>
<a href=""><span>洗护 </span>
<font>洗发 美发 美妆</font><i>></i></a>
</li>
<li>
<a href=""><span>孕婴 </span>
<font>奶粉 玩具</font><i>></i></a>
</li>
<li>
<a href=""><span>服饰 </span>
<font>女装男装</font><i>></i></a>
</li>
<li>
<a href=""><span>杂货 </span>
<font>户外 图书</font><i>></i></a>
</li>
<li>
<a href=""><span>品牌 </span>
<font>品牌制造</font><i>></i></a>
</li>
</ul>
</div>
</div>
</div>
<!--背景为白色部分-->
<div class="continer frist clearfix">
<!--标题部分-->
<div class="title">
<h3>新鲜好物</h3>
<font>新鲜出炉 品质靠谱</font>
<a href="">查看全部></a>
</div>
<!--内容部分-->
<div class="center">
<div class="imgs ">
<img src="img/1_07.png" />
<h5>睿米无线吸尘器F8</h5>
<h6>￥899</h6>
</div>
<div class="imgs">
<img src="img/1_09.png" />
<h5>智能环绕3D空调</h5>
<h6>￥1299</h6>
</div>
<div class="imgs">
<img src="img/1_11.png" />
<h5>广东软软糯米煲仔饭</h5>
<h6>￥129</h6>
</div>
<div class="imgs">
<img src="img/1_13.png" />
<h5>罗西机械智能手表</h5>
<h6>￥3399</h6>
</div>
</div>
<!--标题部分-->
<div class="title">
<h3>生鲜</h3>
<a href="">查看全部></a>
<div class="lost">
<ul>
<li>水果</li>
<li>蔬菜</li>
<li>肉禽蛋</li>
<li>裤装</li>
<li>衬衫</li>
<li>T恤</li>
<li>内衣</li>
</ul>
</div>
</div>
<!--内容部分-->
<div class="center">
<div class="wine">
<img src="img/1_20.png" />
</div>
<div class="text">
<ul>
<li>
<img src="img/1_23.png" />
<p>美威 智利原味三文鱼排 240g/袋 4片装</p>
<p>海鲜年货</p>
<h4>￥59</h4>
</li>
<li><img src="img/1_25.png" />
<p>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
<p>火锅食材</p>
<h4>￥79</h4>
</li>
<li><img src="img/1_27.png" />
<p>三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p>海鲜水产</p>
<h4>￥49</h4>
</li>
<li><img src="img/1_29.png" />
<p>渔公码头 大连鲜食入味 即食海参 辽参刺参</p>
<p>调味海</p>
<h4>￥899</h4>
</li>
<li><img src="img/1_35.png" />
<p>越南白心火龙果4个装 标椎果400-550g</p>
<p>新鲜水果</p>
<h4>￥20</h4>
</li>
<li><img src="img/1_36.png" />
<p>广西沃柑 新鲜水果 柑橘<br>1.5kg</p>
<p>新鲜水果</p>
<h4>￥10</h4>
</li>
<li><img src="img/1_37.png" />
<p>进口 牛油果 6个装 单果重约130-180g</p>
<p>新鲜水果</p>
<h4>￥50</h4>
</li>
<li><img src="img/1_38.png" />
<p>泰国进口山竹5A级<br>500g</p>
<p>新鲜水果</p>
<h4>￥60</h4>
</li>
</ul>
</div>
</div>
</div>
<!--背景为灰色部分-->
<div class="grapbg two">
<div class="continer">
<!--标题部分-->
<div class="title">
<h3>最新专题</h3>
<a href="">查看全部></a>
</div>
<!--内容部分-->
<div class="loss">
<ul>
<li>
<img src="img/1_44.png" />
<div class="Like">
<i class="iconfont icon-aixin1"></i>
</div>
<div class="View">
<i class="iconfont icon-yanjing"></i>
</div>
<div class="voice">
<i class="iconfont icon-liuyan"></i>
</div>
</li>
<li>
<img src="img/1_46.png" />
<div class="Like">
<i class="iconfont icon-aixin1"></i>
</div>
<div class="View">
<i class="iconfont icon-yanjing"></i>
</div>
<div class="voice">
<i class="iconfont icon-liuyan"></i>
</div>
</li>
<li>
<img src="img/1_48.png" />
<div class="Like">
<i class="iconfont icon-aixin1"></i>
</div>
<div class="View">
<i class="iconfont icon-yanjing"></i>
</div>
<div class="voice">
<i class="iconfont icon-liuyan"></i>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--底部信息栏-->
<div class="continer contact clearfix">
<ul>
<li>
<h4>客户服务</h4>
<div class="arrange">
<svg t="1631242763815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p->
<p>下载页面</p>
</div>
</div>
</li>
<li>
<h4>服务热线</h4>
<h4>400-0000-000</h4>
<h4>周一至周日 8:00-18:00</h4>
</li>
</ul>
</div>
<!--底端地址-->
<div class="grapbg twelve">
<div class="continer">
<div class="pro">
<svg t="1631261070498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-></path>
</svg>
<h3>品质新鲜</h3>
</div>
</div>
<div class="ispn">
<h5>关于我们|帮助中心|售后服务|配送与验收|商务合作|搜索推荐|友情链接</h5>
<h5>CopyRight @ 小兔鲜儿</h5>
</div>
</div>
</body>
</html>