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 小图标）
<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.com/123/" target="_blank"<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.com/123/" target="_blank"> //★★★base标签在HTML页面结构中所处的位置 head> <body> <a href="demo.jpg">a> //★★★实际href中资源的地址为：www.baidu.com/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<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> <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>0strong> <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 class="item1"> <a href="#" class="fr"> <img src="images/headAd-list-item-01.png" alt=""> a> <h3><a href="#">电视会场a>h3> <p><a href="#">最高降2000a>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="#">最高降2000a>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="#">最高降2000a>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="#">最高降2000a>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="#">最高降2000a>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/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="#">DIYa> / <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 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> <div class="img2Box fl"> <div class="pic fl"> <div class="picTitle"> <div class="text clearfix"> <span class="fl bg">理想生活上天猫span> <span class="fr"><i>1i>/6span> 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>