（⼀）淘宝⾸页的代码（周六⼀天敲出来的）html结构展⽰
<!DOCTYPE html>
<html>
<head>
<title>淘宝⽹-淘！我喜欢</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
<!--头部：中国⼤陆版块-->
<div id="chdalu">
<div id="head_wrap1">
<!--左边模块-->
<div id="left_chdalu">
<ul>
<li><a href="">中国⼤陆</a></li>
<li><a href="">亲，请登录</a></li>
<li><a href="">免费注册</a></li>
<li><a href="">⼿机逛淘宝</a></li>
</ul>
</div>
<!--右边模块-->
<div id="rig_chdalu">
<li><a href="">我的淘宝</a></li>
<li><a href="">购物车</a></li>
<li><a href="">收藏夹</a></li>
<li><a href="">商品分类</a></li>
<li id="shuxian">|</li>
<li><a href="">千⽜卖家中⼼</a></li>
<li><a href=""></a></li>
<li><a href="">⽹站导航</a></li>
</div>
</div>
</div>
<!--淘⼩铺版块-->
<div id="xiaopu">
<a href=""><img src="upload/taoxiaopu.png" width="1190px" alt="淘⼩铺"/></a>
</div>
<!--淘宝搜索栏版块-->
<div id="tbcom">
<div id="tbcom_wrap">
<!--淘宝logo-->
<div id="tblogo">
<h1>
<a href="www.taobao/?spm=a21bo.2017.201857.1.5af911d9SiQ4jf"></a>
</h1>
</div>
<!--宝贝天猫店铺搜索栏-->
<div id="search_box">
<div id="words">
<ul>
<li>宝贝</li>
<li>天猫</li>
网页设计html代码大全美食
<li>店铺</li>
</ul>
</div>
<!--左边的搜索栏右边的按钮-->
<div id="searchbar">
<input type="text" placeholder="p40⼿机壳"/>
<button>搜索</button>
</div>
<!--新款连⾐裙...沙发-->
<!--新款连⾐裙...沙发-->
<a href="">新款连⾐裙</a>
<a href="">四件套</a>
<a href="">潮流T恤</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>
<a href="">时尚⼥包</a>
<a href="">沙发</a>
</div>
<!--⼿机淘宝-->
<div id="phonetb">
<a href="">
<span>⼿机淘宝</span>
<img src="upload/phonetb.png" alt="⼿机淘宝下载"/>
</a>
<!--⼩×号-->
<div id="x">×
</div>
</div>
</div>
</div>
<!--引⼊版⼼版块-->
<div class="typearea">
<!--主题市场版块-->
<div id="mkt">
<!--市场模块的左边版块商品列表-->
<div id="left_mkt">
<!--左边版块的上部-->
<div id="top_left_mkt">主题市场</div>
<!--左边版块的下部-->
<div id="btm_left_mkt">
<ul>
<li><a href="">⼥装</a>/<a href="">男装</a>/<a href="">内⾐</a><span>></span></li> <li><a href="">鞋靴</a>/<a href="">箱包</a>/<a href="">配件</a><span>></span></li> <li><a href="">童装玩具</a>/<a href="">孕产</a>/<a href="">⽤品</a><span>></span></li> <li><a href="">家电</a>/<a href="">数码</a>/<a href="">⼿机</a><span>></span></li> <li><a href="">美妆</a>/<a href="">洗护</a>/<a href="">保健品</a><span>></span></li> <li><a href="">珠宝</a>/<a href="">眼镜</a>/<a href="">⼿表</a><span>></span></li> <li><a href="">运动</a>/<a href="">户外</a>/<a href="">乐器</a><span>></span></li> <li><a href="">游戏</a>/<a href="">动漫</a>/<a href="">影视</a><span>></span></li> <li><a href="">美⾷</a>/<a href="">⽣鲜</a>/<a href="">零⾷</a><span>></span></li> <li><a href="">鲜花</a>/<a href="">宠物</a>/<a href="">农资</a><span>></span></li> <li><a href="">⾯料集采</a>/<a href="">装修</a>/<a href="">建材</a><span>></span></li> <li><a href="">家具</a>/<a href="">家饰</a>/<a href="">家纺</a><span>></span></li> <li><a href="">汽车</a>/<a href="">⼆⼿车</a>/<a href="">⽤品</a><span>></span></li> <li><a href="">办公</a>/<a hr
ef="">DIY</a>/<a href="">五⾦电⼦</a><span>></span></li> <li><a href="">百货</a>/<a href="">餐厨</a>/<a href="">家庭保健</a><span>></span></li> <li><a href="">学习</a>/<a href="">卡券</a>/<a href="">本地服务</a><span>></span></li> </ul>
</div>
</div>
<!--主题市场右边模块-->
<div id="rig_mkt">
<!--右边模块的头部长条-->
<div id="head_rig_mkt">
<ul id ="left_head_rig_mkt">
<li><a href="">天猫</a></li>
<li><a href="">聚划算</a></li>
<li><a href="">天猫超市</a></li>
</ul>
</ul>
<ul id ="rig_head_rig_mkt">
<li><span>|</span></li>
<li><a href="">淘抢购</a></li>
<li><a href="">电器城</a></li>
<li><a href="">司法拍卖</a></li>
<li><a href="">兴农脱贫</a></li>
<li><span>|</span></li>
<li><a href="">飞猪旅⾏</a></li>
<li><a href="">智能⽣活</a></li>
<li><a href="">苏宁易购</a></li>
</ul>
</div>
<!--右边模块的body-->
<div id="body_rig_mkt">
<!--两个焦点图 focus -->
<div id="focus_brm">
<!--焦点图1 focus1 -->
<div id="focus1_brm">
<a href=""><img src="upload/focus1_01.jpg"/></a>
</div>
<!--焦点图2 focus2-->
<div id="focus2_brm">
<div id="up_focus2_brm"><span>理想⽣活上天猫</span><i>1/6</i>
</div>
<div id="btm_focus2_brm">
<a href=""><img src="upload/focus2_0101.jpg"/></a>
<a href=""><img src="upload/focus2_0102.jpg"/></a>
</div>
</div>
</div>
<!--卖 mai-->
<div id="mai_brm">
<!--特卖 temai-->
<div id="temai_brm">
<a href=""><img src="upload/temai.webp.jpg" width="160px" alt="特卖"/></a>
</div>
<div class="daymai">今⽇热卖</div>
<!--热卖 remai-->
<div id="remai_brm">
<a href=""><img src="upload/remai.jpg" height="202px" alt="热卖"/></a>
</div>
</div>
<!--右边body rig_brm-->
<div id="rig_brm">
<div id="rig_brm1">
<div id="toux_rig_brm1">
<div id="yuan_toux_rig_brm1">
<a href=""><img src="upload/toux.jpg"/></a>
</div>
</div>
<div id="nihao_rig_brm1">Hi!你好
</div>
<div id="club_rig_brm1">
<a href="">领淘⾦币抵钱</a>
<a href="">会员俱乐部</a>
</div>
<div id="denglu_rig_brm1">
<button>登录</button>
<button>注册</button>
<button>开店</button>
</div>
</div>
<a href id="rig_brm2">
<span>⽹上有害信息举报专区</span>
<div></div>
<div></div>
</a>
<div id="rig_brm3">
</div>
<div id="rig_brm4">
</div>
</div>
</div>
</div>
</div>
<!--有好货版块-->
<div id="goods">
<div id="left_goods">
<div id="inner_left_goods">
<div id="head_ilg">
<img src="upload/left_goods.png" title="有好货"/>
<p>
<i>⼆维码</i>
<span>与品质⽣活不期⽽遇</span>
</p>
</div>
<div id="body_ilg">
<ul>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggs_pic1.webp.jpg"/></div> <span>圣罗兰⼝红礼盒</span>
</div>
<p>多款⾊号多种选择，轻松打</p>
<div class="sayok">8⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggs_pic2.webp.jpg"/></div> <span>⼤⾖家⽅头奶奶鞋</span>
</div>
<p>⼀脚蹬设计，⽅便⽇常的穿</p>
<div class="sayok">3758⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggs_pic3.webp.jpg"/></div> <span>孩⼦早教中，这款早教</span>
</div>
<p>不同纹理的⼩球，适合宝宝</p>
<div class="sayok">47⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggs_pic4.webp.jpg"/></div> <span>佳宝路转⾓⽔槽</span>
</div>
<p>304不锈钢，表⾯光洁坚固</p>
<div class="sayok">121⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li">
<div id="head_li01"><img src="upload/ggs_pic5.webp.jpg"/></div> <span>Coca-Cola 可乐瓶T恤</span>
</div>
<p>简约的纯⾊基调，宣扬⾃由</p>
<div class="sayok">35⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggs_pic6.webp.jpg"/></div> <span>Bite 唇釉</span>
</div>
<p>简洁的深灰⾊包装，低调但</p>
<div class="sayok">13⼈说好</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="rig_goods">
<div id="inner_rig_goods">
<div id="head_irg">
<img src="upload/rig_goods.png" title="爱逛街"/>
<p>献给聪明可爱的你</p>
<a href="">更多></a>
</div>
<div id="body_irg">
<ul>
<li>
<a href="">
<div id="head_li">
<div id="head_li001"><img src="upload/ggsr_pic1.webp.jpg"/></div>
<i>圣罗兰⼝红礼盒</i>
</div>
<p>多款⾊号多种选择，轻松打</p>
<div class="sayok">8⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggsr_pic2.webp.jpg"/></div>
<i>⼤⾖家⽅头奶奶鞋</i>
</div>
<p>⼀脚蹬设计，⽅便⽇常的穿</p>
<div class="sayok">3758⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggsr_pic3.webp.jpg"/></div>
<i>孩⼦早教中，这款早教</i>
</div>
<p>不同纹理的⼩球，适合宝宝</p>
<div class="sayok">47⼈说好</div>
</a>
</li>
<li>
<a href="">
<div id="head_li">
<div id="head_li01"><img src="upload/ggsr_pic4.webp.jpg"/></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。