基于HMTLCSS实现仿天猫首页的静态网页源码+多张效果截图+项目说明.7z

共37个文件

png：20个

jpg：9个

1：3个

版权申诉

HMTL

课程作业

141 浏览量 2022-12-17 23:40:48 上传评论收藏 3.38MB 7Z 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于HMTL CSS实现仿天猫首页的静态网页源码+多张效果截图+项目说明.7z （37个子文件）

项目说明.md 156B

css

common.css 4KB

base.css 1KB

index.css 4KB

index.html 13KB

images

recom

brand1.jpg 25KB

1 13B

brand2.jpg 57KB

brand3.jpg 48KB

brand4.png 140KB

index

5G.png 34KB

footer-3.png 19KB

HUAWEI.png 41KB

end.png 876B

logo.png 20KB

footer-1.png 16KB

footer-6.png 2KB

1 13B

footer-5.png 11KB

banner-photo1.jpg 51KB

国际.png 4KB

icons.png 192B

超市.png 4KB

footer-4.png 15KB

footer-2.png 20KB

floor

floor1-2-1.png 463B

1 13B

floor1-1.jpg 56KB

floor1-7.jpg 220KB

floor1-0.png 6KB

floor1-8.jpg 211KB

floor1-5.jpg 220KB

floor1-6.jpg 290KB

floor1-3.png 28KB

floor1-2.png 51KB

floor1-4.png 51KB

view.png 1.86MB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡"/> <meta name="description" content="天猫，中国线上购物的地标网站，亚洲超大的综合性购物平台，拥有10万多品牌商家。每日发布大量国内外商品！正品网购，上天猫！天猫千万大牌正品,品类全，一站购，支付安全，退换无忧！理想生活上天猫!"/> <title>天猫tmall.com--理想生活上天猫</title>  <link href="./images/index/icons.png" rel="shortcut icon">  <link rel="stylesheet" href="./css/base.css">  <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./iconfont/iconfont.css"> </head> <body>  <div class="shortcut"> <div class="shortcut-left"> <ul> <li>喵，欢迎来天猫</li> <li><a href="">请登录</a></li> <li><a href="">免费注册</a></li> </ul> </div> <div class="shortcut-right"> <ul> <li class="arrow-icon"><a href="">我的淘宝</a></li> <li><a href="">购物车</a></li> <li class="arrow-icon"><a href="">收藏夹</a></li>  <li></li> <li><a href="">手机版</a></li> <li><a href="">淘宝网</a></li> <li class="arrow-icon"><a href="">商家支持</a></li> <li class="arrow-icon" ><a href="">网站导航</a></li> </ul> </div> </div>   <div class="header"> <img src="./images/index/logo.png" alt=""> <div class="header-search"> <input type="text" value="搜索天猫商品/品牌/店铺"><button type='submit'>搜索</button> </div> </div>   <div class="nav"> <div class="dropdown"> <div class="dt">商品分类</div> <div class="dd"> <ul> <li><a href="">女装</a> /<a href="">内衣</a></li> <li><a href="">男装</a> /<a href="">运动户外</a></li> <li><a href="">女鞋</a> /<a href="">男鞋</a> /<a href="">箱包</a></li> <li><a href="">美妆</a> /<a href="">个人护理</a></li> <li><a href="">腕表</a> /<a href="">眼镜</a> /<a href="">珠宝饰品</a></li> <li><a href="">手机</a> /<a href="">数码</a> /<a href="">电脑办公</a></li> <li><a href="">母婴玩具</a></li> <li><a href="">零食</a> /<a href="">茶酒</a> /<a href="">进口食品</a></li> <li><a href="">生鲜水果</a></li> <li><a href="">大家电</a> /<a href="">生活电器</a></li> <li><a href="">家具建材</a></li> <li><a href="">汽车</a> /<a href="">配件</a> /<a href="">用品</a></li> <li><a href="">家纺</a> /<a href="">家饰</a> /<a href="">鲜花</a></li> <li><a href="">医药保健</a></li> <li><a href="">厨具</a> /<a href="">收纳</a> /<a href="">宠物</a></li> <li><a href="">图书音像</a></li> </ul> </div> </div> <div class="navitems"> <a href=""><img src="./images/index/超市.png" alt=""></a> <a href=""><img src="./images/index/国际.png" alt=""></a> <a href="">天猫会员</a> <a href=""> 电器城</a> <a href=""> 喵鲜生</a> <a href="">医药馆</a> <a href="">营业厅</a> <a href="">魅力惠</a> <a href=""> 飞猪旅行</a> <a href="">苏宁易购</a> </div> </div>  <div class="main"> <div class="banner"> <ul> <li> <a href=""><img src="./images/index/5G.png" alt=""></a></li> <li> <a href=""><img src="./images/index/HUAWEI.png" alt=""></a></li> </ul> <div class="box"> <div></div> <div></div> <div></div> <div></div> </div> </div>  <div class="recom"> <div><p>品牌闪购<span class="recom1">BRAND SALE</span></p> <a href=""><img src="./images/recom/brand1.jpg" alt=""></a></div> <div><p>聚名品<span class="recom1">LUXURY CHANNEL</span> <span class="recom2">更多</span></p> <a href=""><img src="./images/recom/brand2.jpg" alt=""></a></div> <div><p>品牌活动<span class="recom1">BRAND ACTIVITY</span> <span class="recom2">更多</span></p> <a href=""><img src="./images/recom/brand3.jpg" alt=""></a></div> </div> <div class="brand"><img src="./images/recom/brand4.png" alt=""></div>   <div class="floor">  <div class="floor1"> <div class="floor1-title"><img src="./images/floor/floor1-0.png" alt=""></div> <div class="floor1-commodity1"><a href=""><img src="./images/floor/floor1-1.jpg" alt=""></a></div> <ul class="total"> <li class="floor1-commodity2" > <div> <ul class="lefttop"> <li> <div>今日疯抢</div> <div>量贩装</div> </li> <li> <div class="arrowl"> <div><img src="./images/floor/floor1-2-1.png" alt=""></div> <p class="arrowl_s">爆款直降</p> <p class="arrowl_x">精致生活</p> </div> <div class="arrowr"></div> </li> </ul> </div> <div> <a href=""><img src="./images/floor/floor1-3.png" alt=""></a> <p class="name">天润酸奶（百香果）<br> 180g/袋</p> <p class="price">¥ 6.6</p> </div> <div> <a href=""><img src="./images/floor/floor1-4.png" alt=""></a> <p class="name">梅峰衣架衣架子衣服<br>架10只凹槽防滑衣架</p> <p class="price">¥ 7.9</p> </div> </li> <li class="floor1-commodity3"> <div> <a href=""><img src="./images/floor/floor1-5.jpg" alt=""></a> <p class="name">今麦郎麻辣香锅辣面<br>120g*5连包方便面速</p> <p class="price"

评论收藏

内容反馈

版权申诉