<!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>
<!-- 引入favicon图标(网页图标) -->
<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>
<!-- 快捷导航栏 start -->
<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>
<!-- 快捷导航栏 end -->
<!-- header头部模块制作 start -->
<div class="header">
<img src="./images/index/logo.png" alt="">
<div class="header-search">
<input type="text" value="搜索 天猫 商品/品牌/店铺"><button type='submit'>搜索</button>
</div>
</div>
<!-- header头部模块制作 end -->
<!-- nav模块制作 start -->
<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>
<!-- nav模块制作 end -->
<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>
<!-- 推荐模块 start-->
<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>
<!-- 推荐模块 end-->
<!-- 楼层区域制作start -->
<div class="floor">
<!-- 1楼家用电器楼层 -->
<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"
没有合适的资源?快使用搜索试试~ 我知道了~
基于HMTL CSS实现仿天猫首页的静态网页源码
共36个文件
png:20个
jpg:9个
1:3个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 2 下载量 88 浏览量
2021-10-16
01:54:32
上传
评论 1
收藏 3.39MB ZIP 举报
温馨提示
基于HMTL CSS实现仿天猫首页的静态网页源码
资源推荐
资源详情
资源评论
收起资源包目录
基于HMTL CSS实现仿天猫首页的静态网页源码.zip (36个子文件)
基于HMTL CSS实现仿天猫首页的静态网页源码
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
共 36 条
- 1
资源评论
- weixin_613575332022-03-16用户下载后在一定时间内未进行评价,系统默认好评。
- 灬大雾灬2022-12-22感谢资源主的分享,这个资源对我来说很有用,内容描述详尽,值得借鉴。
mYlEaVeiSmVp
- 粉丝: 1887
- 资源: 19万+
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功