淘宝静态页面
HTML部分：
<!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">
<link rel="stylesheet" href="Pro2.1.css"> //引入外部CSS文件(大体样式)
<link rel="stylesheet" href="reset.css"> //引入外部CSS文件(框架样式)
<link rel="icon" href="images/taobao.ico"> //引入页面图标
<base target="_blank"> //在新标签页或窗口打开链接
<title>淘宝网 - 淘! 我喜欢</title> //页面名称
</head>
<body>
<!-- 头部信息 -->
<div id="headmessage" class="clearfix layer">
<ul class="fl">
<li>
<span>中国大陆</span>
<span class="iconfont arrow"></span>
</li>
<li class="mr7">
<a href="#" class="login mr7">亲，请登录</a>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">手机逛淘宝</a>
</li>
</ul>
<ul class="fr">
<li>
<a href="#">我的淘宝</a>
<span class="iconfont arrow"></span> //引用iconfont(阿里巴巴图标矢量库)
</li>
<li>
<span class="iconfont mr5 c4"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#"><span class="iconfont mr5 store">󰅄</span>收藏夹</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li class="line">|</li>
<li>
<a href="#">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont c4 mr5"></span>
<a href="#">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
<!-- 头部广告 -->
<div id="headad">
<div class="layer clearfix">
<a href="#" class="fl go"><img src="../taobao/images/bilibili.jpg" alt=""></a>
<ul class="fr">
<li class="item1">
<a href="#" class="fr"><img src="images/sj1.jpg" alt=""></a>
<h3><a href="#">大牌手机</a></h3>
<p><a href="#">最少涨5000</a></p>
</li>
<li class="item2">
<a href="#" class="fr"><img src="images/jj2.jpg" alt=""></a>
<h3><a href="#">联名蛋挞</a></h3>
<p><a href="#">贵到吃不起</a></p>
</li>
<li class="item3">
<a href="#" class="fr"><img src="images/jj3.jpg" alt=""></a>
<h3><a href="#">大厂电器</a></h3>
<p><a href="#">买完就退货</a></p>
</li>
<li class="item4">
<a href="#" class="fr"><img src="images/jj4.jpg" alt=""></a>
<h3><a href="#">厨房用具</a></h3>
<p><a href="#">吃到放锌菜</a></p>
</li>
<li class="item5">
<a href="#" class="fr"><img src="images/jj1.jpg" alt=""></a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">看完就近视</a></p>
</li>
</ul>
</div>
</div>
<!-- 头部搜索 -->
<div id="headsearch">
<div class="clearfix layer">
<!-- <h1><a href="#"><img src="images/logo1.png" alt="淘宝网"></a></h1> -->
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="code fr">
<span class="iconfont close"></span>
<span class="c5">手机淘宝</span>
<img src="images/logo2,png.webp" alt="">
</div>
<div class="search">
<ul class="searchtab clearfix">
<li class="active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="searchcontent clearfix">
<form action="#">
<div class="searchbox fl">
<input type="text">
<div class="placeholder">
<i class="iconfont"></i>
<span>网红裤腰带 洋气 国际范 穿完就狗带</span>
</div>
<span class="iconfont imgsearch"></span>
</div>
<div class="btn fl">
<button type="submit">搜索</button>
</div>
</form>
</div>
<div class="hotkey">
<a href="#" class="c5">积木</a>
<a href="#">网线</a>
<a href="#" class="c5">爬行垫</a>
<a href="#">时尚连衣裙</a>
<a href="#">男士T恤</a>
<a href="#" class="c5">时尚休闲裤</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>
</div>
<!-- 导航内容 -->
<div id="nav" class="layer clearfix">
<h2 class="fl">主题市场</h2>
<ul>
<li class="size"><a href="#">天猫</a></li>
<li class="size"><a href="#">巨划算</a></li>
<li class="size"><a href="#">天猫超市</a></li>
<li class="line">|</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 class="line">|</li>
<li><a href="#">飞猪旅行</a></li>
<li><a href="#">智能生活</a></li>
<li><a href="#">苏宁易购</a></li>
</ul>
</div>
<!-- 首屏内容 -->
<div id="firstscreen" class="layer clearfix">
<!-- 左边的内容 -->
<div class="firstleft fl">
<!-- 侧边导航 -->
<div class="sidenav fl">
<ul>
<li>
<a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span class="iconfont fr"></span>
</li>
<li>
<a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span class="iconfont fr"></span>
</li>
</ul>
</div>
<!-- 图片1容器 -->
<div class="img1box fr">
<div class="pic fl">
<div class="img">
<a href="#"><img src="images/tbnew1.png" alt=""></a>
</div>
<button class="iconfont leftbt"></button>
<button class="iconfont rightbt"></button>
<div class="circle">
<span class="active"></span><span></span><span></span><span></span><span></span>
</div>
</div>
<div class="ad fr">
<a href="#"><img src="images/tbnew2.png" alt=""></a>
</div>
</div>
<!-- 图片2容器 -->
<div class="img2box fr">
<div class="pic fl">
<div class="pictt">
<div class="text clearfix">
<span class="fl bg">理想生活上天猫</span>
<span class="fr"><i>1</i>/6</span>
</div>
<div class="line">
<span></span>
</div>
</div>
<div class="img">
<a href="#"><img src="images/tbnew3.png" alt=""></a><a href="#"><img src="images/tbnew4.png" alt=""></a>
</div>
<button class="iconfont leftbt"></button>
<button class="iconfont rightbt"></button>
</div>
<div class="ad fr">
<p class="title">今日特卖</p>
<a href="#"><img src="images/tbnew6.png" alt=""></a>
</div>
</div>
<!-- 淘宝头条 -->
<div class="news fl">
<div class="hd fl">
<h3>淘宝头条</h3>
<p>让你的生活更有趣</p>
</div>
<div class="newlist fr">
<div class="item">
<a href="#" class="fl img"><img src="images/tbtt.png" alt=""></a>
<h4><a href="#">岛市老八又出新作品:地瓜地瓜还是地瓜</a></h4>
<p><a href="#">梦cei吐露蒙卡,蒙cei吐露蒙cei卡,大地瓜那么小地瓜,一块钱儿能买仨</a></p>
<a href="#" class="more">更多</a>
</div>
</div>
</div>
</div>
<!-- 右边的内容 -->
<div class="firstright fr">
<!-- 用户 -->
<div class="user">
<a href="#" class="avatar"><img src="images/tbuser.png" alt=""></a>
<p class="username">Hi!你好</p>
<p class="members">
<div class="bt">
<button class="login">登录</button>
<button class="register">注册</button>
<button class="shop">开店</button>
</div>
</p>
</div>
<!-- 举报 -->
<a href="#" class="tipoff">
<span>网上有害信息举报专区</span><i class="iconfont"></i>
</a>
<!-- 公告区 -->
<div class="notice">
<ul class="title">
<li class="active"><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>
<ul class="content clearfix">
<li class="item1"><a href="#">淘宝平台打击流量造假,黑公关,网络水军公告</a></li>
<li><a href="#">关于推进o泡乱象的通知</a></li>
<li><a href="#">奥运知识产权解读</a></li>
</ul>
</div>
<!-- 图标区域 -->
<div class="ad1">
<a href="#"><img src="images/tbgg.png" alt=""></a>
</div>
<div class="ad2">
<div class="adcontent">
<a href="#">
<i class="iconfont">󰅄</i><p>收藏的宝贝</p>
</a>
</div>
<div class="adcontent">
<a href="#">
<i class="iconfont"></i><p>买过的店铺</p>
</a>
</div>
<div class="adcontent">
<a href="#">
<i class="iconfont"></i><p>收藏的店铺</p>
</a>
</div>
<div class="adcontent">
<a href="#">
<i class="iconfont"></i><p>我的足迹</p>
</a>
</div>
</div>
<!-- APP -->
<div class="app">
<div class="title clearfix">
<h3 class="fl">阿里APP</h3>
<a href="#" class="fr">更多</a>
</div>
<ul class="appicon">
<li><a href="#"><img src="images/adlogo1.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo2.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo3.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo4.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo5.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo6.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo7.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo8.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo9.png" alt=""></a></li>
<li><a href="#"><img src="images/adlogo10.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 有好货与爱逛街 -->
<div id="layer">
</div>
<!-- 右侧固定定位导航 -->
<div id="tool">
<span class="iconfont"></span>
<div class="btn">
<a href="#" class="c4 active">爱逛 好货</a>
<a href="#" class="c5">好店 直播</a>
<a href="#" class="c6">品质 特色</a>
<a href="#" class="c7">实惠 特卖</a>
<a href="#" class="c4">猜你 喜欢</a>
<a href="#" class="item6">反馈</a>
<a href="#" class="">暴恐 举报</a>
</div>
</div>
</body>
</html>
6797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
