前端基础---淘宝商城练习
作者：互联网
淘宝商城静态页面布局的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="favicon.ico">
<base target="_blank">
<!-- base标签的作用相当于设置一个基础url，只能出现一个；之后在a标签或者其他标签中的href都在base基础上直接往后写名字就行 -->
</head>
<body>
<!-- 头部菜单信息 -->
<!-- 大（父级）容器需要清除浮动流 -->
<div id="headMessage" class="layer clearfix">
<ul class="fl">
<li class="title">
<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>
</li>
<li>
<span class="iconfont mr5 c4"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#" class="store"><span class="iconfont mr5">㐲</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 mr5 c4"></span>
<a href="">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
<!-- 头部广告 -->
<!-- 值得学习的无嵌套结构来实现图片和文字的左右被包裹水平排列 -->
<!-- h3标签一般用于页面中的板块标题,h4标签用于板块内容标题;h h6用于板块嵌套,注意pc端行内元素不能嵌套块级元素,
移动端为了增加用户的点击面积可以这么写 -->
<!-- emmet插件可以提高代码书写效率,只要熟悉其语法规则 -->
<div id="headAd">
<div class="layer clearfix">
<a href="#" class="go fl">
<img src="images/go.png" alt="">
</a>
<ul class="fr ">
<!-- 下面这一段li内容可以用emmet语法实现 li.item$*5>a>img[src=images/adimg_0$.jpg] -->
<li class="item1">
<a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a>
<h3><a href="#">电视专场</a></h3>
<p><a href="#">最高降1999</a></p>
</li>
<li class="item2">
<a href="#" class="fr"><img src="images/adimg_02.jpg" alt=""></a>
<h3><a href="#">厨房专场</a></h3>
<p><a href="#">最高降199</a></p>
</li>
<li class="item3">
<a href="#" class="fr"><img src="images/adimg_03.jpg" alt=""></a>
<h3><a href="#">洗衣专场</a></h3>
<p><a href="#">最高降399</a></p>
</li>
<li class="item4">
<a href="#" class="fr"><img src="images/adimg_04.jpg" alt=""></a>
<h3><a href="#">电器专场</a></h3>
<p><a href="#">最高降2999</a></p>
</li>
<li class="item5">
<a href="#" class="fr"><img src="images/adimg_05.jpg" alt=""></a>
<h3><a href="#">电子专场</a></h3>
<p><a href="#">最高降899</a></p>
</li>
</ul>
</div>
</div>
<!-- 头部搜索 -->
<!-- 这里学习以图换字的技术 -->
<div id="headSearch">
<div class="clearfix layer">
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="code fr">
<span class="iconfont close"></span>
<span class="c5">手机淘宝</span>
<img src="./images/code.png" alt="">
</div>
<div class="search">
<ul class="searchTab clearfix">
<li class="default">宝贝</li>
<li class="active"> 天猫</li>
<li class="active">店铺</li>
</ul>
<!-- 这里下面设置表单的作用是为了把搜素的内容和后端数据库联系起来 -->
<div class="searchContent clearfix">
<form action="#">
<div class="searchBox fl">
<input type="text">
<div class="placeholder">
<i class="iconfont"></i>
<span>网红裤腰带 洋气 国际范 9.9包邮</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="clearfix layer">
<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="clearfix layer">
<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>
<!-- 两个图片容器 -->
<div class="img1Box fr">
<div class="pic fl">
<div class="img">
<a href="#"><img src="./images/pic_01.jpg" alt=""></a>
</div>
<button class="iconfont leftBtn"></button>
<button class="iconfont rightBtn"></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/ad_02.jpg" alt=""></a>
</div>
</div>
<div class="img2Box fr">
<div class="pic fl">
<div class="picTitle">
<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/pic_02.jpg" alt=""></a><a href="#"><img src="./images/pic_03.jpg" alt=""></a>
</div>
<button class="iconfont leftBtn"></button>
<button class="iconfont rightBtn"></button>
</div>
<div class="ad fr">
<p class="title">今日特卖</p>
<a href="#"><img src="./images/ad_03.jpg" 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/news_img_01.jpg" alt=""></a>
<h4><a href="#">微漫酱访谈第三期：超萌舞见弥音音！</a></h4>
<p><a href="#">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞剑小姐姐来做客我们的访谈事，
她就是弥音音！</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/avatar.jpg" alt=""></a>
<!-- 注意：虽然img是行内元素，它没有独占一行，但也是替换元素，具有内置的宽高属性，所以可以设置宽高 -->
<p class="username">Hi！你好</p>
<p class="members">
<a href="#" class="gold">领金币抵钱</a>
<a href="#" class="club">会员俱乐部</a>
</p>
<div class="btn">
<button class="login bd">登录</button>
<button class="register bd">注册</button>
<button class="store bd">开店</button>
</div>
</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="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li>
<li><a href="#">天猫618五折卖车</a></li>
<li><a href="#">天猫618直播间观看指南</a></li>
</ul>
</div>
<!-- 图标区域 -->
<!-- 用表格可以节省代码，格子的宽度会自动计算，防止间隙的设置麻烦问题 -->
<table class="icon">
<tr>
<td class="item1">
<a href="#">
<span></span>
<i>充话费</i>
</a>
</td>
<td class="item2">
<a href="#">
<span></span>
<i>旅行</i>
</a>
</td>
<td class="item3">
<a href="#">
<span></span>
<i>车险</i>
</a>
</td>
<td class="item4">
<a href="#">
<span></span>
<i>游戏</i>
</a>
</td>
</tr>
<tr>
<td class="item5">
<a href="#">
<span></span>
<i>彩票</i>
</a>
</td>
<td class="item6">
<a href="#">
<span></span>
<i>电影</i>
</a>
</td>
<td class="item7">
<a href="#">
<span></span>
<i>酒店</i>
</a>
</td>
<td class="item8">
<a href="#">
<span></span>
<i>理财</i>
</a>
</td>
</tr>
<tr>
<td class="item9">
<a href="#">
<span></span>
<i>找服务</i>
</a>
</td>
<td class="item10">
<a href="#">
<span></span>
<i>演出</i>
</a>
</td>
<td class="item11">
<a href="#">
<span></span>
<i>水电煤</i>
</a>
</td>
<td class="item12">
<a href="#">
<span></span>
<i>火车票</i>
</a>
</td>
</tr>
</table>
<!-- 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/app_01.webp" alt=""></a></li>
<li><a href="#"><img src="./images/app_02.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_03.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_04.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_05.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_06.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_07.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/app_08.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_09.png" alt=""></a></li>
<li><a href="#"><img src="./images/app_10.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 有好货与爱逛街 -->
<div class="layer clearfix mt10">
<!-- 有好货 -->
<div class="goods fl">
<div class="head clearfix">
<h3 class="fl">
<img src="./images/goods.png" alt="有好货">
<span class="iconfont"></span>
<i>与品质生活不期而遇</i>
</h3>
<a href="#" class="fr change">换一换</a>
</div>
<ul class="list">
<li>
<a href="#"><img src="./images/shop_img_01.jpg" alt=""></a>
<h4><a href="#">max破产都要买的口红</a></h4>
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>5950 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_02.jpg" alt=""></a>
<h4><a href="#">max破产都要买的口红</a></h4>
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>5950 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_03.jpg" alt=""></a>
<h4><a href="#">max破产都要买的口红</a></h4>
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>5950 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_04.jpg" alt=""></a>
<h4><a href="#">max破产都要买的口红</a></h4>
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>5950 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_05.jpg" alt=""></a>
<h4><a href="#">max破产都要买的口红</a></h4>
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>5950 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_06.jpg" alt=""></a>
<h4><a href="#">max破产都要买的口红</a></h4>
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>5950 人说好</i>
</a>
</li>
</ul>
</div>
<!-- 爱逛街 -->
<div class="goods fr shopping">
<div class="head clearfix">
<h3 class="fl">
<img src="./images/shopping.png" alt="爱逛街">
<span class="iconfont"></span>
<i>献给聪明可爱的你</i>
</h3>
<a href="#" class="fr change">换一换</a>
</div>
<ul class="list">
<li>
<a href="#"><img src="./images/shop_img_07.jpg" alt=""></a>
<!-- <h4><a href="#">max破产都要买的口红</a></h4> -->
<p class="text">
<span class="iconfont"></span>
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会</a>
</p>
<a href="#" class="comment">
<span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_08.jpg" alt=""></a>
<!-- <h4><a href="#">max破产都要买的口红</a></h4> -->
<p class="text">
<span class="iconfont"></span>
<a href="#">
【饰悟】925纯银小花迷你耳钉女耳环女气质复古会
</a>
</p>
<a href="#" class="comment">
<span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01
</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_09.jpg" alt=""></a>
<!-- <h4><a href="#">max破产都要买的口红</a></h4> -->
<p class="text">
<span class="iconfont"></span>
<a>
【饰悟】925纯银小花迷你耳钉女耳环女气质复古会
</a>
</p>
<a href="#" class="comment">
<span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01
</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_10.jpg" alt=""></a>
<!-- <h4><a href="#">max破产都要买的口红</a></h4> -->
<p class="text">
<span class="iconfont"></span>
<a href="#">
【饰悟】925纯银小花迷你耳钉女耳环女气质复古会
</a>
</p>
<a href="#" class="comment">
<span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01
</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_11.jpg" alt=""></a>
<!-- <h4><a href="#">max破产都要买的口红</a></h4> -->
<p class="text">
<span class="iconfont"></span>
<a href="#">
【饰悟】925纯银小花迷你耳钉女耳环女气质复古会
</a>
</p>
<a href="#" class="comment">
<span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01
</i>
</a>
</li>
<li>
<a href="#"><img src="./images/shop_img_12.jpg" alt=""></a>
<!-- <h4><a href="#">max破产都要买的口红</a></h4> -->
<p class="text">
<span class="iconfont"></span>
<a href="#">
【饰悟】925纯银小花迷你耳钉女耳环女气质复古会
</a>
</p>
<a href="#" class="comment">
<span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01
</i>
</a>
</li>
</ul>
</div>
</div>
<div id="tool">
<span class="iconfont"></span>
<div class="btn">
<a href="#" class="item1 active c4">爱逛 好货</a>
<a href="#" class="item2 c5">好店 直播</a>
<a href="#" class="item3 c6">品质 特色</a>
<a href="#" class="item4 c7">实惠 热卖</a>
<a href="#" class="item5 c4">猜你 喜欢</a>
<a href="#" class="item6">反馈</a>
<a href="#" class="item7">暴恐 举报</a>
</div>
</div>
</body>
<!-- 对于html的页面结构，少用多层嵌套的结构，这是由于搜索引擎的爬虫技术对这种结构中的内容搜索困难，也会导致页面结构臃肿，
给DOM映射的页面结构模型设置多级节点，过于麻烦 -->
<!-- 对于页面设置的基本布局，需要有整体的布局思维，对于父级的大容器需要有id的索引设置，由于id的唯一性这样才能保证后续基本结构的
完整性和中间的float布局对其他元素设置的互不影响 -->
涉及到的相关文件
链接：https://pan.baidu.com/s/1-uWRh76vVGjugblXk_mHQw
提取码：rxrw
复制这段内容后打开百度网盘手机App，操作更方便哦
标签：口红,--,max,---,&#,xe50c,淘宝,破产,商城 来源： https://blog.csdn.net/m0_51123132/article/details/116073676