HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览
模拟淘宝首页（静态）
一、项目重难点
样式重置：在实际开发过程中，我们往往会新建一个单独的CSS文件（reset.css），用于对应HTML页面的样式重置。line-height属性的不同值的区别body {
font-size: 16px
line-height: normal; /* 默认。设置合理的行间距。其子级元素继承的是：同下所示 */
line-height: 15px; /* 行高为：15px ； 其子级元素继承的是：同下所示 */
line-height: 100%; /* 行高为：16*200%=32px ； 其子级元素继承的是：同下所示 */
line-height: 5em; /* 行高为：16*5=80px ； 其子级元素继承的是：该父级元素计算后的值，即如果其子元素的字体大小变为了10px，那么该子元素的行高还是为：其父级设置的80px */
line-height: 1.5; /* 行高为：16*1.5=24px ； 其子级元素继承的是：line-height的值，即如果其子元素的字体大小变为了10px，那么该子元素的行高为：10*1.5=15px */
}
CSS @规则/*
@规则
@charset 设置样式表的编码
@import 引入其他样式文件
@media 媒体查询
@font-face 自定义字体
*/
favicon（设置HTML文档标题前面的 logo 小图标）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="icon" href="favicon.ico"> //★★★模拟淘宝商城官网“HTML文档标题”前面的logo小图标。详见下图 ！！！
</head>
<body>
</body>
</html>
base标签// base标签(一个页面只能出现一个base标签)
href="www.baidu/123/"
target="_blank"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="icon" href="favicon.ico">
<base href="www.baidu/123/" target="_blank"> //★★★base标签在HTML页面结构中所处的位置
</head>
<body>
<a href="demo.jpg"></a> //★★★实际href中资源的地址为：www.baidu/123/demo.jpg
</body>
</html>
自定义图标// 自定义图标，即一种文字（@font-face）———— 常用：阿里妈妈-iconfont
在写HTML结构时，能少嵌套的就少嵌套h标签的应用场景// h标签的作用（有利于SEO）
h1: 用于网页中的大标题，或者logo。（一个HTML页面中，h1标签只能用一次）
h2：用于副标题，或者根据实际情况应用
h3：用于某个版块的标题（可以有多个）
h4：用于某个版块的内部出现的标题
h5、h6：用于某个版块内部嵌套的另一个版块的标题等
【注意】a标签与a标签以及块级标签嵌套的场景盒模型的分类盒模型：
1）标准盒模型
总宽度 = border(左右) + width + padding(左右)
总高度 = border(上下) + height + padding(上下)
2）IE混杂模型（怪异盒模型 --> box-sizing: border-box）
总宽度 = width
总高度 = height
【注意】以图换字的两类方法渐变背景色/* 渐变背景色
1）谷歌浏览器、... 、IE 10+
background-image: linear-gradient(to right, #ff9000, #ff5000);
方向(可省略，默认：to bottom), 起始颜色, 结束颜色
2）IE 7、8、9（IE滤镜）
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
起始颜色 结束颜色(rgba) 渐变方向（1：从左往右；2：从上往下）
*/
/* CSS 3.0 中的 过渡效果
transition: background-color 0.3s;
*/
calc() 函数/* 1) width: 1000px;
2) width: calc(100% - 190px); --> 适用于：IE 9+
父级的宽 - 190px ==> 1000px
*/
【注意】"浮动"在对HTML页面布局时的灵活运用rgba()函数/* background-color: rgba(0, 0, 0, 0.5); 适用于：IE 9 及 IE 9+
background-color：#000\\9; 适用于：IE 9 以下的浏览器认识（此处的"\\9"可触发：CSS HACK）
filter: alpha(opacity=30); 透明效果
*/
【注意】子级有浮动，父级一定要清浮动(“三件套”)图片的居中对齐/* 图片居中对齐的两种实现方式：
1）模拟单元格（表格中单元格内的内容都是垂直居中对齐的）
display: table-cell;
vertical: middle;
2）弹性盒模型（适用于：IE 10 和 IE 10+）
display: flex;
justify-content: space-around; 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items: center; 均分垂直方向的间距
*/
CSS Sprites/* 雪碧图（CSS精灵）
1、缩小图标文件的大小
2、减少图片的http请求，减轻服务器的压力，节省带宽
利用：background-position 属性，如下：
background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
注意：设置“位置”的原理
*/
【注意】"相对定位"的应用（相对于自己原来的位置进行定位）使 ul 列表中的所有 li 元素居中对齐/* 当ul列表中的所有li元素需要在父级盒子内部居中显示时，不能用 float: left;
直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block，就可以实现居中显示。
*/
表格布局/* 表格布局（table）
1、边框设置简便
2、单元格内容垂直居中
3、单元格的宽度会自动计算
*/
例如，实现淘宝商城中的以下效果，可以采用“表格”布局： /* 淘宝商城_CSS代码节选示例 */
table {
border-collapse: collapse; /* 边框模式---合并的模式：即两个单元格之间的的边框只需要显示一个就行 */
}
th,td {
padding: 0;
}
/* 表头为th；普通单元格为td；行为tr */
/* 图标区域 */
.firstRight .icon {
width: 100%;
height: 229px;
background-color: #fff;
table-layout: fixed; /* 定义列宽的算法---fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度。 */
}
.firstRight .icon td {
border: 1px solid #f4f4f4;
text-align: center;
}
.firstRight .icon td span {
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
background: url(../images/ico.png) no-repeat;
}
.firstRight .icon td i {
line-height: 34px;
color: #333;
}
.firstRight .icon .item1 span {
background-position: 0 0;
}
.firstRight .icon .item2 span {
background-position: 0 -87px;
}
.firstRight .icon .item3 span {
background-position: 0 -44px;
}
.firstRight .icon .item4 span {
background-position: 0 -132px;
}
.firstRight .icon .item5 span {
background-position: 0 -176px;
}
.firstRight .icon .item6 span {
background-position: 0 -220px;
}
.firstRight .icon .item7 span {
background-position: 0 -264px;
}
.firstRight .icon .item8 span {
background-position: 0 -308px;
}
.firstRight .icon .item9 span {
background-position: 0 -352px;
}
.firstRight .icon .item10 span {
background-position: 0 -396px;
}
.firstRight .icon .item11 span {
background-position: 0 -440px;
}
.firstRight .icon .item12 span {
background-position: 0 -484px;
}
.webp（图片格式）/* .webp 是谷歌开发的一种图片格式，只能用于在网站中显示，其体积相较于普通的图片格式小得多，且图片的清晰度不变
IE不支持、火狐在65以上的版本支持，谷歌支持。
可以通过JS判断用户所用浏览器的版本，以选择相应的图片格式。
*/
实现“词”换行/* word-break: keep-all; 在空格的地方强制换行 */
使用“伪元素”的注意事项/* ::after 和 :after 区别
1) : 表示伪类
2）:: 表示伪元素（是 CSS 3.0 中的标准，IE_8不认识两个冒号，因此为了兼容IE_8，可以直接将伪元素写为 :before 或 :after ）
*/
二、效果图及源码
效果图如下: 源码如下：（获取详细源码及所用素材文件等—请戳我！！！） 1> index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="favicon.ico">
<base target="_blank">
</head>
<body>
<!-- ★ 划分HTML结构的依据：内容、颜色块、间距、边框。★ -->
<!-- 头部信 -->
<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>
</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="images/headAd-logo.png" alt=""></a>
<ul class="fr">
<!-- <li>
<a href="#" class="fr"><img src="images/headAd-list-item-01.png" alt=""></a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li> -->
<li class="item1">
<a href="#" class="fr">
<img src="images/headAd-list-item-01.png" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item2">
<a href="#" class="fr">
<img src="images/headAd-list-item-02.png" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item3">
<a href="#" class="fr">
<img src="images/headAd-list-item-03.png" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item4">
<a href="#" class="fr">
<img src="images/headAd-list-item-04.png" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item5">
<a href="#" class="fr">
<img src="images/headAd-list-item-05.png" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
</ul>
</div>
</div>
<!-- 头部搜索 -->
<div id="headSearch">
<div class="clearfix layer">
<!-- <h1><a href="#"><img src="images/headSearch-logo.gif" 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/headSearch-code.png" 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="#">连衣裙</a>
<a href="#">四件套</a>
<a href="#" class="c5">潮流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>
</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 fl">
<div class="pic fl">
<div class="img">
<a href="#"><img src="images/img1Box-pic-04.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/img1Box-ad-01.jpg" alt=""></a>
</div>
</div>
<!-- 图片2容器 -->
<div class="img2Box fl">
<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/img2Box-pic-03.jpg" alt=""></a>
<a href="#"><img src="images/img2Box-pic-04.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/img2Box-ad-01.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="headline.bbs.taobao/detail.html?postId=8739614">淘宝头条“新品”内容招稿&内容规范【新增钉钉群】</a></h4>
<p><a href="headline.bbs.taobao/detail.html?postId=8739614">各位达人小伙伴：现向各位广泛征集各领域新品内容，优质稿件头条公域将给予曝光扶持!</a></p>
<a href="index.bbs.taobao/home.html" class="more">更多></a>
</div>
</div>
</div>
</div>
<!-- 右边的内容 -->
<div class="firstRight fr">
<!-- 用户 -->
<div class="user">
<a href="#" class="avatar"><img src="images/firstRight-userBox-icon.jpg" alt=""></a>
<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">登录</button>
<button class="register">注册</button>
<button class="shop">登录</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="#">95公益周阿里、腾讯等六家公司同台联合做公益</a></li>
<li><a href="#">淘宝造物节之城市秘密</a></li>
<li><a href="#">聚划算88红包省钱卡</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.png" 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.png" 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 id="iGoodsShopping" 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/goods_img_01.png" alt=""></a>
<h4><a href="#">老铁，这是电吸门，请轻点关门</a></h4>
<p class="text"><a href="#">电吸门可以避免车门未关紧闭带来的安全隐患，这款电吸门，拥有外观、新型专利保障，确保使用安全性，无需改装原车装饰，无需电脑编程及复杂的布线，就能让你毫不费力的关闭车门，体验前所未有的触感，而且门锁闭过程会让你感觉舒适，声音特别轻，告别传统沉闷的巨响。</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>1675 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="images/goods_img_02.png" alt=""></a>
<h4><a href="#">窗台整理架，利用家中每一寸空间</a></h4>
<p class="text"><a href="#">简单易操作的设计，就算是女孩子一个人也完全没有问题。多种尺寸的选择，能满足不同空间与人群的使用需求。可伸缩的同时，移动起来也非常的方便，反复利用更环保。贴心人性化的围栏设计搭配优质耐用的选材，承重力杠杠滴且物品不易滑落，美观又实用。</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>338 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="images/goods_img_03.png" alt=""></a>
<h4><a href="#">“中国造”车睡神器，自驾游更轻松</a></h4>
<p class="text"><a href="#">一般的我们去旅行，自驾的时候酒店都爆满，带上车载折叠床，随时随地将后排升级为车载大床房。如果去前不着村后不着地的地方，更需要车载折叠床来休了。安装简单，扎实牢固，安全贴心而且可以睡下不止一个人哦，不愧是车睡神器，有了它自驾游更轻松了。</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>21 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="images/goods_img_04.png" alt=""></a>
<h4><a href="#">SUSISU 幻境流沙眼影盘</a></h4>
<p class="text"><a href="#">幻境流沙，超级美腻外包装。</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>287 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="images/goods_img_05.png" alt=""></a>
<h4><a href="#">可折叠加厚双面使用榻榻米床垫</a></h4>
<p class="text"><a href="#">可以折叠的榻榻米床垫，收纳不占空间，正反两面都可以使用，同时纯棉材质舒适亲肤，透气性好，保持贴身换将干爽 不粘腻。</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>106 人说好</i>
</a>
</li>
<li>
<a href="#"><img src="images/goods_img_06.png" alt=""></a>
<h4><a href="#">YSL限量眼影银盘</a></h4>
<p class="text"><a href="#">金属边框闪亮眼影盒，彰显低调的奢华之美。</a></p>
<a href="#" class="comment">
<span class="iconfont"></span><i>30 人说好</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/shopping_img_01.png" alt=""></a>
<p class="text">
<span class="iconfont"></span>
<a href="#">绑带英伦雪地靴</a>
</p>
<a href="#" class="comment">
<span><img src="images/shopping_img_01_icon.png" alt=""></span><i>淘***娘</i>
</a>
</li>
<li>
<a href="#"><img src="images/shopping_img_02.png" alt=""></a>
<p class="text">
<span class="iconfont"></span>
<a href="#">极简风的电脑桌收纳也是杠杠的</a>
</p>
<a href="#" class="comment">
<span><img src="images/shopping_img_02_icon.png" alt=""></span><i>小***范</i>
</a>
</li>
<li>
<a href="#"><img src="images/shopping_img_03.png" alt=""></a>
<p class="text">
<span class="iconfont"></span>
<a href="#">你的好友个性卫衣上线，温暖又时髦</a>
</p>
<a href="#" class="comment">
<span><img src="images/shopping_img_03_icon.png" alt=""></span><i>A***U</i>
</a>
</li>
<li>
<a href="#"><img src="images/shopping_img_04.png" alt=""></a>
<p class="text">
<span class="iconfont"></span>
<a href="#">仿真兔毛大翻领皮草大衣</a>
</p>
<a href="#" class="comment">
<span><img src="images/shopping_img_04_icon.png" alt=""></span><i>一***牌</i>
</a>
</li>
<li>
<a href="#"><img src="images/shopping_img_05.png" alt=""></a>
<p class="text">
<span class="iconfont"></span>
<a href="#">百褶小立领</a>
</p>
<a href="#" class="comment">
<span><img src="images/shopping_img_05_icon.png" alt=""></span><i>日***装</i>
</a>
</li>
<li>
<a href="#"><img src="images/shopping_img_06.png" alt=""></a>
<p class="text">
<span class="iconfont"></span>
<a href="#">复古娃娃领格子衬衫</a>
</p>
<a href="#" class="comment">
<span><img src="images/shopping_img_06_icon.png" alt=""></span><i>日***装</i>
</a>
</li>
</div>
</div>
<!-- 右侧固定定位导航 -->
<div id="tool">
<span class="iconfont"></span>
<div class="btn">
<a href="#iGoodsShopping" target="_self" 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>
<!-- 占位符 -->
<br>
<br>
<br>
</body>
</html>
2> index.css/*
@规则
@charset 设置样式表的编码
@import 导入其他样式文件 ---（样式模块化）
@media 媒体查询 --- （eg：移动端适配、...）
@font-face 自定义字体
*/
@import 'reset.css';
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 头部信 */
#headMessage {
height: 35px;
}
#headMessage li {
float: left;
height: 35px;
line-height: 35px;
padding: 0 6px;
font-size: 0;
}
#headMessage a {
color: #6c6c6c;
font-size: 12px;
}
#headMessage a:hover {
color: #f40;
}
#headMessage a:hover span.store {
color: #f40;
}
#headMessage a.login {
color: #f22e00;
}
#headMessage span {
font-size: 12px;
}
#headMessage span.arrow {
margin-left: 7px;
}
#headMessage li strong {
font-size: 12px;
color: #f22e00;
}
#headMessage li span.store {
color: #9c9c9c;
}
#headMessage li.line {
font-size: 12px;
color: #ddd;
}
/* 头部广告 */
#headAd {
background-color: #ff4600;
}
#headAd .go {
display: block;
padding: 10px 10px 10px 15px;
}
#headAd .go img {
width: 80px;
height: 80px;
}
#headAd ul {
padding-top: 13px;
}
#headAd li {
float: left;
width: 209px;
height: 75px;
margin-right: 10px;
padding: 12px 15px 0 15px;
box-sizing: border-box;
/*
盒模型：
1、标准盒模型
总宽度=border(左右)+width+padding(左右)
总高度=border(上下)+width+padding(上下)
2、IE盒模型（怪异盒模型）
总宽度=width
总高度=height
*/
}
#headAd li h3 {
font-size: 20px;
line-height: 28px;
}
#headAd li a {
color: #fff;
display: block;
}
#headAd li p {
font-size: 14px;
line-height: 20px;
}
#headAd li a img {
width: 52px;
height: 52px;
border-radius: 5px;
}
#headAd li.item1 {
background: url(../images/headAd-list-01.png) no-repeat;
}
#headAd li.item2 {
background: url(../images/headAd-list-02.png) no-repeat;
}
#headAd li.item3 {
background: url(../images/headAd-list-03.png) no-repeat;
}
#headAd li.item4 {
background: url(../images/headAd-list-04.png) no-repeat;
}
#headAd li.item5 {
background: url(../images/headAd-list-05.png) no-repeat;
margin-right: 0;
}
/* 头部搜索 */
#headSearch {
background-color: #fff;
padding: 24px 0 10px 0;
}
#headSearch h1 a {
display: block;
width: 190px;
height: 58px;
background: url(../images/headSearch-logo-v1.png) center no-repeat;
text-indent: -9999px;
overflow: hidden;
margin-top: 8px;
}
#headSearch .code {
position: relative;
width: 72px;
height: 86px;
border: 1px solid #eee;
text-align: center;
margin-right: 110px;
}
#headSearch .code img {
width: 62px;
height: 62px;
}
#headSearch .close {
position: absolute;
left: -16px;
top: -1px;
width: 14px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: #ddd;
border: 1px solid #eee;
cursor: pointer;
}
#headSearch .search {
width: 630px;
margin: 0 auto;
}
#headSearch .searchTab {
height: 22px;
padding-left: 17px;
}
#headSearch .search li {
float: left;
width: 36px;
line-height: 22px;
margin-right: 4px;
text-align: center;
color: #f40;
cursor: pointer;
}
#headSearch .search li:hover {
background-color: #ffeee5;
}
#headSearch .search li.active {
color: #fff;
font-weight: bold;
/* 渐变背景---CSS3属性---ie10以上 */
/* 以下是：线性渐变（参数依次为：渐变方向、起始颜色、结束颜色） */
background-image: linear-gradient(to right, #ff9000, #ff5000);
/* IE滤镜（能够向下兼容到ie6）---以下是：线性渐变 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
border-radius: 5px 5px 0 0;
}
#headSearch .searchContent {
height: 40px;
}
#headSearch .searchBox {
position: relative;
width: 554px;
height: 40px;
box-sizing: border-box;
border: 2px solid #ff5000;
border-right: none;
border-radius: 20px 0 0 20px;
overflow: hidden;
}
#headSearch .searchBox input {
width: 490px;
height: 36px;
line-height: 36px;
outline: none;
border: none;
text-indent: 10px;
position: absolute;
z-index: 2;
/* 此处的背景颜色设置为：透明 --- 以便能够看到后面的文字 */
background-color: transparent;
}
#headSearch .searchBox .placeholder {
position: absolute;
top: 6px;
left: 14px;
}
#headSearch .searchBox .placeholder span {
color: #9c9c9c;
vertical-align: 1px;
}
#headSearch .searchBox .imgSearch {
position: absolute;
right: 20px;
top: -2px;
font-size: 28px;
color: #9c9c9c;
cursor: pointer;
}
#headSearch .searchContent button {
width: 74px;
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
color: #fff;
border: none;
/* 设置渐变 */
background-image: linear-gradient(to right, #ff9000, #ff5000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
border-radius: 0 20px 20px 0;
}
#headSearch .hotKey {
height: 25px;
line-height: 25px;
}
#headSearch .hotKey a:hover {
color: #f50;
}
/* 导航 */
#nav h2 {
width: 190px;
height: 30px;
line-height: 30px;
font-size: 16px;
color: #fff;
text-align: center;
background-color: #f50;
}
#nav ul {
margin-left: 190px;
height: 30px;
/* width: 1000px;
width: calc(100% - 190px); */ /* calc(); 支持情况：IE9+ */
/* 设置渐变 */
background-image: linear-gradient(to right, #ff9000, #ff5000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
#nav ul li {
float: left;
line-height: 30px;
margin: 0 7px;
font-size: 14px;
color: #fff;
padding: 0 5px;
position: relative;
}
#nav ul li.size {
font-size: 16px;
}
#nav ul li a {
color: #fff;
font-weight: bold;
}
#nav ul li.line {
margin: 0;
padding: 0;
}
#nav ul li.line::before {
display: none;
}
#nav ul li:hover::before {
content: '';
position: absolute;
width: 23px;
height: 13px;
background-image: url(../images/icon_01.png);
background-position: center;
background-size: contain;
top: -13px;
left: 50%;
margin-left: -12px;
}
/* 首屏内容 */
/* 左边的内容 */
.firstLeft {
width: 890px;
}
/* 侧边导航 */
.firstLeft .sideNav {
width: 190px;
height: 522px;
background: #fff;
border: 1px solid #ff5000;
box-sizing: border-box;
border-top: none;
padding-top: 5px;
padding-bottom: 3px;
}
.firstLeft .sideNav li {
height: 32px;
line-height: 32px;
padding-left: 25px;
padding-right: 7px;
font-size: 14px;
color: #999;
transition: background-color 0.3s;
}
.firstLeft .sideNav li a {
font-size: 14px;
color: #666;
}
.firstLeft .sideNav li span {
font-size: 12px;
}
.firstLeft .sideNav li:hover {
background-color: #ffe4dc;
color: #f50;
}
.firstLeft .sideNav li:hover a {
color: #f50;
}
.firstLeft .sideNav li:hover a:hover {
text-decoration: underline;
}
/* 图片1容器 */
.firstLeft .img1Box {
width: 690px;
height: 282px;
margin-top: 10px;
}
.firstLeft .pic {
width: 520px;
position: relative;
}
.firstLeft .pic button {
width: 20px;
height: 30px;
line-height: 30px;
color: #fff;
cursor: pointer;
border: none;
background-color: rgba(0, 0, 0, .3); /* 支持情况：ie9+ */
background-color: #000\\9; /* 只有ie9以下的ie浏览器认识（CSS-hack） */
filter: alpha(opacity=30); /* 透明 */
position: absolute;
top: 50%;
margin-top: -15px;
display: none;
}
.firstLeft .pic button.leftBtn {
left: 0;
border-radius: 0 15px 15px 0;
}
.firstLeft .pic button.rightBtn {
right: 0;
border-radius: 15px 0 0 15px;
}
.firstLeft .pic:hover button {
display: block;
}
.firstLeft .pic .circle {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
border-radius: 10px;
padding: 3px 0;
font-size: 0;
background-color: rgba(255, 255, 255, .3); /* ie8不支持 */
}
.firstLeft .pic .circle span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
margin: 0 3px;
cursor: pointer;
}
.firstLeft .pic .circle span.active {
background-color: #ff5000;
}
.firstLeft .ad {
width: 160px;
}
.firstLeft .ad img {
width: 160px;
}
/* 图片2容器 */
.firstLeft .img2Box {
width: 690px;
height: 220px;
margin-top: 10px;
}
.firstLeft .img2Box .picTitle {
height: 20px;
}
.firstLeft .img2Box .picTitle .text {
height: 17px;
line-height: 17px;
}
.firstLeft .img2Box .picTitle .text .bg {
background: url(../images/img2Box-picTitle-tianmao.png) no-repeat left;
padding-left: 136px;
color: #666;
}
.firstLeft .img2Box .picTitle .text i {
color: #ff1648;
}
.firstLeft .img2Box .picTitle .line {
height: 3px;
background-color: #ff1648;
position: relative;
}
.firstLeft .img2Box .picTitle .line span {
width: 87px;
height: 3px;
background-color: #000;
position: absolute;
left: 0;
}
.firstLeft .img2Box .img {
width: 520px;
height: 200px;
background-color: #fff;
position: relative;
display: table-cell; /* 对应单元格td 所有内容都能垂直居中显示 */
vertical-align: middle;
/* 弹性盒模型---兼容性: ie10+ */
/* display: flex;
justify-content: space-around;
align-items: center; */
}
.firstLeft .img2Box .img img {
margin: 0 9px;
}
.firstLeft .img2Box .ad .title {
height: 20px;
line-height: 20px;
}
/* 淘宝论坛 */
.firstLeft .news {
width: 890px;
height: 100px;
background: #fff;
margin-top: 10px;
box-sizing: border-box;
padding: 13px 13px 13px 20px;
}
.firstLeft .news .hd {
margin-top: 15px;
}
.firstLeft .news .hd h3 {
width: 129px;
height: 26px;
background: url(../images/taobaoluntan.png) no-repeat;
background-size: contain;
text-indent: -9999px;
overflow: hidden;
}
.firstLeft .news .hd p {
color: #999;
line-height: 24px;
}
.firstLeft .news .newList {
width: 680px;
position: relative;
}
.firstLeft .news .newList .img {
margin-right: 15px;
}
.firstLeft .news .newList .img img {
width: 130px;
height: 73px;
}
.firstLeft .news .newList h4 {
line-height: 28px;
font-size: 16px;
font-weight: normal;
}
.firstLeft .news .newList h4 a {
color: #333;
}
.firstLeft .news .newList h4 a:hover,
.firstLeft .news .newList .more:hover {
color: #ff5000;
}
.firstLeft .news .newList p {
line-height: 18px;
font-size: 14px;
}
.firstLeft .news .newList p a {
color: #999;
}
.firstLeft .news .newList .more {
position: absolute;
top: 0;
right: 0;
color: #999;
}
/* 右边的内容 */
.firstRight {
width: 290px;
margin-top: 10px;
}
/* 用户 */
.firstRight .user {
height: 140px;
padding: 5px;
background: url(../images/firstRight-userBox-bg.png) no-repeat;
background-size: cover;
}
.firstRight .user .avatar {
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.firstRight .user .avatar img {
width: 50px;
height: 50px;
}
.firstRight .user .username {
text-align: center;
line-height: 16px;
}
.firstRight .user .members {
text-align: center;
font-size: 0;
}
.firstRight .user .members a {
display: inline-block;
font-size: 12px;
border-radius: 9px;
padding: 0 10px 0 20px;
margin: 0 2px;
/* background-color: #ffe4dc; */
}
.firstRight .user .members a.gold {
background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
}
.firstRight .user .members a.club {
background: #ffe4dc url(../images/ico.png) 0 -528px no-repeat;
}
.firstRight .user .btn {
text-align: center;
}
.firstRight .user .btn button {
width: 75px;
height: 25px;
line-height: 25px;
margin: 12px 2px 0 2px;
color: #fff;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
/* 设置渐变 */
background-image: linear-gradient(to right, #ff9000, #ff5000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
.firstRight .user .btn button.login {
width: 92px;
}
/* 举报 */
.firstRight .tipOff {
display: block;
height: 26px;
line-height: 26px;
color: #f40;
background: #ffe4dc;
text-align: center;
}
.firstRight .tipOff i {
font-size: 12px;
vertical-align: 1px;
position: relative; /* 相对于原来的位置进行定位，不影响前面文本的居中显示 */
left: 30px;
}
/* 公告区 */
.firstRight .notice {
height: 108px;
background-color: #fff;
}
.firstRight .notice .title {
text-align: center;
font-size: 0;
padding-top: 10px;
}
.firstRight .notice .title li {
display: inline-block;
font-size: 12px;
line-height: 20px;
padding: 0 4px;
margin: 0 10px;
}
.firstRight .notice .title li.active {
font-weight: bold;
border-bottom: 2px solid #f40;
}
.firstRight .notice .title li a:hover {
color: #f40;
}
.firstRight .notice .content {
margin: 0 12px;
padding-top: 10px;
}
.firstRight .notice .content li {
height: 25px;
line-height: 25px;
overflow: hidden;
float: left;
width: 130px;
}
.firstRight .notice .content li a:hover,
.firstRight .notice .content li.item1 a{
color: #ff5000;
}
.firstRight .notice .content li.item1 {
width: 100%;
}
/* 图标区域 */
.firstRight .icon {
width: 100%;
height: 229px;
background-color: #fff;
table-layout: fixed; /* 定义列宽的算法---fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度。 */
}
.firstRight .icon td {
border: 1px solid #f4f4f4;
text-align: center;
}
.firstRight .icon td span {
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
background: url(../images/ico.png) no-repeat;
}
.firstRight .icon td i {
line-height: 34px;
color: #333;
}
.firstRight .icon .item1 span {
background-position: 0 0;
}
.firstRight .icon .item2 span {
background-position: 0 -87px;
}
.firstRight .icon .item3 span {
background-position: 0 -44px;
}
.firstRight .icon .item4 span {
background-position: 0 -132px;
}
.firstRight .icon .item5 span {
background-position: 0 -176px;
}
.firstRight .icon .item6 span {
background-position: 0 -220px;
}
.firstRight .icon .item7 span {
background-position: 0 -264px;
}
.firstRight .icon .item8 span {
background-position: 0 -308px;
}
.firstRight .icon .item9 span {
background-position: 0 -352px;
}
.firstRight .icon .item10 span {
background-position: 0 -396px;
}
.firstRight .icon .item11 span {
background-position: 0 -440px;
}
.firstRight .icon .item12 span {
background-position: 0 -484px;
}
/* APP */
.firstRight .app {
height: 111px;
background: #fff;
}
.firstRight .app .title {
height: 30px;
line-height: 30px;
}
.firstRight .app .title h3 {
font-size: 14px;
padding-left: 14px;
}
.firstRight .app .title a {
margin-right: 10px;
}
.firstRight .app .title a:hover {
color: #f40;
}
.firstRight .app .appIcon {
text-align: center;
font-size: 0;
}
.firstRight .app .appIcon li {
display: inline-block;
width: 32px;
height: 32px;
margin: 0 10px 8px 10px;
}
.firstRight .app .appIcon li img {
width: 32px;
height: 32px;
}
/* 有好货与爱逛街 */
#iGoodsShopping .goods {
width: 590px;
height: 658px;
background-color: #fff;
overflow: hidden; /*每一个li标签都有一个margin-bottom，但最后一行li标签其实不需要设置margin-bottom，所以此处做此设置。已隐藏margin多挤出来的的部分*/
}
#iGoodsShopping .goods .head {
height: 24px;
line-height: 24px;
margin: 20px 0;
padding: 0 20px;
}
#iGoodsShopping .goods .head h3 {
font-size: 0;
font-weight: normal;
}
#iGoodsShopping .goods .head h3 img {
height: 24px;
}
#iGoodsShopping .goods .head h3 span {
vertical-align: middle;
color: #ccc;
font-size: 20px;
margin: 0 5px;
}
#iGoodsShopping .goods .head h3 i {
font-size: 12px;
vertical-align: middle;
color: #999;
}
#iGoodsShopping .goods .head .change {
color: #999;
}
#iGoodsShopping .goods .list {
font-size: 0;
text-align: center;
}
#iGoodsShopping .goods .list li {
display: inline-block;
width: 180px;
margin: 0 2px 35px 2px;
}
#iGoodsShopping .goods .list li img {
width: 180px;
height: 180px;
}
#iGoodsShopping .goods .list li h4 {
font-size: 16px;
height: 28px;
line-height: 28px;
font-weight: normal;
text-align: left;
overflow: hidden;
}
#iGoodsShopping .goods .list li h4 a:hover {
color: #f40;
}
#iGoodsShopping .goods .list li .text {
height: 24px;
line-height: 24px;
font-size: 14px;
overflow: hidden;
}
#iGoodsShopping .goods .list li .text a {
color: #999;
}
#iGoodsShopping .goods .list li ment {
display: block;
height: 22px;
line-height: 22px;
font-size: 12px;
color: #35b1ff;
margin-top: 12px;
text-align: left;
}
#iGoodsShopping .goods .list li ment span {
font-size: 14px;
margin-right: 4px;
}
/* 爱逛街 */
#iGoodsShopping .shopping .list li .text {
height: 44px;
line-height: 22px;
font-size: 14px;
overflow: hidden;
margin-top: 11px;
}
#iGoodsShopping .shopping .list li .text span {
font-size: 14px;
color: #ebebeb;
position: relative;
top: -5px;
}
#iGoodsShopping .shopping .list li .text a:hover {
color: #f40;
}
#iGoodsShopping .shopping .list li ment {
color: #999;
}
#iGoodsShopping .shopping .list li ment img {
width: 22px;
height: 22px;
border-radius: 50%;
}
/* 右侧固定定位导航 */
#tool {
width: 50px;
height: 350px;
position: fixed;
top: 280px;
right: 7%;
}
#tool span {
font-size: 32px;
color: #ff7f13;
width: 50px;
height: 36px;
line-height: 36px;
text-align: center;
position: absolute;
top: -28px;
}
#tool div {
height: 350px;
border-radius: 8px;
overflow: hidden;
}
#tool a {
display: block;
width: 50px;
height: 50px;
text-align: center;
background-color: #fff;
word-break: keep-all; /*在空格的地方使其强制换行*/
padding-top: 6px;
box-sizing: border-box;
position: relative;
}
#tool a::after { /*ie8不兼容“::”,故要想兼容ie8,则此处的伪元素前面应该为“:” */
content: '';
border-bottom: 1px solid #efefef;
width: 34px;
position: absolute;
left: 8px;
bottom: 0;
}
#tool a.item6 {
line-height: 40px;
}
#tool a:hover,
#tool a.active {
color: #fff;
font-weight: bold;
/* 设置渐变 */
background-image: linear-gradient(135deg, #ff9000, #ff5000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
#tool a:hover::after,
#tool a.active::after {
display: none;
}
3> reset.cssbody,p,h1,h2,h3,h4 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
color: #3c3c3c;
}
i {
font-style: normal;
}
input,button {
margin: 0;
padding: 0;
}
button {
outline: none;
border: none;
}
table {
border-collapse: collapse; /* 边框模式---合并的模式：即两个单元格之间的的边框只需要显示一个就行 */
}
th,td {
padding: 0;
}
body {
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\\5b8b\\4f53',sans-serif;
/* 字体大小/行高 字体 */
color: #3c3c3c;
background-color: #f4f4f4;
}
/* 预定义class */
.clearfix::after {
content: '';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.layer {
width: 1190px;
margin: 0 auto;
}
.c4 {
color: #f40;
}
.c5 {
color: #f50;
}
.c6 {
color: #8d7afb;
}
.c7 {
color: #a8c001;
}
.mr5 {
margin-right: 5px;
}
.mr7 {
margin-right: 7px;
}
.mr10 {
margin-right: 10px;
}
.mt10 {
margin-top: 10px;
}
总结自《渡一教育_2020权威HTML+CSS零基础入学》
本文标签：
淘宝首页静态学习笔记基础
发表评论