【免费】纯HTML+CSS网站首页布局实战资源-CSDN文库

共70个文件

png：57个

css：5个

html：2个

HTML

需积分: 0 137 浏览量 2023-12-28 16:10:57 上传评论收藏 5.51MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

xtx-pc.zip （70个子文件）

iconfont

demo.css 8KB

demo_index.html 15KB

iconfont.ttf 4KB

iconfont.css 923B

iconfont.json 2KB

iconfont.woff2 2KB

iconfont.js 10KB

iconfont.woff 2KB

css

common.css 4KB

base.css 901B

index.css 7KB

favicon.ico 4KB

index.html 53KB

uploads

kitchen8.png 76KB

kitchen7.png 66KB

home6.png 58KB

clothes4.png 77KB

hot5.png 120KB

topic2.png 230KB

fresh8.png 69KB

home5.png 80KB

goods4.png 137KB

home7.png 56KB

goods2.png 134KB

hot3.png 66KB

home_left.png 173KB

clothes6.png 45KB

clothes5.png 40KB

recommend3.png 61KB

clothes1.png 35KB

colthes_left.png 228KB

fresh_left.png 210KB

fresh6.png 54KB

home8.png 74KB

topic1.png 257KB

fresh4.png 69KB

hot1.png 106KB

home3.png 74KB

fresh3.png 61KB

fresh1.png 64KB

fresh2.png 81KB

clothes3.png 69KB

kitchen1.png 78KB

clothes8.png 55KB

clothes2.png 49KB

kitchen6.png 64KB

kitchen3.png 58KB

home4.png 71KB

kitchen2.png 51KB

recommend2.png 96KB

kitchen4.png 34KB

clothes7.png 73KB

kitchen_left.png 200KB

fresh5.png 51KB

hot4.png 94KB

recommend1.png 105KB

topic3.png 180KB

goods1.png 93KB

home1.png 77KB

recommend4.png 91KB

goods3.png 127KB

fresh7.png 64KB

banner1.png 775KB

home2.png 44KB

hot2.png 97KB

kitchen5.png 85KB

images

logo.png 8KB

app.png 4KB

sprite.png 6KB

wechat.png 4KB

<!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"> <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"> <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"> <title>小兔鲜儿-新鲜、惠民、快捷！</title> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="./iconfont/iconfont.css"> </head> <body>  <div class="shortcut"> <div class="wrapper"> <ul> <li><a href="#" class="login">请先登录</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="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li> </ul> </div> </div>  <div class="header wrapper">  <div class="logo"> <h1><a href="#">小兔鲜儿</a></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="search"> <span class="iconfont icon-search"></span> <input type="text" placeholder="搜一搜"> </div>  <div class="cart"> <span class="iconfont icon-cart-full"></span> <i>2</i> </div> </div>  <div class="banner"> <div class="wrapper">  <ul class="pic"> <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li> <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li> <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li> </ul>  <div class="subnav"> <ul> <li> <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li class="canchu"> <div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a> </div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a> </div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a> </div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> <li> <div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div> <span class="iconfont icon-arrow-right-bold"></span> </li> </ul> </div>  <ol> <li class="curent"><i></i></li> <li><i></i></li> <li><i></i></li> </ol> </div> </div>  <div class="goods wrapper">  <div class="title"> <div class="left"> <h3>新鲜好物</h3> <p>新鲜出炉品质靠谱</p> </div> <div class="right"> <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a> </div> </div>  <div class="bd"> <ul> <li> <a href="#"> <div class="pic"><img src="./uploads/goods1.png" alt=""></div> <div class="txt"> <h4>KN95级莫兰迪色防护口罩</h4> <p>￥<span>79</span></p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/goods2.png" alt=""></div> <div class="txt"> <h4>紫檀外独板三层普洱茶盒</h4> <p>￥<span>566</span></p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/goods3.png" alt=""></div> <div class="txt"> <h4>法拉蒙高颜值记事本可定制</h4> <p>￥<span>58</span></p> </div> </a> </li> <li> <a href="#"> <div class="pic"><img src="./uploads/goods4.png" alt=""></div> <div class="txt"> <h4>科技布布艺沙发</h4> <p>￥<span>3579</span></p> </div> </a> </li> </ul> </div> </div> <!-- 人气推荐 -

评论收藏

内容反馈