将首屏内容试着写完了 但是还不完善 后期再修修补补 已经挂到了服务器上 下面这是链接
以下内容仅记录一些个人认为重要的内容 比如 一些技巧 和 一些开发经验
9.1 项目准备
1. 兼容问题 淘宝网已经放弃了IE7及以下的用户2. 做完该项目后 会有哪些收获?该项目会把成哥前面讲过的所有知识点拿出来 实践到项目中分享一些开发经验介绍一些新的知识点
- 本项目将会接触到如下知识点
9.2 基本结构样式
1. 自上而下划分结构
<!-- 头部信息 -->
<div id="headMessage"></div>
<!-- 头部广告 -->
<div id="headAd"></div>
<!-- 头部搜索 -->
<div id="headSearch"></div>
<!-- 导航 -->
<div id="nav"></div>
<!-- 首屏内容 -->
<div id="firstScreen"></div>
<!-- 有好货与爱逛街 -->
<div>
<!-- 有好货 -->
<div></div>
<!-- 爱逛街 -->
<div></div>
</div>
<!-- 右侧固定定位导航 -->
<div id="tool"></div>
2. 样式重置
1. 原则: 该标签我们会使用到 该标签带有的默认样式我们不需要
3. line-height
多种属性值写法
1. 关键字 normal 等
问: normal 表示多大呢?
答: normal 的影响因素有很多 比如 浏览器设置的字体大小 font-family等等
normal 大概是 1.32倍 的行高
2. 纯数字 1.5 表示 1.5倍行高
3. 百分比 200% 表示 2倍行高
4. 像素值 50px 表示 50px的行高
5. em单位 1.5em 表示 1.5倍的行高
小结
1. 以上介绍的 2 4 5 都是相对单位 是相对于 font-size的数值来计算的
2. 我们实际上在书写这个值的时候 一般会采用第2种写法 原因与 "继承" 相关
3. 如果是 4 和 5 的写法 那么子元素继承的将会是 父元素上转换后的最终结果(最终结果都是以px为单位的)
4. 如果是 2 中写的这样的纯数字 那么子元素将会直接继承系数 而非继承父元素上转换后的最终结果
例: father > son
father上的字体大小是20px son上的字体大小是15px
分析以下两种情况:
1. father上的行高是200% 那么它转换后最终的行高值是40px 子元素继承的就是这个转换后的最终值 40px
2. father上的行高是2 那么它转换后最终的行高值也是40px 但是子元素继承的是父元素的系数 也就是 2 所以子元素上的行高是 30px(这样的效果 一般才是咋们想要的)
PS: 该知识点 在《从0到1 CSS进阶之旅》的5.4 深入line-height 中有介绍
4. unicode编码
1. unicode编码: \u5b8b\u4f53 表示的中文含义是: 宋体
2. unicode编码的应用 前后端传输中文
在进行前后端的数据交互的时候 一般都是不允许传输中文字符的 那么我们一般采取的做法就是在传输的前 将中文给转换为unicode编码的形式进行传输 接收到后 再将该unicode编码给转换为中文
5. 宋体
1. 特点 方正 长宽相等
6. font
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
/* 12px ==> font-size: 12px;
1.5 ==> line-height: 1.5;
tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif ==> font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; */
7. font-family
1. font-family: "\5b8b\4f53"; 等价于 font-family: "宋体"; 等价于
font-family: SimSun;
2. font-family: "微软雅黑"; 等价于 font-family: Miscrosoft YaHei;
8. 预定义样式介绍
1. bootstrap 给了一堆的预定义样式 也就是写好的样式 咋们只需要负责写好结构即可 然后用它写好的样式
2. 咋们在写css文件的时候 也可以写一些预定义样式 比如 .clearfix::after{三件套} .fl{float: left;} .c4{color: #f40;} mt10{margin-top: 10px;}等等
9. 样式模块化
问: 想要引入多个CSS文件 咋们应该如何实现?
答: 可以通过多个link标签来引入多个CSS文件.
PS: 咋们也可以通过CSS的@规则来实现 这样的话 咋们在 index.html 文件中 只需要写一条link语句 引入一个index.css文件即可
10. @规则介绍
@规则
@charset 设置样式表的编码
@import 导入其它样式文件
@meida 媒体查询
@font-face 自定义字体
1. 应用举例
1. @charset 'uft-8'; 表示使用的字符编码是utf-8
2. @import 'reset.css'; 表示导入reset.css样式文件
好处: 咋们可以将页面中常用的模块的样式给封装到对应的css文件中 之后其他同事如果也要来写类似的页面的话 那么直接通过这种方式导入前一个同事写好的css文件即可
额 简单点说 就是如果咋们写的样式文件 是关于某个模块的 并且这个模块很常见 很常用 那么我们在写的时候 就把这一块的css代码给它提取出来 方便后续同事在写的时候 直接使用咋们写的css文件
不过个人感觉好像没啥必要 对于那些常见的模块 多练就好 页面中的某个模块 写起来感觉都不会花太多的时间 如果用别人写的 还得读别人写的代码 时间上感觉划不来 不过这仅仅是目前的看法 可能是因为接触到的东西还不够多 所以体会不到它的好处
3. @meida 后期课程会重点介绍 这一点与移动端开发有关 移动端开发有一个很重要的点 就是做适配(用户的设备是多样的)
它可以查询设备的尺寸 也可以查询设备的类型等等...
4. @font-face 在咋们当前写的这个页面中 就会用到 主要用来做页面上用到的一些图标 讲到这一部分的时候在作具体说明
11. reset.css文件源码及相关注释说明
1. 对于这样的重置样式表 我们一般都是直接用公司提供的reset.css文件就好了
不过自己学会写也许更好 就是只要会重置那些咋们项目中会使用到的那些元素即可
自己写的另外一点好处就是 咋们可以将一些预定义样式也给写在reset.css文件中
PS: 实际上网上推荐的一些重置样式表(Eric Meyer的)也是有些不足的 比如 div li code 根本就没有padding和margin 他的样式表中却画蛇添足了
body,
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;
cst老师这边是直接给了一个 #3c3c3c
个人感觉cst老师这么写不好
当我们写到广告区域时
根据习惯 咋们一般会直接把字体有关的样式直接给写在父级上
由于字体相关的一些属性 都是可以被继承的 所以这么做的话 就只要写一次就好了
但是如果按照cst老师这样的写法
由于咋们直接给了a标签一个颜色值 也就是它已经有值了 这就意味着 a标签的color属性不会继承父元素的值 */
color: inherit;
}
i {
/* 去除i标签上的斜体效果 */
font-style: none;
}
input,
button {
margin: 0;
padding: 0;
/* 未聚焦样式 */
border: none;
/* 聚焦样式 */
outline: none;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 0;
}
body {
/* font属性 直接到官网上copy下来即可 */
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
color: #3c3c3c;
background-color: #f4f4f4;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.layer {
/* 每一层 默认的总宽度是 1190px 并 居中显示 */
width: 1190px;
margin: 0 auto;
}
.c4 {
color: #f40;
}
.c5 {
color: #f50;
}
.c6 {
color: #8d7afb;
}
.c7 {
color: #a8c001;
}
.mr7 {
margin-right: 7px;
}
.mr5 {
margin-right: 5px;
}
.mt10 {
margin-top: 10px;
}
.mr10 {
margin-right: 10px;
}
1. 重置img标签
img {
border: none;
vertical-align: middle;
}
- img的border为何重置为none
兼容IE IE浏览器对img默认是加上蓝色（也有说黑色）外边框 这样看起来会很难看 所以一般都要重置样式 img{border: none;}
- img的vertical-align为何重置为middle
太难理解了 这个属性... 下面是推荐的参考文章 尝试看过了 有很大一部分没看懂
vertical-align 这个属性 还有overflow这个属性... 没有看懂
总之 vertical-align: middle; 先了解这条语句的作用就好 它的作用就是去除img与容器底部的间隙
比如说咋们没有设置容器的高度 然后这个容器里面包裹着一张图片儿 由于vertical-align的默认值是 baseline 也就是图片默认会与容器的基线对齐 容器的底部边间并非基线 而是bottom 基线与bottom之间的那一小部分间隙 实际上就是我们要去除的那一部分
不知道为何不写bottom而写middle 测试过 两者的写法在这样的情况下是等效的 但是不理解为何是等效的
9.3 头部信息结构
1. 核心代码
1. 伪代码
1. 整体布局
1. 整个 #headMessage 居中显示 [1190px * auto]
2. #headMessage 下面包裹着两个 ul 一个左浮动(.fl) 一个右边浮动(.fr) [auto * auto]
#headMessage 需要清除浮动(.clearfix)
3. 左侧的ul包裹的内容是左侧的li(即 左侧的子导航内容) 右侧的ul包裹的内容是右侧的li(即 右侧的子导航内容)
4. 所有li左浮动 [auto * 35px]
由于它们的父级ul都已经浮动了 所以不必再多此一举清除浮动
2. 间隙调整
1. 给每一个li添加上 padding: 0 6px;
注意 li.line 给的 padding 是 0 5px
2. 为了去除文本类型元素之间的间距问题 咋们需要给它们的父级 li 加上一条声明 font-size: 0; 然后所有需要显示的文本内容重新定义 font-size: 12px;
3. 所有位于文本右侧的 .iconfont.arrow 都有一个左侧的margin 7px
4. 所有位于文本左侧的 .iconfont 都有一个右侧的margin 5px
通过预定义样式 .mr5 来实现
3. 颜色问题
1. 所有a标签的颜色 默认是 #6c6c6c
由于该区域大部分的文本都是由a标签来直接包裹的 而且在reset.css中 咋们又设置了 color: inherit; 所以咋们可以直接把这个颜色值直接给写在父级li上
2. 注意点: 收藏夹前面的小星星 咋们hover时 它也会变色的
3. 其余部分的颜色 就挨个吸取 丢上去就好了
2. 变化
1. 2021.1.3版 在该部分多了一个li "免费开店"
<!-- headMessage.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>headMessage</title>
<link rel="stylesheet" href="./headMessage.css">
<style>
.wrapper {
width: 1200px;
border: 1px solid #ddd;
/* layout center */
margin: 0 auto;
/* auto size */
overflow: hidden;
resize: both;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- 头部信息 -->
<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="#"><span class="iconfont mr5 stroe">㐲</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>
</body>
</html>
/* reset.css */
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
body {
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
color: #3c3c3c;
background-color: #f4f4f4;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.layer {
width: 1190px;
margin: 0 auto;
}
.c4 {
color: #f40;
}
.mr7 {
margin-right: 7px;
}
.mr5 {
margin-right: 5px;
}
/* headMessage.css */
@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 */
#headMessage li {
float: left;
padding: 0 6px;
height: 35px;
line-height: 35px;
font-size: 0;
color: #6c6c6c;
}
#headMessage a,
#headMessage span,
#headMessage li strong,
#headMessage li.line {
font-size: 12px;
}
#headMessage a:hover {
color: #f40;
}
#headMessage a.login {
color: #f22e00;
}
#headMessage .iconfont.arrow {
margin-left: 7px;
}
#headMessage li strong {
color: #f22e00;
}
#headMessage li .iconfont.stroe {
color: #9c9c9c;
}
#headMessage a:hover .iconfont.stroe {
color: #f40;
}
#headMessage li.line {
color: #ddd;
padding: 0 5px;
}
2. favicon.ico
1. 获取方式: 在当前的页面地址栏 加上 /favicon.ico 一般都可以获取到
2. 显示位置:
在咋们访问某个网站时 这个图片会在网站title左侧显示出来
在咋们保存某个页面时 这个图片也会在书签上显示出来
3. 这个东西本质上是一张图片 这个工作一般是交给设计师来完成的 但是咋们做前端的 也可以做(不过要先有图片 可以不是.ico结尾的) 首先我们要找到图片的jpg或者png格式 然后直接上网搜索 在线制作 icon图标 会有很多工具可以用 我们只要上传我们的图片即可
- 如何显示favicon.ico
1. favicon.ico 位置必须是该网页的根目录下
2. 使用link标签引入
<link rel="icon" href="favicon.ico">
3. 如果按照这两步操作 依旧无法显示图标 那么可能你用的是IE浏览器 如果咋们是使用 IE浏览器的话 并且 是通过file协议(点击一下地址栏 看看最前面是否是file:///开头)来打开页面的 那么IE浏览器是不会显示 favicon.ico 的
PS: 不过这个小bug 可以利用vscode里面的一个插件(Live Sever)来解决
3. base标签
1. HTML <base> 元素 指定用于一个文档中包含的所有相对 URL 的根 URL
2. 注意点: 一个页面只能有一个base标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base标签</title>
<base href="https://www.baidu.com" target="_blank">
</head>
<body>
<a href="#">度娘</a>
<!-- 点击度娘后 会跳转到百度的首页(新页面打开) -->
</body>
</html>
9.4 头部信息样式与自定义图标
1. font-family补充知识点
1. 我们给的 font-family字体 在用户那边不一定都能看到对应的效果 前提是 用户的系统中安装了我们设置的 font-family字体 否则的话 用户那边儿是无法显示未安装字体的效果的
PS: 这个问题在之前 咋们一般采用图片的形式来弥补
2. iconfont图标库
- 先注册一个账号 登录
- 然后搜索需要的图标 选择添加入库
- 再下载到本地
- 最后引入即可
1. 下载到本地的压缩包解压后 会发现里面包含 字体文件 样式文件 html文件
2. 其中html文件是一个教程文件 就是教咋们如何引入这些图标到咋们的项目中的 共介绍了3种方式
3种引入方式各有优缺点 直接打开那个html结尾的教程文件查看即可
比如: unicode方式引入的话 兼容性最好 symbol方式引入的话 可以支持多色 等等...
3. 路径问题
由于视频中的做法是将相关的字体文件重新放置到一个 font 文件中的 所以请注意 需要修改默认路径
实际上咋们引入的这些图标 它们本质上是字体 也就是说 咋们设置到字体身上的属性 对于这些图标也是有效的 比如 我们可以利用font-size来设置图标尺寸 利用color来设置图标颜色 等等...
4. 语句解释
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
为了实现抗锯齿效果 让字体(图标)看起来更清晰
前者是针对 chrome 和 safari 的webkit内核 后者是针对 Firefox 的Trident内核的
- 这里介绍一种unicode方式(和视频中相同)
@font-face {
/* 定义字体名称 */
font-family: 'iconfont';
/* 引入字体文件(引入这么多 主要还是考虑到兼容性) */
src: url('../font/iconfont.eot');/* eot IE的私有格式 除了IE浏览器 其他的浏览器都不认识 */
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
/* woff 这个字体主要是网页上的 像是chrome Firefox Safari IE9等等 它们都支持 但是IE678不支持 特点是: 尺寸小 加载快 */
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
/* ttf 操作系统中的字体 windows mac 中 我们看看他们的字体包 它们的后缀大多都是 ttf格式 特点: 所占空间大 */
url('../font/iconfont.ttf') format('truetype'),
/* svg 一种图形技术 */
url('../font/iconfont.svg#iconfont') format('svg');
/* format 的作用 就是让浏览器提前知道字体的格式 对于不认识的字体格式 直接跳过 不加载 主要是为了性能的优化
如果后面不加 format语句 那么 浏览器会将所有的字体文件都加载过去 然后再进行识别 对于那些无法识别的字体文件 是作用不到页面上的 */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
/* 实现抗锯齿效果 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
9.5 头部广告结构与样式
1. 核心代码
1. 伪代码
1. 整体布局
1. 整个 #headAd 仅给定一个红色的背景 [auto * auto] 高度由内容撑开 宽度默认占满父级
2. #headAd 下面在包裹一个 div 让这个div居中显示 (.layer) 所有的内容由该div来包裹 这样就能实现 背景横向填满 内容还能居中显示 的视觉效果
3. 下一层是由一个a元素(.fl) 一个ul元素(.fl)组成 包裹它们的div需要清除浮动
a元素的宽度和高度由里面的img[80 * 80]来撑开(最后记得微调一下a元素内部img的位置 通过调节a元素的margin或padding即可实现)
ul元素的宽度和高度也由里面浮动的li来撑开(需要精确计算li的尺寸(计算好以后 先给定宽高 并设置为IE盒模型) 防止a元素和ul元素无法在同一行上显示)
4. 每个li内部的元素由3个部分组成 a.fr + h3 + p
注意要先让a有浮动 之后再写两个块级元素 这样就能利用块级元素无视浮动元素这一特点 实现布局效果(如果咋们给h3和p单独加上一个父级div.fl 当然也可以实现 但是这样就多嵌套了一层 不利于SEO)
2. 间隙问题
1. 每对li之间10px间隙
2. h3 行高28px 字体大小 20px
3. p 行高20px 字体大小 14px
4. li给定背景后 咋们还需要利用li上的padding值 将li内部的子元素a中的背景图片 挤压到合适的li背景位置才行
3. 颜色问题
1. 所有文本内容都由a元素包裹 咋们只要给ul或者li或者div#headAd添加上color: #fff; 就ok
2. 变化
1. 2021.1.4版 就一张图片 简单多了 父元素 auto*auto 子元素插入背景 并给定一个高度值 撑开父容器 即可...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>headAd</title>
<link rel="stylesheet" href="./headAd.css">
<style>
.wrapper {
width: 1200px;
border: 1px solid #ddd;
/* layout center */
margin: 0 auto;
/* auto size */
overflow: hidden;
resize: both;
}
/* #headAd2021-1-4{
background-color: #fd5632;
}
.bg{
height: 70px;
background: url(../../images/2020-1-4headAd_bg.jpg) no-repeat;
cursor: pointer;
} */
</style>
</head>
<body>
<div class="wrapper">
<!-- 头部广告 -->
<div id="headAd">
<div class="layer clearfix">
<a href="#" class="fl go"><img src="../../images/go.png" alt=""></a>
<ul class="fl">
<li>
<a href="#" class="fr">
<img src="../../images/adimg_01.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li>
<a href="#" class="fr">
<img src="../../images/adimg_02.jpg" alt="">
</a>
<h3><a href="#">厨房电器</a></h3>
<p><a href="#">抢大额券</a></p>
</li>
<li>
<a href="#" class="fr">
<img src="../../images/adimg_03.jpg" alt="">
</a>
<h3><a href="#">超值囤货</a></h3>
<p><a href="#">1元换百元券</a></p>
</li>
<li>
<a href="#" class="fr">
<img src="../../images/adimg_04.jpg" alt="">
</a>
<h3><a href="#">全球冰洗</a></h3>
<p><a href="#">三门冰箱888</a></p>
</li>
<li>
<a href="#" class="fr">
<img src="../../images/adimg_05.jpg" alt="">
</a>
<h3><a href="#">潮酷数码</a></h3>
<p><a href="#">大牌爆款直降</a></p>
</li>
</ul>
</div>
</div>
<!-- <div id="headAd2021-1-4">
<div class="bg layer"></div>
</div> -->
</div>
</body>
</html>
/* reset.css */
body,
p,
h3 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
color: inherit;
}
body {
font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
color: #3c3c3c;
background-color: #f4f4f4;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.layer {
width: 1190px;
margin: 0 auto;
}
/* headAd.css */
@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;
}
/* 头部广告 */
#headAd {
/* 横向填满父级背景区域 */
background-color: #f12f04;
}
#headAd a.go {
/* 由于该a元素以及浮动了 所以没必要再多此一举加上display: block;这条语句了 */
/* display: block; */
padding: 10px 10px 10px 15px;
}
#headAd a.go img {
/* 原图大小 90*80 */
width: 80px;
height: 80px;
}
#headAd ul {
padding-top: 13px;
color: #fff;
}
#headAd li {
float: left;
width: 209px;
height: 75px;
box-sizing: border-box;
/* 将每个li中的图片挤压到li合适的背景区域(控制台微调) */
padding: 12px 15px 0 15px;
}
#headAd li+li{
/* 设置每一对li之间的间隙10px */
margin-left: 10px;
}
#headAd li h3 {
font-size: 20px;
line-height: 28px;
}
#headAd li p {
font-size: 14px;
line-height: 20px;
}
#headAd li a.fr img {
width: 52px;
height: 52px;
border-radius: 5px;
}
#headAd li:nth-of-type(1) {
background: url(../../images/adbg_01.png) no-repeat;
}
#headAd li:nth-of-type(2) {
background: url(../../images/adbg_02.png) no-repeat;
}
#headAd li:nth-of-type(3) {
background: url(../../images/adbg_03.png) no-repeat;
}
#headAd li:nth-of-type(4) {
background: url(../../images/adbg_04.png) no-repeat;
}
#headAd li:nth-of-type(5) {
background: url(../../images/adbg_05.png) no-repeat;
}
2. 标题标签的应用场景
1. 蜘蛛
搜索引擎的蜘蛛在爬取页面时 爬取的其实是标签 但是它并不是对所有的标签都是一视同仁的 有些标签的权重会高一些 也就重要一些 有些标签的权重会低一些 自然也就不重要一些
2. title > h1 > h2 > ... > h6 > ...
在一些页面中 我们会发现没法给标题文字 但是我们必须在结构中写上标题标签 因为这有助于你写的页面被用户搜索到 此时我们往往将h1标签写在logo那一块结构中 然后需要用到的就是以图换字的技术("以图换字"也就是将标题文字和图片放在一起 然后隐藏标题文字即可 淘宝网就是这么干的)
3. 注意: 一个页面中 h1标签只能出现一次
4. h2标签 一般用于制作副标题 这个具体的应用场景是有点模糊的 算是一个经验性的东西 比如淘宝网的"主题市场"用的就是h2
5. h3标签 一般用于页面中某些板块的标题 比如淘宝网的"有好货"板块
6. h4标签 一般就是用于板块内部的内容的标题 比如淘宝网的"每日好店"模块的"万能集市"和"淘宝江湖"
7. h5和h6基本上很少会使用到 一般最多也就用到h4
补充: 用a标签来包裹某一块结构
1. 比如下面这样的写法 首先 我们都知道 a标签作为一个 inline元素 是不能包裹块级元素 h3 和 p 的 这么写确实是不符合规范的
2. 但是我们经常会看到这样的写法 其实原因很简单 就是为了改善用户体验效果的 这样包裹起来 就表示 点击这一块区域内的任何一个位置 都会跳转 也许在PC端还好 但是如果放到移动端 用户使用的就是手指在戳了(大多数情况) 很可能没有戳到 文字上 或者 图片上 如果我们用一个a标签把这一块区域给包裹起来 那么就增大了面积 有助于用户戳中
<a href="#">
<a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</a>
3. SEO相关
这一块 不要使用图片了 就直接用 矩形div 来模拟即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2021</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrapper {
width: 400px;
height: 200px;
border: 1px solid #ddd;
/* auto size */
overflow: hidden;
resize: both;
/* center */
margin: 100px auto;
}
.fr {
float: right;
}
a {
text-decoration: none;
color: #fff;
}
img {
width: 52px;
height: 52px;
border-radius: 5px;
}
h3 {
font-size: 20px;
line-height: 28px;
}
p {
font-size: 14px;
line-height: 20px;
}
.item1 {
width: 209px;
height: 75px;
/* 添加背景 */
background: url(../adbg_01.png) no-repeat;
/* 将img挤到背景的合适位置 */
box-sizing: border-box;
padding: 12px 15px 0 15px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item1">
<a href="#" class="fr">
<img src="../adimg_01.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</div>
</div>
</body>
</html>
1. 减少嵌套的层次 对搜索引擎的蜘蛛是比较友好的 有助于SEO
2. 注意上述这种结构 就是巧妙地利用了 块级元素无法看到浮动元素这一特点 从而 实现了在结构上少嵌套一层的效果
3. 通常 我们看到图片中这样的结构 一开始可能会想到让 box1左浮动 box2右浮动 来实现布局 但是这样的话 就需要在结构上多嵌套一层 上述的做法 同样能够达到效果 但是少嵌套了一层
这个示例告诉我们 靠左侧的盒子 在结构上 未必是位于 靠右侧的盒子 之上的
4. 个人感觉使用这种写法的话 h3 和 p 中的文本数量 必须限定好 太长肯定要出问题...
4. 怪异盒模型
5. 广告部分
2020/1/1时的广告部分也写了一遍 这个项目是在这一天开始写的 所以也就实现了一下当时的效果 就是一张图片 非常easy
9.6 头部搜索结构与样式
- 小结
1. 头部搜索结构 这一部分的结构和样式 由外到内 做到哪一块 就专心布局好那一块就好 不要这边布局一点 然后又去布局一下其他的区域 慢慢来 (这一部分的样式分为三块区域 左右两侧区域是很好实现的 难点在于中间的那块区域)
2. 注意一下各区域 id和class命名 的问题 别把太多时间都用来想名字
3. 选择器的写法上 一个id + 一个class 基本上都能准确选中对应区域 别嵌套太多层
4. 页面中的相关数值 直接看cst老师的css文件中写好的值就好 没必要去一个一个测量...
1. 核心代码
1. 伪代码
1. 整体布局
1. 该区域共分为3个部分 分别是 左侧的logo部分 右侧的code部分 以及中间的search-box部分
2. 左侧的logo 与 右侧的code 都使用浮动实现布局 左侧的左浮动 右侧的右浮动
3. 中间的给定一个宽度 然后利用margin实现居中效果
PS: 咋们去看看淘宝网是如何实现布局的 会发现 对于这一块区域 它是利用从左到右依次布局的 它的结构也是从左到右依次写的
首先 左侧的logo先给一个左浮动
其次 编写中间的区域 同样是利用 margin来实现
此时就要注意左右两侧了
左侧的logo前面时利用浮动来实现的 所以对于中间的区域实际上是没有影响的
但是右侧我们还没开始写 如果要写右侧的话 为了不受中间这块区域的影响 也为了不影响中间的这块区域 咋们还有两种方式可以实现 分别是 浮动和定位
最后 右侧的code区域给一个 position: absolute;(注意父级上要给一个 position: relative;)
2. 中间区域的布局分析
中间实际上可以看做是3个小区域 top middle bottom 它们的父级给定宽度实现了居中 咋们在布局这3个子区域时 只要划分好高度 依次分给它们就好了 这样就划分好了3个盒子
对于top和bottom而言 实际上是很easy就可以实现的 难点在于 middle区域
middle区域分析
middle区域可以继续划分 划分为 right区域 和 left区域 都给浮动就行
left区域比较简单 就是一个button
right区域就比较复杂了 该区域由3个部分组成 依次是 input输入框 div.placeholder(放大镜图标就在它里头) 照相机图标(该图标使用定位的方式 将其靠右显示)
2. 变化
1. 2021版的logo和之前的logo有所不同 好在它们的尺寸都是一样的 咋们只要修改一下路径就OKK了
3. 简单的交互效果
1. li.active切换功能
2. 输入框 placeholder切换功能
3. 关闭二维码功能
PS: 这个小的交互效果 很容易就实现了 没几行js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>headSearch</title>
<link rel="stylesheet" href="headSearch.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- 头部搜索 -->
<div id="headSearch">
<div class="cleafix layer">
<!-- <h1><a href="#"><img src="images/logo.png" alt="淘宝网"></a></h1>
PS: 这种写法不利于SEO -->
<!-- 2021新版logo和旧版的有点不一样(PS: 它们的尺寸都是一样的 143 * 59 所以只要改变路径就可以了 样式保持不变) -->
<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="active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="searchContent">
<form action="#" class="clearfix">
<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>
<script src="./headSearch.js"></script>
</body>
</html>
/* reset.css */
body,h1{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
a{
text-decoration: none;
color: inherit;
}
i{
font-style: normal;
}
input,button{
margin: 0;
padding: 0;
border: none;
outline: none;
}
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
color: #3c3c3c;
background-color: #f4f4f4;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
.layer{
width: 1190px;
margin: 0 auto;
}
.c5{
color: #f50;
}
/* headSearch.css */
@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;
}
/* 头部搜索 */
#headSearch {
background-color: #fff;
padding: 24px 0 10px 0;
}
/* 旧版logo */
/* #headSearch h1 a {
display: block;
margin-top: 8px;
width: 190px;
height: 0px;
padding-top: 58px;
background: url(../../images/logo.png) center no-repeat;
overflow: hidden;
} */
/* 新版logo 两张logo的尺寸都是 143 * 59 */
#headSearch h1 a {
display: block;
margin-top: 8px;
/* 以图换字 */
width: 190px;
height: 0px;
padding-top: 58px;
background: url(../../images/2021logo.png) center no-repeat;
overflow: hidden;
}
#headSearch .code {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #eee;
margin-right: 110px;
text-align: center;
}
#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;
border: 1px solid #eee;
color: #ddd;
cursor: pointer;
}
#headSearch .search {
/* 居中显示 */
width: 630px;
margin: 0 auto;
}
#headSearch .searchTab {
height: 22px;
padding-left: 17px;
}
#headSearch .searchTab li {
float: left;
width: 36px;
/* 字体居中显示 */
height: 22px;
line-height: 22px;
text-align: center;
color: #f40;
cursor: pointer;
}
#headSearch .searchTab li+li{
margin-left: 4px;
}
#headSearch .searchTab li:hover {
background-color: #ffeee5;
}
#headSearch .searchTab li.active {
color: #fff;
font-weight: bold;
background-image: linear-gradient(to right, #ff9000, #ff5000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
border-radius: 6px 6px 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 {
/* 透明，为了能够看到后面的文字 */
position: absolute;
z-index: 2;
background-color: transparent;
width: 490px;
height: 36px;
line-height: 36px;
text-indent: 10px;
}
#headSearch .placeholder {
position: absolute;
top: 6px;
left: 14px;
}
#headSearch .placeholder span {
color: #9c9c9c;
vertical-align: 1px;
}
#headSearch .imgSearch {
position: absolute;
right: 20px;
top: -2px;
font-size: 28px;
color: #9c9c9c;
cursor: pointer;
}
#headSearch .searchContent button {
width: 74px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
color: #fff;
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;
}
- 简单的添加了一点交互效果
- li.active切换功能
- 输入框 placeholder切换功能
- 关闭二维码功能
const ul = document.querySelector("#headSearch .searchTab");
const liArr = document.querySelectorAll("#headSearch .searchTab li");
const inp = document.querySelector("#headSearch .searchBox input");
const divPlaceholder = document.querySelector("#headSearch .placeholder");
const codeDiv = document.querySelector("#headSearch .code")
// li.active切换功能
ul.onclick = function(e){
if(e.target.tagName === "LI"){ // 确保当前点击的是 li
Array.from(liArr).forEach(item => {
item.classList.remove("active");
})
e.target.classList.add("active");
}
}
// 输入框 placeholder切换功能
inp.onfocus = function(){
divPlaceholder.style.display = "none";
}
inp.onblur = function(){
divPlaceholder.style.display = "block";
}
// 关闭二维码功能
codeDiv.onclick = function(e){
if(e.target.classList.contains("close")){
// console.log(1);
codeDiv.style.display = "none";
}
}
2. 核心结构分析
还是巧妙利用block元素无视浮动元素的特点来进行布局
左侧logo区域给定一个宽度 然后左浮动
右侧code区域给定一个宽度 然后有浮动
中间的搜索框 给定宽高 然后利用margin实现居中效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头部搜索结构</title>
<style>
.head-search{
width: 1000px;
height: 400px;
border: 1px solid #ddd;
/* auto size */
overflow: hidden;
resize: both;
/* center */
margin: 100px auto;
}
.head-search .logo-box{
width: 200px;
height: 100px;
background-color: #999;
}
.head-search .code-box{
width: 100px;
height: 100px;
background-color: #999;
}
.head-search .search-box{
width: 500px;
height: 100px;
background-color: #999;
/* layout center */
margin: 0 auto;
}
.fr{
float: right;
}
.fl{
float: left;
}
</style>
</head>
<body>
<div class="head-search">
<div class="logo-box fl"></div>
<div class="code-box fr"></div>
<!-- search-box 结构上写在最后 -->
<div class="search-box"></div>
</div>
</body>
</html>
3. IE的滤镜
1. c3的渐变效果非常强大 但是它的兼容性却不是很好 需要IE10+
2. 为了兼容低版本的IE 我们得使用IE的滤镜(IE的filter 超级强大 能干很多事 但是... 现在咋们一般都不考虑IE浏览器了 所以了解一下就好)
/* 线性渐变 */
background-image: linear-gradient(to right, #ff9000, #ff5000);
/* 兼容IE8+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
9.7 导航结构与样式
1. calc()函数计算宽度
一个注意点 咋们在使用calc()这个函数进行计算的时候 运算符左右两侧必须加空格才能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航结构核心布局</title>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul{
list-style: none;
}
/* 预定义样式 */
.layer {
width: 1190px;
margin: 0 auto;
}
.fl {
float: left;
}
.clearfix {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 1200px;
padding: 50px;
border: 1px solid #ddd;
/* layout center */
margin: 100px auto;
/* auto size */
overflow: hidden;
resize: both;
}
#nav h2 {
width: 190px;
height: 30px;
background-color: #f50;
line-height: 30px;
text-align: center;
font-size: 16px;
color: #fff;
}
#nav ul {
/* 方式1：利用块级元素无视浮动元素的特点 结合margin-left实现布局效果 */
margin-left: 190px;
/* 方式2：利用calc函数 直接计算出宽度 */
/* width: calc(100% - 190px); */
height: 30px;
line-height: 30px;
font-weight: bold;
background-image: linear-gradient(to right, #ff9000, #ff5000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
#nav ul li {
position: relative;
float: left;
margin: 0 7px;
padding: 0 5px;
font-size: 14px;
color: #fff;
}
#nav ul li.size {
font-size: 16px;
}
#nav ul li.line {
margin: 0;
padding: 0;
}
#nav ul li:hover:before {
content: '';
position: absolute;
width: 23px;
height: 13px;
background-image: url(./ico_01.gif);
top: -13px;
/* 实现左右居中 这一部分也可以使用cacl(50% - width/2) */
left: 50%;
margin-left: -12px;
}
</style>
</head>
<body>
<div class="wrapper">
<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>
</body>
</html>
9.8 首屏内容结构
内容过多: taobao.dahuyou.top
本地路径: 桌面 ==> Web项目文件夹 ==> 淘宝网文件夹
1. 核心结构分析
9.9 侧边导航结构与样式
9.10 图片区域结构与样式
若有收获，就点个赞吧
0 人点赞
