HTML认知 day1
基础概念铺垫（了解）
- 问题1：网页由哪些部分组成？
✓ 文字、图片、音频、视频、超链接
- 问题2：我们看到的网页背后本质是什么？
✓ 前端程序员写的代码
- 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
✓ 通过浏览器转化（解析和渲染）成用户看到的网页
认识网页
浏览器：是网页显示、运行的平台，是前端开发必备利
常见的五大浏览器：
• IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
五大浏览器和渲染引擎
渲染引擎1：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：
注意点：
• 渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的
• 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐)
Web标准（了解）
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一
Web标准中分成三个构成：
| 构成 |
语言 |
说明 |
| 结构 |
HTML |
页面元素和内容 |
| 表现 |
CSS |
网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 |
JavaScript |
网页模型的定义与页面交 |
Web标准的记忆方法
Web标准要求页面实现：结构、表现、行为三层分离
HTML初体验
HTML的感知
HTML的概念：
➢ HTML（Hyper Text Markup Language）中文译为：超文本标记语言
➢ 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
➢ 案例：文字变粗案例
➢ 体验构建一个网页，需要在网页中显示一个加粗的文字
网页体验-构建基本网页的步骤：
- 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt
- 双击这个文件，输入代码等内容 → 记得保存！
- 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
- 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容
HTML骨架结构
HTML页面固定结构
➢ 网页类似于一篇文章：
➢ 每一页文章内容是有固定的结构的，如：开头、正文、落款等……
➢ 网页中也是存在固定的结构的，如：整体、头部、标题、主体
➢ 网页中的固定结构是要通过特点的 HTML标签 进行描述的
| 标签 |
说明 |
| html标签 |
网页的整体 |
| head标签 |
网页的头部 |
| body标签 |
网页的身体 |
| title标签 |
网页的标题 |
开发工具的使用
为什么要使用 VS Code？
➢ 刚刚通过文本编辑器，如：记事本，完全可以编写网页源代码
➢ 但是效率……不忍直视
➢ 实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具
➢ 开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
➢ 前端开发神器：VS Code → 速度快、体积小、插件多
VS Code使用前要求
\1. VSCode 软件安装完毕
\2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
\3. open in browser 直接打开浏览器插件安装完毕
VS Code创建网页的步骤
\1. 双击打开VS Code软件
\2. 将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
\3. 点击目录上的+新建文件按钮创建页面，注意：文件后缀名需要是.html
VS Code的基本快捷键
\1. 快速生成标签：英文 + tab
\2. 保存文件：ctrl + s
• 注意1：写完文件之后务必需要保存文件，否则网页无变化
• 注意2：可以设置自动保存省去每次保存的麻烦
\3. 快速查看网页效果：右击 → Open in Default Browser
• 快捷键：alt + b
• 注意：必须安装了open in browser 插件
\4. 快速生成结构标签： ! + tab
• 注意1：!必须是英文的，中文!无效
• 注意2：必须保证当前文件后缀名是.html，否则无效
• VS Code自动生成的骨架多了其他标签，之后会介绍
VS Code的其他快捷键
\1. 快速复制一整行：ctrl + c
\2. 快速粘贴一整行：ctrl + v
\3. 快速删除（剪切）一整行：ctrl + x
语法规范
HTML的注释
什么是注释？*
在之前上课学习时，同学们会在书本段落间记录内容的注解，方便下次看到此处理解
• 问题：同学们在书本段落间记录下的注解是为了给谁看的？
• 下次的阅读课本者（自己）
➢ 程序员在写代码时也会添加注释，方便下次看到此处时方便想起功能和含义
• 问题：程序员在代码中添加的注释，是为了给谁看的？
• 下次的阅读代码者（自己或者其他程序员）
注释的作用和写法
注释的作用：
• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释
注释的快捷键：
• 在VS Code中：**ctrl + /***
HTML标签的构成
HTML标签的结构
➢ 标签的结构图：
➢ 结构说明：
\1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
\2. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
\3. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML标签的关系
HTML标签与标签之间的关系可分为：
1.父子关系 如html和head
2.并列关系 如head和body
HTML标签学习 day2
排版标签
标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
➢ 代码：h系列标签
➢ 语义：1~6级标题，重要程度依次递减
➢ 特点：
• 文字都有加粗
• 文字都有变大，并且从h1 → h6文字逐渐减小
• 独占一行
➢ 注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
段落标签
➢ 场景：在新闻和文章的页面中，用于分段显示
➢ 代码：<p>我是一段文字</p>
➢ 语义：段落
➢ 特点：
• 段落之间存在间隙
• 独占一行
换行标签
➢ 场景：让文字强制换行显示
➢ 代码：<br>
➢ 语义：换行
➢ 特点：
• 单标签
• 让文字强制换行
水平线标签
➢ 场景：分割不同主题内容的水平线
➢ 代码：<hr>
➢ 语义：主题的分割转换
➢ 特点：
• 单标签
• 在页面中显示一条水平线
文本格式化标签
文本格式化标签
➢ 场景：需要让文字加粗、下划线、倾斜、删除线等效果
➢ 代码：
语义：突出重要性的强调语境
标签语义化（了解）
➢ 实际项目开发中选择标签的原则： 标签语义化
• 即：根据语义选择对应正确的标签
• 如：需要写标题，就使用h系列标签
• 如：需要写段落，就使用p标签
➢ 好处：
对人： 好理解，好记忆
对机器： 有利于机器解析，对搜索引擎（SEO）有帮助
推荐： strong、ins、em、del，表示的强调语义更强烈！
媒体标签
图片标签
图片标签的介
➢ 场景：在网页中显示图片
➢ 代码：<img src=" " alter=" ">
➢ 特点：
• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！
图片标签的介绍
标签的完整结构图：
属性注意点：
\1. 标签的属性写在开始标签内部
\2. 标签上可以同时存在多个属性
\3. 属性之间以空格隔开
\4. 标签名与属性之间必须以空格隔开
\5. 属性之间没有顺序之分
图片标签的src属性
➢ 属性名： src
➢ 属性值： 目标图片的路径
➢ 注意点：
➢ 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
➢ 路径的情况有很多，稍后会详细介绍
图片标签的alt属性
➢ 属性名： alt
➢ 属性值： 替换文本
• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本
图片标签的title属性
➢ 属性名： title
➢ 属性值： 提示文本
• 当鼠标悬停时，才显示的文本
➢ 注意点： title属性不仅仅可以用于图片标签，还可以用于其他标签
图片标签的width和height属性
➢ 属性名： width和height
➢ 属性值： 宽度和高度（数字），单位是像素
➢ 注意点：
• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形
总结
| 属性 |
说明 |
| src |
指定需要展示的图片的路径 |
| alt |
替换文本，当图片加载失败，才显示文字 |
| title |
提示文本，当鼠标悬停时，才显示文字 |
| width |
图片的宽度 |
| height |
图片的高度 |
路径
路径的介绍
➢ 场景： 页面需要加载图片，需要先找到对应的图片
➢ 类似于： 生活中两个人，我要去找你，需要通过一定的路径才能找到！
➢ 同理： 页面需要找到图片，也是需要通过路径才能找到
➢ 路径可分为：
• 绝对路径（了解）
• 相对路径（常用）
绝对路径（了解）
➢ 绝对路径： 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
➢ 例如：
• 盘符开头： D:\day01\images\1.jpg
• 完整的网络地址： https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）
➢ 概念普及：
• 当前文件：当前的html网页
• 目标文件：要找到的图片
➢ 相对路径： 从当前文件开始出发找目标文件的过程
➢ 相对路径分类：
• 同级目录
• 下级目录
• 上级目录
相对路径-同级目录
同级目录： 当前文件和目标文件在同一目录中
➢ 类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
• 生活中：两个人独处一室，我想找你，直接喊名字即可！
➢ 代码步骤：直接写目标文件的名字即可
• 方法一：<img src="目标图片.gif">
• 方法二：<img src="./目标图片.gif">
➢ VS Code快捷操作： 直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
相对路径总结（同级目录/上级目录/下级目录)
➢ 相对路径有哪三种情况：
1
2
3
4
| • 同级目录：直接写：目标文件名字！
• 下级目录：直接写：文件夹名/目标文件名字！
• 上级目录：直接下：../目标文件名字！
123
|
➢ VSCode中路径的快捷操作？
1
2
3
4
| • 同级和下级目录：./ 之后选择即可
• 上级目录：../ 之后选择即可
../表示上一级
|
音频标签
音频标签的介绍
1
2
3
| ➢ 场景：在页面中插入音频
➢ 代码：<audio src="./music.mp3" controls autoplay loop ></audio>
12
|
➢ 常见属性：
| 属性 |
说明 |
| src |
音频的路径 |
| controls |
显示播放的控件 |
| autoplay |
自动播放，部分浏览器不支持 |
| loop |
循环播放 |
➢ 注意点：
• 音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签
视频标签的介绍
➢ 场景：在页面中插入视频
➢ 代码：<video src="./video.mp4" controls autoplay muted loop></video>
➢ 常见属性：
| 属性 |
说明 |
| src |
视频的路径 |
| controls |
显示播放的控件 |
| autoplay |
自动播放（谷歌浏览器需要配和muted实现静音播放） |
| loop |
循环播放 |
➢ 注意点：
• 视频标签目前支持三种格式：MP4 、WebM 、Ogg
链接标签
链接标签的介绍
➢ 场景：点击之后，从一个页面跳转到另一个页面
➢ 称呼： a标签、超链接、锚链接
➢ 代码：<a href="./.目标网页.html" >超链接</a> 超链接
➢ 特点：
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
链接标签的href属性
➢ 属性名：href
➢ 属性值：点击之后跳转去哪一个网页（目标网页的路径）
• 外部链接：<a href="http://www.baidu.com">百度一下</a>百度一下
• 内部链接：<a href="./.目标网页.html">超链接</a>超链接
空连接:href后面加"#"
链接标签的显示特点（了解）
➢ 显示特点：
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
链接标签的target属性
➢ 属性名：target
➢ 属性值：目标网页的打开形式
| 取值 |
效果 |
| _self |
默认值，在当前窗口中跳转（覆盖原网页） |
| _blank |
在新的窗口中跳转（保留原网页） |
1
2
| <a href=" http://www.baidu.com/" target="_blank">百度一下</a>
1
|
百度一下
空链接（拓展补充）
➢ 代码：<a href="#" >空链接</a>空链接
➢ 功能：
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置
总结
- 排版标签：
• 标题h系列、段落p、换行br、水平线hr
- 文本格式化标签：
• 加粗strong、下划线ins、倾斜em、删除线del
- 图片标签：
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
- 路径：
• 相对路径：同级目录 + 下级目录 + 上级目录
- 音频标签、视频标签：
• audio标签、 video标签 + src属性 + controls属性
- 链接标签：
• a标签 + href属性 + target属性
◆ 能够理解HTML的 基本语法 和标签的关系
◆ 能够使用 排版标签 实现网页中标题、段落等效果
◆ 能够使用 相对路径 选择不同目录下的文件
◆ 能够使用 媒体标签 在网页中显示图片、播放音频和视频
◆ 能够使用 链接标签 实现页面跳转功能
html进阶
01-列表
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
1
2
3
4
5
6
7
| <ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
123456
|
注意事项：
- ul 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
1
2
3
4
5
6
7
| <ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
123456
|
注意事项：
- ol 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。
1
2
3
4
5
6
| <dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
12345
|
注意事项：
- dl 里面只能包含dt 和 dd
- dt 和 dd 里面可以包含任何内容
02-表格
网页中的表格与 Excel 表格类似，用来展示数据。
基本使用
标签：table 嵌套 tr，tr 嵌套 td / th。
提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
1234567891011121314151617181920212223242526
|
表格结构标签-了解
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
提示：表格结构标签可以省略。
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
合并单元格的步骤：
-
明确合并的目标
-
保留
最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
-
删除其他单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
1234567891011121314151617181920212223242526272829303132
|
注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。
03-表单
作用：收集用户信息。
使用场景：
input 标签 type 属性值不同，则功能不同。
占位文本：提示信息，文本框和密码框都可以使用。
1
2
| <input type="..." placeholder="提示信息">
1
|
单选框
常用属性
1
2
3
| <input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
12
|
提示：name 属性值自定义。
上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
1
2
| <input type="file" multiple>
1
|
多选框
多选框也叫复选框，默认选中：checked。
1
2
| <input type="checkbox" checked> 敲前端代码
1
|
下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
1
2
3
4
5
6
7
8
| <select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
1234567
|
默认显示第一项，selected 属性实现默认选中功能。
文本域
作用：多行输入文本的表单控件。
1
2
| <textarea>默认提示文字</textarea>
1
|
注意点：
- 实际开发中，使用 CSS 设置 文本域的尺寸
- 实际开发中，一般禁用右下角的拖拽功能
label 标签(点击字体也可以选中按钮)
作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
- 写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
1
2
3
| <input type="radio" id="man">
<label for="man">男</label>
12
|
- 写法二：使用 label 标签包裹文字和表单控件，不需要属性
1
2
| <label><input type="radio"> 女</label>
1
|
提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
提交重置按钮
1
2
| <button type="">按钮</button>
1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
|
提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。
04-语义化
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
1
2
3
| <div>div 标签，独占一行</div>
<span>span 标签，不换行</span>
12
|
有语义的布局标签（多用于手机网站）
05-字符实体
一般只记住第一个空格就行！
06-综合案例一-体育新闻列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ul>
<li>
<img src="./images/1.jpg" alt="">
<h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
</li>
<li>
<img src="./images/3.jpg" alt="">
<h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
</li>
</ul>
1234567891011121314
|
07-综合案例二-注册信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <h1>注册信息</h1>
<form action="">
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码：</label><input type="password" placeholder="请输入确认密码">
<br><br>
<label>性别：</label>
<label><input type="radio" name="gender"> 男</label>
<label><input type="radio" name="gender" checked> 女</label>
<br><br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
</select>
<h2>教育经历</h2>
<label>最高学历：</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>
<br><br>
<label>学校名称：</label><input type="text">
<br><br>
<label>所学专业：</label><input type="text">
<br><br>
<label>在校时间：</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
--
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<h2>工作经历</h2>
<label>公司名称：</label><input type="text">
<br><br>
<label>工作描述：</label>
<br>
<textarea></textarea>
<br><br>
<input type="checkbox"><label>已阅读并同意以下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
|
css入门
一、css简介
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离
1.1 css语法规范
1.使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。
2.CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”分开
5.多个“键值对”之间用英文“;”进行区分
例如：
1
2
3
4
5
6
7
8
9
10
| 所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
123456789
|
1.2 css代码风格：
- 样式格式书写
1.紧凑格式
1
2
| h3 { color: deeppink;font-size: 20px;}
1
|
2.展开格式
1
2
3
4
5
6
7
8
9
10
11
12
| h3 {
color: pink;
font-size: 20px;
}
或者
p{
background-color: aqua;
font-size: 4px;
width: 100px;
height: 100px;
}
|
强烈推荐第二种格式， 因为更直观。
-
样式大小写风格
1.小写格式
1
2
3
4
| h3 {
color: pink;
}
123
|
2.大写格式
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
- 样式空格风格
属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格
答：选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。
找到所有的 h1 标签。 选择器（选对人） 设置这些标签的样式，比如颜色为红色（做对事）。
二、css基础选择器
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器
2.1标签选择器：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：
1
2
3
4
5
| 标签选择器{
属性：属性值
...
}
1234
|
作用：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
2.2 类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 语法：
.类名 {
属性1: 属性值1;
...
}
结构需要用class属性来调用 class 类的意思
<div class="类名"> 变红色 </div>
1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
4.可以理解为给这个标签起了一个名字，来表示。
5.长名称或词组可以使用中横线来为选择器命名。
6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。
7.命名要有意义，尽量使别人一眼就知道这个类名的目的。
8.命名规范：见附件（ Web 前端开发规范手册.doc）
|
2.3 多类名选择器
我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签.
简单理解就是一个标签有多个名字.
多类名的具体使用：
1
2
3
4
5
6
| 1. <div class="red font20">亚瑟</div>
注意：
1.在标签class 属性中写 多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式
12345
|
2.4 id选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
1
2
3
4
5
6
7
8
| 语法：
属性1: 属性值1;
...
}
<div class="id名"> aaa </div>
|
注意：id 属性只能在每个 HTML 文档中出现一次（一个页面只能有一个）
2.5 id选择器和类选择器的区别：
1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
3.id 选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。
2.6 通配符选择器：
1
2
3
4
5
6
7
8
9
10
11
12
| 语法：
* {
属性1: 属性值1;
...
}
通配符选择器不需要调用， 自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
* {
margin: 0;
padding: 0;
}
1234567891011
|
2.7 选择器总结
三、 css字体属性:
3.1 字体大小：
CSS 使用 font-size 属性定义字体大小。
1
2
3
4
5
| 语法：
p {
font-size: 20px;
}
1234
|
1.px（像素）大小是我们网页的最常用的单位
2.谷歌浏览器默认的文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4.可以给 body 指定整个页面文字的大小
3.2 字体粗细：
CSS 使用 font-weight 属性设置文本字体的粗细。
1
2
3
4
5
| 语法：
p {
font-weight: bold;
}
1234
|
1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
2.实际开发时，我们更喜欢用数字表示粗细
3.3 字体样式：
CSS 使用 font-style 属性设置文本的风格。
1
2
3
4
5
| 语法：
p {
font-style: normal;
}
1234
|
3.4 字体的综合写法（font复合属性）
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| body { font: font-style font-weight font-size/line-height font-family;}
属性名：font（复合属性）
取值： font：style weight size family；
复合属性连写的font格式：font:font-style font-weight font-size/line-height font-family;
font: italic 700 50px 微软雅黑;
1、只能省略前两个，如果省略了相当于设置了默认值。通俗来讲，连写时有的属性可以不写但必须保留font-size和font-family属性。
2、顺序不能颠倒，各个属性必须用空格隔开。但字的大小属性font-size和行宽属性line-height要用 / 隔开。
3、 如果需要同时设置单独和连写形式
4、 要么把单独的样式写在下面。比如：连写属性“font: italic 700 50px 微软雅黑;”写完，不想让字体倾斜了，就在这个标签下面写单独的样式“font-style:mormal”，此时，字体就显示正常了，这是根据CSS的层叠性。
5、 要么把单独的样式写在连写的里面。
|
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
3.5 字体总结：
四、 css文本属性：
4.1 文本颜色：
color 属性用于定义文本的颜色。
1
2
3
4
5
| 语法：
div {
color: red;
}
1234
|
开发中最常用的是十六进制
4.2 文本对齐：
text-align 属性用于设置元素内文本内容的水平对齐方式。若想让某个元素水平居中，需要到它的父级里面去添加！如
hhh
则需要到h1里面去添加
1
2
3
4
5
| 语法：
div {
text-align: center;
}
1234
|
4.3 修饰文本：
1
2
3
4
5
| 语法：
div {
text-decoration：underline；
}
1234
|
重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可.
通常删除超链接下面的下划线！
4.4 文本缩进
1
2
3
4
5
6
7
8
| 语法：
div {
text-indent：20px；
}
div {
text-indent：2em；
}
1234567
|
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
4.5 行间距（行高）：
作用：设置多行文本的间距
属性名：line-height
属性值
- 数字 + px
- 数字（当前标签font-size属性值的倍数）
1
2
3
4
5
6
| line-height: 30px;
line-height: 2;
|
行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
行高的文本分为 上间距 文本高度 下间距 = 行间距
五、css样式表：（引入方式）
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
5.1行内样式表（行内式）（不常用）
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
1
2
3
4
5
6
7
8
| 语法：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
1.style 其实就是标签的属性
在双引号中间，写法要符合 CSS 规范
2.可以控制当前的标签设置样式
3.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
4.使用行内样式表设定 CSS，通常也被称为行内式引入
|
5.2 内部样式表（嵌入式）（常用）
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
1
2
3
4
5
6
7
8
9
10
11
12
13
| 语法：
<style>
div {
color: red;
font-size: 12px;
}
</style>
1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签下的<title>标签下引入
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置
3.代码结构清晰，但是并没有实现结构与样式完全分离
4.使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式
|
5.3 外部样式表（链接式）（开发项目用）
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
- 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
- 在 HTML 页面中，使用 标签引入这个文件。
语法：
1
2
3
| 在<head>标签下的<title>标签下引入，与内部样式表相同
<link rel="stylesheet" href="css文件路径">
|
六、Chrome调试工具：
1.Ctrl+滚轮 可以放大开发者工具代码大小。
2.左边是 HTML 元素结构，右边是 CSS 样式。
3.右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
4.Ctrl + 0 复原浏览器大小。
5.如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6.如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。
七、css的三个特性
1 层叠性
相同选择器给设置相同的样式（比如设置了红色之后又设置蓝色）。此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则: .
- 样式冲突，遵循的原则是就近原则，哪个样式高结构近，就执行哪个样式
- 样式不冲突，不会层叠
2 继承性
现实中的继承：我们继承了父亲的姓
CSS中的继承子标签会继承父标签的某些样式。如文本颜色和字号。简单的理解就是：子承父业。
- 恰当地使用继承可以简化代码。降低CSS样式的复杂性
- 子元素可以继承父元素的样式 ( text- , font- , line- 这些元素开头的可以继承，以及color属性)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: pink;
line-height: 24px/1.5;
}
div {
font-size: 14px;
}
</style>
</head>
<body>
<div>龙生龙和Dhabi觉得海拔九百嗲的话课程表</div>
<p>龙生龙和Dhabi觉得海拔九百嗲的话课程表</p>
</body>
</html>
12345678910111213141516171819202122232425
|
● 行高可以跟单位也可以不跟单位
● 如果子元素没有设置行高，则会继承父元素的行高为1.5
● 此时子元素的行高是 :当前子元素的文字大小* 1.5
● body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3 优先级
当同一个元素指定多个选择器。就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重如下所示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test {
color: red;
}
div {
color: pink!important;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple;">你笑傲起来真好卡</div>
</body>
</html>
12345678910111213141516171819202122232425
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
color: green;
}
li {
color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>haksna</li>
<li>haksna</li>
<li>haksna</li>
</ul>
</body>
</html>
1234567891011121314151617181920212223242526272829
|
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
● div ul li ----> 0,0,0,3
● .nav ul li ----> 0,0,1.2
● a:hover ----> 0,0,1,1
● .nav a -----> 0,0,1,1
拓展–颜色常见取值
一、关键词（预定意义的颜色名）
常见颜色取值：
- red：红色
- green：绿色
- blue：蓝色
- yellow：黄色
- orange：橘色
- skyblue：天蓝色
- pink：粉色
二、RGB表示法
光学三原色（RGB）：红、绿、蓝 [6] 。光学三原色混合后，组成显示屏显示颜色，三原色同时相加为白色，白色属于无色系（黑白灰）中的一种。
每项取值范围：0~255
常见颜色取值：
- rgb（255,0,0）：红色
- rgb（0,255,0）：绿色
- rgb（0,0,255）：蓝色
- rgb（0,0,0）：黑色
- rgb（255,255,255）：黑色
1
2
| color: rgb(255, 0, 0);
1
|
三、rgba表示法
比rgb表示法多一个a，a表示透明度
a的取值范围：0~1
1
2
| color: rgba(255, 0, 0,0.5);
1
|
四、十六进制表示法
取值范围：
- 两个数字为一组，每个数字的取值范围0~9，a，b，c，d，e，f
省略写法：
- 如果三组中，每组数字都相同，此时可以每组可以省略只写数字
- 正确写法：#ffaabb改写成#fab
常见取值：
以上了解即可，实际开发中可直接使用测量工具得到颜色，直接 Ctrl+c Ctrl+v 即可。
margin
margin属性概述
margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性.
该接受任何长度单位，可以是像素、英寸、毫米或 em。
相关属性
margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
| 属性 |
描述 |
| margin |
简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom |
设置元素的下外边距。 |
| margin-left |
设置元素的左外边距。 |
| margin-right |
设置元素的右外边距。 |
| margin-top |
设置元素的上外边距。 |
使用语法
1.使用单独属性设置四边的距离
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| #d2 {
border: 1px solid blue;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
}
|
效果:
2.直接使用margin属性设置所有外边距:
1
2
3
4
5
6
7
8
9
10
11
12
13
| #d2 {
border: 1px solid blue;
margin: 20px 30px 40px 50px;
}
|
3.使用margin简化写法注意事项:
- 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
- 如果只提供一个，将用于全部的四边。
- 如果提供两个，第一个用于上、下，第二个用于左、右。
- 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
margin合并(折叠)
注意,在使用CSS的margin属性时,会出现margin属性的合并(折叠)的现象.
这种合并分为两种: 并列元素的合并和嵌套元素的合并
1.并列元素的合并:
具体表现为:
当两个元素并列时，两者相隔的外边距，取的是两者所设置margin的最大值。
例如:
2.嵌套元素的合并:
具体表现为:
当两个元素嵌套到一起,并且没有内边距或边框把外边距分隔开时,它们的外边距也会发生合并
例如:
3.margin折叠注意事项：
- margin折叠只发生在块级元素上；
- 浮动元素的margin不与任何margin发生折叠；
- 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
- 绝对定位元素的margin不与任何margin发生折叠；
- 根元素的margin不与其它任何margin发生折叠；
注意事项
注意,在实际开发中.margin-bottom和margin-top需要特别说明
- 替代(Replaced)行内元素可以应用这两个属性。
- 非替代(non-Replaced)行内元素要使用该属性,则必须先使该对象表现为块级或行内块级。
- 外延边距始终透明。
也就是说,普通的行内元素是无法使用该属性的.
例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <html>
<head>
<meta charset="UTF-8">
<title>关于margin-bottom和margin-top</title>
<style>
div{
border: 1px solid red;
}
span{
border: 1px solid blue;
margin-top: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>内容体</div>
<span>我是span</span>
<div>内容体</div>
</body>
</html>
|
结果: -->完全没有任何效果
解决方案:
- 当元素是行内元素时，不使用该属性
- 把该元素转换为块级元素或者行内块级元素
扩展-块级元素和行级元素
块级元素
-
总是在新行上开始，占据一整行；
-
高度，行高以及外边距和内边距都可控制；
-
宽度与内容无关；
-
它可以容纳任何元素。
行级元素
-
和其他元素都在一行上；
-
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，宽高只与内容有关，
-
行内元素只能容纳文本或者其他行内元素。
-
可以设置外边界margin，但margin不对上下起作用，只能对左右起作用，
转换
行级元素与块级元素之间可以通过css的display属性进行转换
扩展-替换和不可替换元素
从元素本身的特点来讲，元素可以分为替换元素和不可替换元素。
替换元素:
不可替换元素
CSS进阶
选择器的进阶
复合选择器
后代选择器：空格
作用： 根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
选择器语法： 选择器1 选择器2 { css }
结果：
• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
1. 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过 空格 隔开
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
</html>
|
子代选择器：>
作用： 根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法： 选择器1 > 选择器2 { css }
结果：
• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
1.子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>a {
color: red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
</html>
|
并集选择器：,
作用： 同时选择多组标签，设置相同的样式
选择器语法： 选择器1 ， 选择器2 { css }
结果：
• 找到 选择器1 和 选择器2 选中的标签，设置样式
注意点：
- 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
</body>
</html>
123456789101112131415161718192021222324252627
|
交集选择器：紧挨着
作用： 选中页面中 同时满足 多个选择器的标签
选择器语法： 选择器1选择器2 { css }
结果：
• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
color: green;
}
</style>
</head>
<body>
<p class="box box1" id="dilireba">这是p标签:box</p>
<p class="box">这是p标签:box</p>
<p>pppppp</p>
<div class="box">这是div标签:box</div>
</body>
</html>
|
hover伪类选择器(悬停)
作用： 选中鼠标悬停在元素上的状态，设置样式
选择器语法： 选择器:hover { css }
注意点：
\1. 伪类选择器选中的元素的某种状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover {
color: red;
background-color: green;
}
div:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<div>div</div>
</body>
</html>
1234567891011121314151617181920212223242526
|
Emmet语法
作用： 通过简写语法，快速生成代码
语法：
• 类似于刚刚学习的选择器的写法
| 记忆 |
示例 |
效果 |
| 标签名 |
div |
<div></div> |
| 类选择器 |
.red |
<div class="red"></div> |
| id选择器 |
#one |
<div id="one" ></div> |
| 交集选择器 |
p.red#one |
<div class="red" id="one" ></div> |
| 子代选择器 |
ul>li |
<ul ><li></li></ul> |
| 内部文本 |
ul>li{我是li的内容} |
<ul ><li>我是li 的内容</li></ul> |
| 创建多个 |
ul>li*3 |
<ul><li></li><li></li><li></li></ul> |
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: ;
font-weight: 700;
width: ;
height: ;
background-color: #fff;
line-height: ;
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<h1></h1>
<div class="box"></div>
<p class="box"></p>
<div id="box"></div>
<p id="box"></p>
<p class="red" id="one"></p>
<div></div>
<p></p>
<div>
<p></p>
</div>
<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
|
| 选择器 |
作用 |
格式 |
示例 |
| 后代选择器 |
找后代 |
选择器之间通过 空格 分隔 |
.father .son { css } |
| 子代选择器 |
找儿子 |
选择器之间通过 > 分隔 |
.father > .son { css } |
| 并集选择器 |
找到多类元素 |
选择器之间通过 , 分隔 |
div,p,span { css } |
| 交集选择器 |
找同时满足多个选择器的元素 |
选择器之间 紧挨着 |
p.red { css } |
| hover伪类选择器 |
选中后鼠标悬停 在元素上的 **状态 ** |
hover: |
a:hover { css } |
背景相关属性
背景颜色
属性名： background-color（bgc）
属性值：
• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
注意点：
• 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
背景图片
属性名： background-image（bgi）
属性值： background-image：url('图片的路径')
注意点：
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
背景平铺
属性名： background-repeat（bgr）
属性值：
| 取值 |
效果 |
| repeat |
(默认值)水平和垂直方向都平铺（全部铺满） |
| no-repeat |
不平铺（图片只显示一个） |
| repeat-x |
沿着水平方向(x轴)平铺 |
| repeat-y |
沿着垂直方向(y轴)平铺 |
背景位置
属性名： background-position（bgp）
属性值： background-position:水平方向位置 垂直方向位置;
注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
背景相关属性的连写形式
属性名： background（bg）
属性值：
• 单个属性值的合写，取值之间以空格隔开
书写顺序：
• 推荐：background：color image repeat position
省略问题：
• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
注意点
• 如果需要设置单独的样式和连写
• ① 要么把单独的样式写在连写的下面
• ② 要么把单独的样式写在连写的里面
（拓展）img标签和背景图片的区别
需求： 需要在网页中展示一张图片的效果？
方法一： 直接写上img标签即可
• img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二： div标签 + 背景图片
• 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
元素显示模式
块级元素
显示特点：
\1. 独占一行（一行只能显示一个）
\2. 宽度默认是父元素的宽度，高度默认由内容撑开
\3. 可以设置宽高
代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素
显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：
• a、span 、b、u、i、s、strong、ins、em、del……
行内块元素
显示特点：
\1. 一行可以显示多个
\2. 可以设置宽高
代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的： 改变元素默认的显示特点，让元素符合布局要求
语法：
| 属性 |
效果 |
使用频率 |
display：block |
转换成块级元素 |
较多 |
display：inline - block |
转换成行内块元素 |
较多 |
display：inline |
转换行内元素 |
较少 |
拓展1：HTML嵌套规范注意点
一、 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
但是： p标签中不要嵌套div、p、h等块级元素
二、 a标签内部可以嵌套任意元素
但是： a标签不能嵌套a标签
拓展2：居中方法总结
CSS 特性
继承性
特性： 子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性(文字控制属性都可以继承)
1.color
-
font-style、font-weight、font-size、font-family
-
text-indent、text-align
-
line-height
-
……
注意点：
• 可以通过调试工具判断样式是否可以继承
h1-h6的字体大小和a的字体颜色大小不继承！
（拓展）继承的应用
好处： 可以在一定程度上减少代码
常见应用场景：
\1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
\2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
（拓展）继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
层叠性
特性：
\1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
\2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点：
\1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
综合案例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;（行高与高度设置相同会使文字水平居中）
}
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
width: 120px;
height: 58px;
background-color: pink;
display: inline-block;
text-align: center;
line-height: 50px;
color: #fff;
}
.one {
background-image: url(./images/bg1.png);
}
.two {
background-image: url(./images/bg2.png);
}
.three {
background-image: url(./images/bg3.png);
}
.four {
background-image: url(./images/bg4.png);
}
.one:hover {
background-image: url(./images/bg5.png);
}
.two:hover {
background-image: url(./images/bg6.png);
}
.three:hover {
background-image: url(./images/bg7.png);
}
.four:hover {
background-image: url(./images/bg8.png);
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
</body>
</html>
|
css优先级特性
一.css选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| 1.！important 优先级10000
2.内联选择器 优先级1000
3.ID选择器 优先级100
4.类别选择器 优先级10
5.属性选择器 优先级10
6.伪类 优先级10
7.元素选择器 优先级1
8.通配符选择器 优先级0
9.继承选择器 没有优先级
|
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器优先级计算表格：
优先级注意点：
-
权重是有4组数字组成,但是不会有进位。
-
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
-
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
-
继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
- - div ul li ------> 0,0,0,3
- - .nav ul li ------> 0,0,1,2
- - a:hover -----—> 0,0,1,1
- - .nav a ------> 0,0,1,1
二.css选择器优先级排序
1
| ！important>行内选择器>ID选择器>类选择器>属性选择器>伪类hover>标签选择器>通配符选择器>继承选择器
|
有点长，为了方便看 ，就写成了两排，这里再写一遍吧。
选择器能选中的范围越广，这个选择器的优先级越低！****总结一下：针对性越强，优先级越大，范围越小，优先级越大 也可以说是就近原则
！important>行内选择器>ID选择器>类选择器>属性选择器>伪类（hover）>标签选择器>通配符选择器>继承选择器
就近原则，从左到右优先级依次变大!
三.css选择器的总结
1.！important
! important这个规则对Ie6.0,Ie7.0和Firefox能写hack，作用是提高指定样式规则的应用优先权（优先级）
注意不要给父级添加此选择器！***
2.行内选择器
内联选择器可以将CSS样式写在元素的style属性当中，样式直接写入到style的属性中，这种样式成为内联样式表，内联样式只能对当前的元素的当中的内容起作用，不方便复用，它属于结构与表现耦合，不方便后期的维护。
3.id选择器
id选择器是通过元素的id属性值选中唯一的元素。(id就像一个人的身份证，没有重复的),用"#"选中。
html:
1
2
3
4
| <div id="one">
你好
</div>
|
css:
4.类选择器
类别选择器是通过class属性去选中元素 ，class能选中多个元素。标识符为“ . ”
html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <div class="two" >
你好！
</div>
<div class="three">
你好！
</div>
<div class="two" >
你喜欢吃什么？
</div>
<div class="three">
你喜欢吃什么？
</div>
|
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| .two{
color:#ffffff;
background:blue;
font-weight:600;
}
.three{
color:#ffffff;
background:green;
font-weight:600;
}
|
5.属性选择器
属性选择器就是通过属性选中元素的
第一种:
用 “[属性]”:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!DOCTYPE html>
<html>
<head>
<style>
[title] {
color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">Hello world</h1>
<h2 title="name">你好！</h2>
<p>Hello!</p>
<a title="url" href="" >url</a>
</body>
</html>
|
第二种:
[ 属性=值 ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[title=one] {
border:5px solid green;
}
</style>
</head>
<body>
<img title="one" src="https://img-blog.csdnimg.cn/0a07fc2c200f44a89e5cf00984f9b0b1.gif" width="270px" height="270px" />
<br>
<br>
<a title="one" href="">one</a>
<br>
<br>
<div title="two" >你好!</div>
<p title="two">Hi!</p>
</body>
</html>
|
运行一下 ，将会看到：
应该能看清楚吧？title名为one的元素上加了一个边框。而其他不为one的，则没有加。
第三种:
[属性~=值] 属性中包含独立的单词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[title~=one]{
color:blue;
}
</style>
</head>
<body>
<h1 title="two one">你好！</h1>
<br>
<p title="one three">你好！</p>
<br>
<p title="two">你好！</p>
</body>
</html>
|
运行一下 ，将会看到：
title属性中带有one的，都变为蓝色字体。而其他的没有改变。注意:属性中包含独立的单词，这种词与词之间要有空格，否则不会选中。
第四种:
[属性|=值] 属性中必须是完整且唯一的单词，或用" - "隔开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[lang|=one] {
background:#72D1FF;
font-weight:600;
text-align:center;
}
</style>
</head>
<body>
<p lang="one">你好</p>
<p lang="eson">你好！</p>
<p lang="one-gb">嗨!</p>
<p lang="us">你好!</p>
<p lang="neo">你好!</p>
</body>
</html>
|
运行后，可看到:
lang属性里面有one的，都改变了样式，其他的则没有，还需要注意的是，属性中必须是完整且唯一的单词，或用" - "隔开，如果中间是空格或其他的符号，也无法选中。
第五种:
[属性*=值] 属性中做字符串拆分，只要能拆出来 value 这个词就行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[title*=one] {
color:blue;
}
</style>
</head>
<body>
<p title="one">你好!</p>
<p title="oneeeeee">你好!</p>
<p title="oooneee">你好!</p>
<p title="eon">你好!</p>
<p title="nowee">你好!</p>
<p title="ooonnneee">你好!</p>
</body>
</html>
|
运行可得：
不难看出，只要有这个单词，不管是在整个值的中间，还是边缘，都可选中。
第六种:
[属性^=值] 属性的前几个字母是值就可以
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
[title^=one] {
color:blue;
}
</style>
</head>
<body>
<p title="one">你好!</p>
<p title="oneeeeee">你好!</p>
<p title="oooneee">你好!</p>
<p title="eon">你好!</p>
<p title="nowee">你好!</p>
<p title="ooonnneee">你好!</p>
</body>
</html>
|
运行后:
第七种
[属性$=值] 属性以值结尾就行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p[title$=one] {
color:blue;
}
</style>
</head>
<body>
<p title="one">你好!</p>
<p title="oneeeeeeone">你好!</p>
<p title="oooneee">你好!</p>
<p title="eon">你好!</p>
<p title="nowee">你好!</p>
<p title="ooonnneee">你好!</p>
</body>
</html>
|
运行后:
表单样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="demo-form.php" method="get">
你好:<input type="text" name="fname" value="你好" size="20">
你好:<input type="text" name="lname" value="嗨" size="20">
<input type="button" value="点击">
</form>
</body>
</html>
|
运行可得:
6.伪类选择器（hover等）
https://blog.csdn.net/hellow_tommer/article/details/121601810
7.标签选择器
最常见的 CSS 选择器就是元素选择器。设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>你好</h1>
<h2>你好！</h2>
<p>你好！</p>
</body>
</html>
|
8.通配符选择器
通配符使用星号*表示，意思是“所有的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{color:blue}
</style>
</head>
<body>
<h1>你好</h1>
<h2>你好！</h2>
<p>你好！</p>
</body>
</html>
|
9.继承选择器
PxCook
PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
- 开发面板（自动智能识别）
- 设计面板（手动测量尺寸和颜色）
使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿
盒子模型
作用：布局网页，摆放盒子和内容。
盒子模型-组成
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
- width height为里面内容区域的宽度
1
2
3
4
5
6
7
8
9
| div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
12345678
|
边框线
四个方向
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
1
2
3
4
5
6
7
| div {
border: 5px solid brown;
width: 200px;
height: 200px;
background-color: pink;
}
快捷键bd+tab
|
单方向边框线
属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
1
2
3
4
5
6
7
8
9
10
| div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
123456789
|
内边距
作用：设置 内容 与 盒子边缘 之间的距离。
- 属性名：padding / padding-方位名词
1
2
3
4
5
6
7
8
9
10
11
12
13
| div {
padding: 30px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
123456789101112
|
提示：添加 padding 会撑大盒子。
技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。
尺寸计算（系统自动内减模式）
默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论：给盒子加 border / padding 会撑大盒子
解决：
- 手动做减法，减掉 border / padding 的尺寸
- 內减模式：box-sizing: border-box
外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与 padding 属性值写法、含义相同
版心居中
左右 margin 值 为 auto（盒子要有宽度）
1
2
3
4
5
6
7
| div {
margin: 0 auto;
width: 1000px;
height: 200px;
background-color: pink;
}
|
清除默认样式
清除标签默认的样式，比如：默认的内外边距。
1
2
3
4
5
6
7
8
9
10
11
|
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
|
元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
外边距问题
合并现象
场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中的较大值生效
1
2
3
4
5
6
7
| .one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
|
外边距塌陷
场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象：导致父级一起向下移动
1
2
3
4
5
6
7
| .son {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
|
解决方法：
- 取消子级margin，父级设置padding
- 父级设置 overflow: hidden（最常用）
- 父级设置 border-top
- 设置浮动
行内元素 – 内外边距问题
场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法：给行内元素添加 line-height 可以改变垂直位置
1
2
3
4
5
6
7
8
| span {
margin: 50px;
padding: 20px;
line-height: 100px;
}
|
圆角
作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px / 百分比
提示：属性值是圆角半径
技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。
- 正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
1
2
3
4
5
6
7
8
| img {
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%;
}
|
- 胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半
1
2
3
4
5
6
7
| div {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
|
盒子阴影（拓展）
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
- X 轴偏移量 和 Y 轴偏移量 必须书写
- 默认是外阴影，内阴影需要添加 inset
1
2
3
4
5
6
7
| div {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
|
综合案例一-新浪导航栏的制作
案例图：
要求：
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例2新浪导航栏</title>
<style>
div{
height: 41px;
background-color: #fcfcfc;
border-top: 3px solid red;
border-bottom: 1px solid #edeef0;
line-height: 41px;
}
div a{
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 17px;
color: #4c4c4c;
text-decoration: none;
}
div a:hover{
background-color: green;
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
</div>
</body>
</html>
|
效果图如下：
颜色可自行更改
案例主要用于熟悉，padding的用法，以及块元素，行内元素与行内块元素的转化。还有对于外边框的一些基础设置。
先宽高，背景色，放内容，调节内容位置，控制文字细节
综合案例二-产品卡片
CSS 书写顺序：
- 盒子模型属性
- 文字样式
- 圆角、阴影等修饰属性
HTML标签
1
2
3
4
5
6
| <div class="product">
<img src="./images/liveSDK.svg" alt="">
<h4>抖音直播SDK</h4>
<p>包含抖音直播看播功能</p>
</div>
12345
|
CSS样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
.product {
margin: 50px auto;
padding-top: 40px;
width: 270px;
height: 253px;
background-color: #fff;
text-align: center;
border-radius: 10px;
}
.product h4 {
margin-top: 20px;
margin-bottom: 12px;
font-size: 18px;
color: #333;
font-weight: 400;
}
.product p {
font-size: 12px;
color: #555;
}
</style>
123456789101112131415161718192021222324252627282930313233343536
|
综合案例三 – 新闻列表
整体布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.news {
margin: 100px auto;
width: 360px;
height: 200px;
}
</style>
<div class="news"></div>
123456789101112131415161718192021222324
|
标题区域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <style>
.news .hd {
height: 34px;
background-color: #eee;
border: 1px solid #dbdee1;
border-left: 0;
}
.news .hd a {
margin-top: -1px;
display: block;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
width: 48px;
height: 34px;
background-color: #fff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #333;
}
</style>
<div class="hd"><a href="#">新闻</a></div>
1234567891011121314151617181920212223242526
|
内容区域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <style>
.news .bd {
padding: 5px;
}
.news .bd li {
padding-left: 15px;
background-image: url(./images/square.png);
background-repeat: no-repeat;
background-position: 0 center;
}
.news .bd li a {
padding-left: 20px;
background: url(./images/img.gif) no-repeat 0 center;
font-size: 12px;
color: #666;
line-height: 24px;
}
.news .bd li a:hover {
color: #ff8400;
}
</style>
<div class="bd">
<ul>
<li><a href="#">点赞“新农人” 温暖的伸手</a></li>
<li><a href="#">在希望的田野上...</a></li>
<li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
<li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
<li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
<li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
</ul>
</div>
|
CSS浮动
◆ 能够使用 结构伪类选择器 在HTML中选择元素
◆ 能够说出 标准流 元素的布局特点
◆ 能够说出 浮动元素 的特点
◆ 能够使用浮动完成 小米模块布局案例
◆ 能够说出 清除浮动 的目的，并能够使用 清除浮动的方法
| 选择器 |
说明 |
E:first-child{} |
匹配父元素第一个子元素，并且是E元素 |
E:last-child{} |
匹配父元素最后一个一个子元素，并且是E元素 |
E:nth-child(n){} |
匹配父元素第n个元素，并且是E元素 |
E:nth-last-child(n){} |
匹配父元素倒数第n个元素，并且是E元素 |
n的注意点：
- n为：0、1、2、3、4、5、6、……
- 通过n可以组成常见公式
| 功能 |
公式 |
| 偶数 |
2n、even |
| 奇数 |
2n+1、2n-1、odd |
| 找到前五个 |
-n*5 |
| 找到从第五个往后 |
n+5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-child(4n) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ul>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435
|
| 选择器 |
说明 |
E:nth-of-type(n){} |
只在父元素的同类型(E)子元素范围中，匹配第n个 |
区别：
: nth-child → 直接在所有孩子中数个数
: nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
伪元素： 一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
种类：
| 伪元素 |
作用 |
::before |
在父元素内容的最前添加一个伪元素 |
::after |
在父元素内容的最后添加一个伪元素 |
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
content: '';
color: green;
width: 100px;
height: 100px;
background-color: blue;
display: block;
}
.father::after {
content: '大米';
}
</style>
</head>
<body>
<div class="father">爱</div>
</body>
</html>
|
标准流
标准流： 又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
CSS书写顺序
特点： 浏览器执行效率更高
1.浮动 / display
2.盒子模型：margin border padding 宽度高度背景色
3.文字样式
浮动的作用
早期的作用： 图文环绕
现在的作用： 网页布局
场景： 让垂直布局的盒子变成水平布局，如：一个在左，一个在右
浮动的代码
属性名： float
属性值：
| 属性名 |
效果 |
float :left |
左浮动 |
float :right |
右浮动 |
浮动的特点
- 浮动元素会脱离标准流（简称：脱标 ），在标准流中不占位置
相当于从地面飘到了空中
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin-top: 50px;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
margin: 0 auto;
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
|
浮动的案例
需求： 使用浮动，完成设计图中布局效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 40px;
background-color: #333;
}
.header {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.content {
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: left;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="header">头部</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
width: 1226px;
height: 614px;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
}
ul {
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
margin: 50px auto;
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
ul {
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
display: block;
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.nav li a:hover {
background-color: green;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<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><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
|
书写网页导航步骤：
- 清除默认的margin和padding
- 找到ul，去除小圆点
- 找到li标签，设置浮动让li一行中显示
- 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
方法一：给a标签设置 display : inline-block
方法二：给a标签设置 display : block
方法三：给a设置 float : left
清除浮动
清除浮动的介绍
含义： 清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
子元素浮动后脱标 → 不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法
① 直接设置父元素高度
特点：
优点： 简单粗暴，方便
缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
③ 单伪元素清除法
**操作：**用伪元素替代了额外标签
① ：基本写法
1
2
3
4
5
6
| .clearfix::after{
content:'':
display: block;
clear:both;
}
|
② ：补充写法
1
2
3
4
5
6
7
8
9
| .clearfix::after{
content:'':
display: block;
clear:both;
/* 补充代码，在网页中看不到伪元素*/
height: 0;
Visibility: hidden;
}
|
特点：
优点： 项目中使用，直接给标签加类即可清除浮
④ 双伪元素清除法(也可解决外边距塌陷问题)
操作：
1
2
3
4
5
6
7
8
9
| .clearfix::before,
.clearfix::after{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
|
特点：
优点： 项目中使用，直接给标签加类即可清除浮动
⑤ 给父元素设置overflow : hidden
操作：
- 直接给父元素设置 overflow : hidden
特点：
优点： 方便
（拓展补充）BFC的介绍
块格式化上下文（Block Formatting Context）：BFC
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建BFC方法：
- html标签是BFC盒子
- 浮动元素是BFC盒子
- 行内块元素是BFC盒子
- overflow属性取值不为visible。如：auto、hidden…
- ……
BFC盒子常见特点：
- BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
- ……
css案例-----学成在线项目网页
总体制作效果如下，完整源代码见文末
1. 案例准备工作
本案例采取结构与样式相分离思想
- images中存储所用图片
- index.html 为首页文件，网站首页一般规定为 index.html
- 采用外链样式表 style.css
2. CSS属性书写顺序
建议遵循以下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
3. 页面布局思路
为了提高网页制作的效率，布局时通常有以下的布局流程：
- 必须确定页面的版心（可视区），我们测量可得知
- 分析页面中的行模块，以及每个行模块中的列模块。一行中的列模块经常浮动布局，先确定每个列的大小，之后再确定列的位置
- 制作 HTML 结构。遵循 “先有结构，后有样式” 的原则
- 开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块
4. 确定版心
所作页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：
1
2
3
4
5
| .w {
width: 1200px;
margin: auto;
}
1234
|
5. 头部制作
- 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
- 版心盒子里面包含 2 号盒子 logo
- 版心盒子里面包含 3 号盒子 nav 导航栏
- 版心盒子里面包含 4 号盒子 search 搜索框
- 版心盒子里面包含 5 号盒子 user 个人信息
- 注意：要求里面的 4 个盒子必须都是浮动
1、nav 导航栏：
-
实际开发中，我们不会直接用链接 a ，而是用 li 包含链接的做法
- li + a 语义更清晰，是比较有条理的列表型内容
- 如果直接用 a，搜索引擎容易辨别为有堆砌关键字的嫌疑，从而影响网站排名
-
让导航栏一行显示，需要给 li 加浮动，以为 li 是块级元素
-
因为导航栏里面文字不一样多，所以最好给链接 a 左右padding撑开盒子，而不是指定宽度
2、search 搜索框：
- 一个search盒子中包含两个表单
6. banner 制作
- 1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
- 2 号盒子是版心，要水平居中对齐
- 3 号盒子版心内，左对齐 subnav 侧导航栏
- 4 号盒子版心内，右对齐 course 课程
7. 精品推荐小模块
- 大盒子水平居中 goods 精品，注意此处有个盒子阴影
- 1 号盒子是标题 H3 左侧浮动
- 2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
- 3 号盒子右浮动 mod 修改
8. 精品推荐大模块
- 1 号盒子为最大的盒子， box 版心水平居中对齐
- 2 号盒子为上面部分，box-hd – 里面左侧标题 h3 左浮动，右侧链接 a 右浮动
- 3 号盒子为底下部分，box-bd – 里面是无序列表，有 10 个小 li 组成
- 小 li 外边距的问题，这里有个小技巧：给 box-hd 宽度为 1215 就可以一行装开 5 个 li
- 复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动
补充：
- 右上角NEW标签，利用定位，子绝父相
9. 底部模块
- 1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
- 2 号盒子版心水平居中
- 3 号盒子版权 copyright 左对齐
- 4 号盒子链接组 links 右对齐
10. 完整源代码
index.html 源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header w">
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="输入关键词">
<button></button>
</div>
<div class="user">
<img src="images/userpic.png" alt="">
qq-hanmeimei
</div>
</div>
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">后端开发<span>></span></a></li>
<li><a href="#">移动开发<span>></span></a></li>
<li><a href="#">人工智能<span>></span></a></li>
<li><a href="#">商业预测<span>></span></a></li>
<li><a href="#">云计算&大数据<span>></span></a></li>
<li><a href="#">运维&从测试<span>></span></a></li>
<li><a href="#">UI设计<span>></span></a></li>
<li><a href="#">产品<span>></span></a></li>
</ul>
</div>
<div class="course">
<h3>我的课程表</h3>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
</ul>
<a href="#" class="more">全部课程</a>
</div>
</div>
</div>
</div>
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Spark</a></li>
<li><a href="#">JavaWeb</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PHP</a></li>
</ul>
<a href="#" class="mod">修改兴趣</a>
</div>
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<li>
<em>
<img src="images/new.png" alt="">
</em>
<img src="images/pic01.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<em>
<img src="images/hot.png" alt="">
</em>
<img src="images/pic02.png" alt="">
<h4>Android 网络图片加载框架详解</h4>
<div class="info">
<span>初级</span> • 1668人在学习
</div>
</li>
<li>
<img src="images/pic03.png" alt="">
<h4>Angular 2 最新框架+主流技术+项目实战</h4>
<div class="info">
<span>高级</span> • 1535人在学习
</div>
</li>
<li>
<em>
<img src="images/hot.png" alt="">
</em>
<img src="images/pic04.png" alt="">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<div class="info">
<span>高级</span> • 2125人在学习
</div>
</li>
<li>
<em>
<img src="images/new.png" alt="">
</em>
<img src="images/pic01.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<em>
<img src="images/new.png" alt="">
</em>
<img src="images/pic01.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
<li>
<em>
<img src="images/hot.png" alt="">
</em>
<img src="images/pic02.png" alt="">
<h4>Android 网络图片加载框架详解</h4>
<div class="info">
<span>初级</span> • 1668人在学习
</div>
</li>
<li>
<img src="images/pic03.png" alt="">
<h4>Angular 2 最新框架+主流技术+项目实战</h4>
<div class="info">
<span>高级</span> • 1535人在学习
</div>
</li>
<li>
<em>
<img src="images/hot.png" alt="">
</em>
<img src="images/pic04.png" alt="">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<div class="info">
<span>高级</span> • 2125人在学习
</div>
</li>
<li>
<em>
<img src="images/new.png" alt="">
</em>
<img src="images/pic01.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="images/logo.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#" class="app">下载APP</a>
</div>
<div class="links">
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="#">如何注册</a></dd>
<dd><a href="#">如何选课</a></dd>
<dd><a href="#">如何拿到毕业证</a></dd>
<dd><a href="#">学分是什么</a></dd>
<dd><a href="#">考试未通过怎么办</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作机构</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
|
style.css 源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
| * {
padding: 0;
margin: 0;
}
.w {
width: 1200px;
margin: auto;
}
body {
background-color: #f3f5f7;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.header {
height: 42px;
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
}
.nav {
float: left;
margin-left: 40px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search {
float: left;
width: 412px;
height: 42px;
background-color: skyblue;
margin-left: 70px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: none;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
line-height: 42px;
}
.search button {
float: left;
width: 50px;
height: 42px;
border: none;
background-image: url(images/btn.png);
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.banner {
height: 421px;
background-color: #1c036c;
}
.banner .w {
height: 421px;
background: url(images/banner.png) no-repeat top center;
}
.subnav {
float: left;
width: 190px;
height: 421px;
background: rgba(0,0,0,0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
font-size: 14px;
color: #fff;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.subnav ul li a span {
float:right;
}
.course {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.course h3 {
height: 48px;
background-color: #9bceea;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #fff;
letter-spacing: 3px;
}
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
margin-top: 5px;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;
}
.goods {
height: 60px;
background-color: #fff;
margin-top: 10px;
box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
line-height: 60px;
}
.goods h3 {
float: left;
margin-left: 30px;
font-size: 16px;
color: #00a4ff;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods ul li a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #ccc;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
.box {
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
.box-bd ul {
width: 1225px;
}
.box-bd ul li {
float: left;
position: relative;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box-bd ul li > img {
width: 100%;
}
.box-bd ul li em {
position: absolute;
top: 4px;
right: -4px;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: normal;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span {
color: #ff7c2d;
}
.footer {
height: 415px;
background-color: #fff;
}
.footer .w {
padding-top: 35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
font-size: 16px;
color: #00a4ff;
}
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd a {
font-size: 12px;
color: #333;
}
|
CSS布局 （定位+装饰）
一、定位
1、定位的基本介绍
① 网页常见布局方式
1.标准流
块级元素独占一行 → 垂直布局
行内元素/行内块元素一行显示多个 → 水平布局
2.浮动
可以让原本垂直布局的 块级元素变成水平布局
3.定位
可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况
②定位常用于
可以解决盒子与盒子之间的层叠问题:定位之后的元素层级最高，可以层叠在其他盒子上面
可以让盒子始终固定在屏幕中的某个位置
2、定位的基本使用
① 设置定位方式
➢ 属性名：position
➢ 常见属性值：
② 设置偏移值
➢ 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
➢ 选取的原则一般是就近原则 （离哪边近用哪个）
3、静态定位
➢ 介绍：静态定位是默认值，就是之前认识的标准流。
➢ 代码：position:static;
➢ 注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
4、相对定位
➢ 介绍：相对于自己之前的位置进行移动
（如果left和right都有，以left为准，如果top和bottom都有，以top为准）
➢ 代码：position:relative;
➢ 特点：
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置 → 没有脱标
- 定位前后标签显示特点不改变，（div仍是块级元素，独占一行）
➢ 应用场景：
配合绝对定位组CP（子绝父相）；
用于小范围的移动
5、绝对定位
➢ 介绍：相对于非静态定位的父元素进行定位移动
（①先找已经定位的父级，如果有这样的父级要以这个父级为参照物；
②有父级，但父级没有定位，以浏览器窗口为参照进行定位）
➢ 代码：position absolute;
➢ 特点：
- 在页面中不占位置 → 已经脱标
- 定位前后标签显示特点改变：具备行内块的特点（在一行共存，宽高生效）
➢ 应用场景：配合绝对定位组CP（子绝父相）
子集绝对定位后，父级相对定位/绝对定位都可以，但是工作中一般使用相对定位，父元素是相对定位，则对网页布局影响最小
不一定必须是直系父元素，祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
② 相对浏览器窗口顶部50，右边50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| /* 无定位父元素 */
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: #ff4;
}
.sun{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
right: 50px;
top: 50px;
}
</style>
<body>
<div class="father">
<div class="son">
<div class="sun">
</div>
</div>
</div>
</body>
12345678910111213141516171819202122232425262728293031
|
① 相对父元素（黄色）顶部50，右边50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| /*有定位的父元素*/
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: #ff4;
position: relative;
}
.sun{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
right: 50px;
top: 50px;
}
</style>
<body>
<div class="father">
<div class="son">
<div class="sun">
</div>
</div>
</div>
</body>
123456789101112131415161718192021222324252627282930313233
|
案例1 卡片模块的hot图标定位案例
➢ 需求：根据设计图，通过PxCook量取数据，在 day05-作业-卡片模块案例 基础上，定位hot图片完成一致的效果
1
2
3
4
5
6
7
8
9
10
11
12
| /* 精品课程hot定位 */
.box .contant li{
position: relative;
}
.box .contant li .hot{
width: 40px;
height: 24px;
position: absolute;
top: 4px;
right: -4px;
}
123456789101112
|
案例2 子绝父相水平居中案
➢ 需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）
绝对定位后，所有标准流的规则都不适用，所以要使绝对定位的盒子居中不能用margin：0 auto；
- 子绝父相
- 先让子盒子往右移动父盒子的一半
• left：50%
- 再让子盒子往左移动自己的一半
• 普通做法：margin-left：负的子盒子宽度的一半
缺点：子盒子宽度变化后需要重新改代码
• 优化做法：transform：translateX(-50%)
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <style>
.father{
width: 300px;
height: 300px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
12345678910111213
|
案例3 导航二维码居中定位案例
➢ 需求：根据设计图，在 day06-作业-微金所导航案例 基础上，定位二维码图片完成一致的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ul li .app{
position: relative;
}
ul li .code{
position:absolute;
left: 50%;
transform: translate(-50%);
top: 42px;
}
<body>
<div>
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#" class="app">手机微金所 <img src="./code.jpg" class="code"></a> </li>
<li><a href="#">个人中心</a></li>
</ul>
</div>
</body>
1234567891011121314151617181920
|
案例4 底部半透明遮罩效果(banner)
➢ 需求：根据设计图，通过代码在网页中完成一致的效果
➢ 注意点：定位的元素会脱标（如：绝对定位），脱标后的元素宽高默认由内容撑开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <style>
.banner{
width: 1226px;
height: 600px;
margin: 0 auto;
position: relative;
}
.mask{
position: absolute;
width: 1226px;
height: 150px;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
<body>
<div class="banner">
<img src="./bg.jpg" alt="">
<div class="mask"></div>
</div>
</body>
123456789101112131415161718192021222324
|
这边自己用浮动试了一下，不过要把图片当背景图
6、固定定位
➢ 介绍：相对于浏览器进行定位移动
➢ 代码：position : fixed;
➢ 特点：
1.脱标，不占位置
\2. 相对于浏览器可视区域进行移动
\3. 定位后具有行内块特点
➢ 应用场景：
1.让盒子固定在屏幕中的某个位置
总结
7、元素的层级关系
（1）层级关系：
➢ 不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
➢ 不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
（2） 更改定位元素的层级
➢ 场景：改变定位元素的层级
➢ 属性名：z-index
➢ 属性值：数字
• 数字越大，层级越高，默认值为0
（配合定位才生效）
二、装饰
1、垂直对齐方式
➢ 基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
文字对齐问题：
➢ 场景：解决行内/行内块元素垂直对齐问题（浏览器遇到行内/行内块标签默认当文字处理）
➢ 问题：当图片和文字在一行中显示时，其实底部不是对齐的
垂直对齐方式：
➢ 属性名：vertical-align
➢ 属性值：
行内块和文字对齐或者行内块和行内块对齐，想要居中，都用middle。
（拓展）项目中 vertical-align 可以解决的问题
1.文本框和表单按钮无法对齐问题
2.input和img无法对齐问题
3.div中的文本框，文本框无法贴顶问题
4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5.使用line-height让img标签垂直居中问题
➢ 注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果
2、光标类型
➢ 场景：设置鼠标光标在元素上时显示的样式
➢ 属性名：cursor
➢ 常见属性值：
3、边框圆角
➢ 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
➢ 属性名：border-radius
➢ 常见取值：数字+px 、百分比
➢ 原理：
➢ 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
➢ 画一个正圆：
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半 → border-radius:50%
➢胶囊按钮：
1.盒子要求是长方形
2.设置 → border-radius：盒子高度的一半
4、overflow溢出部分显示效果
➢ 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
➢ 属性名：overflow
➢ 常见属性值：
5、元素本身隐藏
➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
➢ 常见属性：
1.visibility：hidden
2.display：none
➢ 区别：
1.visibility：hidden 隐藏元素本身，并且在网页中 占位置
2.display：none 隐藏元素本身，并且在网页中 不占位置
➢ 注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）
导航二维码显示隐藏切换案例
➢ 需求：通过代码，在刚刚完成的 导航二维码居中定位案例 基础上，完成如效果图中元素显示隐藏切换效果
1
2
3
4
| ul li a:hover img{
display: block;
}
123
|
要显示的是img，点在a上面然后显示img.
元素整体透明度
➢ 场景：让某元素整体（包括内容）一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
➢ 注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
三、选择器拓展
1、 链接伪类选择器
➢ 场景：常用于选中超链接的不同状态
➢ 选择器语法：
➢ 注意点：
• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
• 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
2、焦点伪类选择器
➢ 场景：用于选中元素获取焦点时状态，常用于表单控件 :focus { }
➢ 选择器语法：
➢ 效果：选中时：
3、 属性选择器
➢ 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
➢ 选择器语法：
➢ 选中页面中所有的文本框：input[type=“text”] { }
设置定位方式
属性名：position
常见属性值：
| 定位方式 |
属性值 |
| 静态定位 |
static |
| 相对定位 |
relative |
| 绝对定位 |
absolute |
| 固定定位 |
fixed |
设置偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则 （离哪边近用哪个）
| 方向 |
属性名 |
属性值 |
含义 |
| 水平 |
left |
数字+px |
距离左边的距离 |
| 水平 |
right |
数字+px |
距离右边的距离 |
| 垂直 |
top |
数字+px |
距离上边的距离 |
| 垂直 |
bottom |
数字+px |
距离下边的距离 |
静态定位
介绍： 静态定位是默认值，就是之前认识的标准流。
代码：
注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
相对定位
介绍： 自恋型定位，相对于自己之前的位置进行移动，如果left和right都有，以left为准；top和bottom都有以top为准；
代码：
特点：
\1. 需要配合方位属性实现移动
\2. 相对于自己原来位置进行移动
\3. 在页面中占位置 → 没有脱标
应用场景：
\1. 配合绝对定位组CP（子绝父相）
\2. 用于小范围的移动
绝对定位
**介绍：**拼爹型定位，相对于非静态定位的父元素进行定位移动，若找不到父亲的定位，则依次找爷爷和太爷爷，都找不到就找浏览器（body）
代码：
特点：
\1. 需要配合方位属性实现移动
\2. 默认相对于浏览器可视区域进行移动
\3. 在页面中不占位置 → 已经脱标
应用场景：
\1. 配合绝对定位组CP（子绝父相）
子绝父相介绍
**场景：**让子元素相对于父元素进行自由移动
含义：
子元素：绝对定位
父元素：相对定位
子绝父相好处：
父元素是相对定位，则对网页布局影响最小
（拓展） 子绝父绝特殊场景
场景： 在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
原因：
父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
固定定位
介绍： 死心眼型定位，相对于浏览器进行定位移动
代码：
特点：
\1. 需要配合方位属性实现移动
\2. 相对于浏览器可视区域进行移动
\3. 在页面中不占位置 → 已经脱标
应用场景：
\1. 让盒子固定在屏幕中的某个位置
不同定位的特点
| 定位方式 |
属性值 |
相对与谁移动 |
是否占位置 |
| 静态定位 |
static |
不能通过方向属性移动 |
占位置 |
| 相对定位 |
relative |
相对于自己原来的位置 |
占位置 |
| 绝对定位 |
absolute |
相对于最近的秋娥有定位的祖先元素移动 |
不占位置（脱标） |
| 固定定位 |
fixed |
相对于浏览器可视区域 |
不占位置（脱标） |
元素的层级关系
标准流、浮动、定位元素之间的层级关系：
标准流 < 浮动 < 定位
不同定位元素之间的层级关系：
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
场景： 改变定位元素的层级
属性名： z-index
属性值： 数字
数字越大，层级越高
装饰
垂直对齐方式
浏览器文字类型元素排版中存在用于对齐的基线（baseline）
属性名： vertical-align
属性值：
| 属性值 |
效果 |
| baseline |
默认，基线对齐 |
| top |
顶部对齐 |
| middle |
中部对齐 |
| bottom |
底部对齐 |
应用场景扩展
\1. 文本框和表单按钮无法对齐问题
\2. input和img无法对齐问题
\3. div中的文本框，文本框无法贴顶问题
\4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
\5. 使用line-height让img标签垂直居中问题
注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果
光标类型
场景： 设置鼠标光标在元素上时显示的样式
属性名： cursor
常见属性值：
| 属性值 |
效果 |
| default |
默认值，通常时箭头 |
| pointer |
小手效果，提示用户可以点击 |
| text |
工字形，提示用户可以选择文字 |
| move |
十字光标，提示用户可以移动 |
边框圆角
场景： 让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名： border-radius
常见取值： 数字+px 、百分比
原理：
赋值规则： 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
效果
overflow溢出部分显示效果
溢出部分： 指的是盒子 内容部分 所超出盒子范围的区域
场景： 控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名： overflow
常见属性值：
| 属性值 |
效果 |
| visible |
默认值，溢出部分可见 |
| hidden |
溢出部分隐藏 |
| scroll |
无论是否溢出，都显示滚动条 |
| auto |
根据是否溢出，自动显示或隐藏滚动条 |
元素本身隐藏
场景： 让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
常见属性：
-
visibility：hidden
-
display：none
-
区别：
-
visibility：hidden 隐藏元素本身，并且在网页中 占位置
-
display：none 隐藏元素本身，并且在网页中 不占位置
注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）
元素透明度
场景： 让某元素整体（包括内容）一起变透明
属性名： opacity
属性值： 0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
边框合并
场景： 让相邻表格边框进行合并，得到细线边框效果
代码： border-collapse：collapse；
选择器扩展
链接伪类选择器
场景： 常用于选中超链接的不同状态
选择器语法：
| 选择器语法 |
功能 |
| a:link{ } |
选中a链接 未访问过 的状态 |
| a:visited{ } |
选中a链接 访问之后 的状态 |
| a:hover{ } |
选中 鼠标悬停 的状态 |
| a:active{ } |
选中 鼠标按下 的状态 |
注意点：
• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
记忆口诀： 男盆友送了你一个 LV 包包，你开心的 HA 哈笑
• 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
焦点伪类选择器
场景： 用于选中元素获取焦点时状态，常用于表单控件
选择器语法：
1
2
3
4
| input:foucus{
background-color:skyblue;
}
123
|
效果：
• 表单控件获取焦点时默认会显示外部轮廓线
属性选择器
场景： 通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法：
| 选择器 |
功能 |
| E[attr] |
选择器具有attr属性的E 元素 |
| E[attr=“val”] |
选择器具有attr属性并且值等于val的E 元素 |
拓展
1.盒子阴影
注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。
未加阴影效果如下：
1、外阴影
a、给元素右边框和下边框加外阴影——把水平阴影位置、垂直阴影位置偏移值均设为正值
css代码
1
2
3
|
box-shadow: 10px 10px 20px 10px pink;
12
|
css代码
1
2
3
|
box-shadow: 10px 10px 1px 10px pink;
12
|
css代码
1
2
3
|
box-shadow: 10px 10px 20px 1px pink;
12
|
b、给元素左边框和上边框加外阴影——把水平阴影位置、垂直阴影位置偏移值均设为负值
css代码
1
2
3
|
box-shadow: -10px -10px 20px 10px pink;
12
|
2、内阴影（inset）
a、给元素左边框和上边框加内阴影——把水平阴影位置、垂直阴影位置偏移值均设为正值
css代码
1
2
3
|
box-shadow: 10px 10px 20px 1px pink inset;
12
|
b、给元素右边框和下边框设置内阴影——把水平阴影位置、垂直阴影位置偏移值均设为负值
css代码
1
2
| box-shadow: -10px -10px 20px 1px pink inset;
1
|
3、实际应用
给div加外阴影实现雨后彩虹
html代码
1
2
3
| <div class="box-shadow-test">
</div>
|
css代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .box-shadow-test {
height: 100px;
width: 100px;
margin: 100px auto;
transform: rotate(45deg);
border-radius: 100px 0 0 0;
box-shadow:
#f44336 -2px -2px 0 1px,
#ff9800 -4px -4px 0 3px,
#ffeb3b -6px -6px 0 5px,
#8bc34a -8px -8px 0 7px,
#00bcd4 -10px -10px 0 9px,
#2196f3 -12px -12px 0 11px,
#9c27b0 -14px -14px 0 13px;
}
|
彩虹来啦，，，
2.过渡（较重要）
1.过渡的基本使用
transition过渡
- transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。
1
2
3
4
5
|
transition: width 1s linear 0s;
|
哪些属性可以参与过渡
- 所有数值类型的属性，都可以参与过渡，比如width、 height、left、top、border-radius、opacity。
- 背景颜色和文字颜色都可以被过渡。
- 所有变形（包括2D和3D）都能被过渡。
width数值类型过渡：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
margin: 10px;
background-color: greenyellow;
transition: width 1s linear 0s;
}
div:hover {
width: 600px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
文字颜色过渡：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #000;
font: normal bold 30px/1.5 "微软雅黑";
color: rgb(247, 3, 3);
transition: color 1s linear 0s;
}
div:hover {
color: aqua;
}
</style>
</head>
<body>
<div>
你好！你好！你好！你好！你好！你好！你好！你好！
</div>
</body>
</html>
|
3D旋转过渡：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #000;
perspective: 300px;
}
p {
width: 200px;
height: 200px;
background-color: gold;
transition: transform 1s linear 0s;
}
p:hover {
transform: rotateX(360deg) translateX(100px);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
|
all
1
| transition: all 1s linear 0s;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #000;
perspective: 300px;
}
p {
width: 200px;
height: 200px;
background-color: gold;
font: normal bold 30px/1.5 "宋体";
color: red;
transition: all 2s linear 0s;
}
p:hover {
color: chartreuse;
transform: rotateX(360deg) translateX(100px);
}
</style>
</head>
<body>
<div>
<p>你好！你好！你好！你好！你好！你好！你好！你好！</p>
</div>
</body>
</html>
|
过渡的四个小属性
| 属性 |
意义 |
| transition-property |
哪些属性要过渡 |
| transition-duration |
动画时间 |
| transition-timing-function |
动画变化曲线（缓动效果） |
| transition-delay |
延迟时间 |
2.过渡的缓动效果
缓动参数
- transition的第三个参数就是缓动参数，也是变化速度曲线。
1
| transition: width 1s linear 0s;
|
常用缓动参数
贝塞尔曲线
1
| transition: width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 704px;
border: 1px solid #000;
margin: 100px;
}
p {
position: relative;
left: 0;
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: gold;
}
div p:nth-child(1) {
transition: left 1s ease 0s;
}
div p:nth-child(2) {
transition: left 1s linear 0s;
}
div p:nth-child(3) {
transition: left 1s ease-in 0s;
}
div p:nth-child(4) {
transition: left 1s ease-out 0s;
}
div p:nth-child(5) {
transition: left 1s ease-in-out 0s;
}
div p:nth-child(6) {
transition: left 1s cubic-bezier(.67, -0.85, .33, 1.64) 0s;
}
div:hover p {
left: 600px;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
|
3.过渡效果实战
实战一：opacity文字提示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 504px;
height: 300px;
margin: 10px auto;
position: relative;
}
.box .content {
position: absolute;
width: 100%;
text-align: center;
font-size: 20px;
left: 0;
bottom: 0;
color: white;
background-color: rgba(169, 169, 169, 0.445);
opacity: 0;
transition: opacity 1s ease 0s;
}
.box:hover .content {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="image/kda.jpg" alt="">
<p class="content">阿卡丽</p>
</div>
</body>
</html>
|
实战二：图标放大背景旋转。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 508px;
height: 107px;
margin: 10px auto;
}
.box ul li {
list-style: none;
float: left;
width: 107px;
height: 107px;
margin-right: 20px;
position: relative;
}
.box ul li::before {
content: "";
display: block;
width: 107px;
height: 107px;
transform: rotate(0);
transition: transform 1s ease 0s;
}
.box ul li:nth-child(1)::before {
background-image: url(image/a_1.png);
}
.box ul li:nth-child(2)::before {
background-image: url(image/a_2.png);
}
.box ul li:nth-child(3)::before {
background-image: url(image/a_3.png);
}
.box ul li:nth-child(4)::before {
background-image: url(image/a_4.png);
}
.box ul li img {
position: absolute;
width: 60px;
top: 50%;
margin-top: -30px;
left: 50%;
margin-left: -30px;
transform: scale(1);
transition: transform .5s ease-in 0s;
}
.box ul li:hover img {
transform: scale(1.2);
}
.box ul li:hover::before {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="image/icon1.svg" alt="">
</li>
<li>
<img src="image/icon2.svg" alt="">
</li>
<li>
<img src="image/icon3.svg" alt="">
</li>
<li>
<img src="image/icon4.svg" alt="">
</li>
</ul>
</div>
</body>
</html>
|
实战三：图片翻页。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
margin: 20px auto;
position: relative;
perspective: 500px;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
transform-origin: 0 0;
transform: rotateY(0);
transition: transform 1s ease 0s;
}
.box:hover .cat {
transform: rotateY(-180deg);
}
.num2 img {
transform-origin: 100% 0;
}
.num2:hover .cat {
transform: rotateY(180deg);
}
.num3 img {
transform-origin: 0 0;
}
.num3:hover .cat {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="box">
<img class="dog" src="image/dog.jpg" alt="">
<img class="cat" src="image/cat.jpg" alt="">
</div>
<div class="box num2">
<img class="dog" src="image/dog.jpg" alt="">
<img class="cat" src="image/cat.jpg" alt="">
</div>
<div class="box num3">
<img class="dog" src="image/dog.jpg" alt="">
<img class="cat" src="image/cat.jpg" alt="">
</div>
</body>
</html>
|
实战四：正方体旋转。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 10000px;
}
.main {
width: 200px;
height: 200px;
perspective: 10000px;
position: relative;
transform-style: preserve-3d;
transition: transform 2s linear 0s;
}
section:hover .main {
transform: rotateX(360deg) rotateY(360deg);
}
p {
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
}
.before {
background-color: rgb(247, 98, 93, 0.486);
transform: translateZ(100px);
}
.after {
background-color: rgb(250, 146, 27, 0.486);
transform: translateZ(-100px);
}
.left {
background-color: rgb(248, 234, 111, 0.486);
transform: rotateY(90deg) translateZ(100px);
}
.right {
background-color: rgb(183, 250, 107, 0.486);
transform: rotateY(-90deg) translateZ(100px);
}
.top {
background-color: rgb(117, 196, 248, 0.486);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: rgb(236, 120, 252, 0.486);
transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<section>
<div class="main">
<p class="before"></p>
<p class="after"></p>
<p class="left"></p>
<p class="right"></p>
<p class="top"></p>
<p class="bottom"></p>
</div>
</section>
</body>
</html>
|
3.seo引入
SEO：搜索引擎优化，提升网站百度搜索排名
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- ……
网页头部 SEO 标签：
- title：网页标题标签
- description：网页描述
- keywords：网页关键词
1
2
3
4
5
|
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
|
项目实战—小兔鲜项目搭建
项目目录
列一个结构
link引入的规范
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
|
引入seo
title：小兔鲜儿-新鲜、惠民、快捷！
description：小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。
keywords：小兔鲜儿,食品,生鲜,服装,家电,电商,购物
1
2
3
4
5
6
7
8
9
| <title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
|
favicon页面图标
1
| <link rel="shortcut icon" href="favicon.ico路径" type="image/x-icon">
|
清除默认样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
|
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
ul,
ol {
list-style: none;
}
em,
i {
font-style: normal;
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: middle;
}
input {
border: none;
outline: none;
color: #333;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
|
定版心
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.wrapper{
width: 1240px;
margin: 0 auto;
}
|
开始项目
快捷导航
最顶上黑色那块
html部分
请先登录
免费注册
我的订单
会员中心
帮助中心
在线客服
手机版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<div class="shortcut">
<div class="wrapper">
<ul>
<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> <a href="#">在线客服</a></li>
<li> <a href="#">手机版</a></li>
</ul>
</div>
</div>
|
定一个跟页面一样宽 最大的盒子
调一个粉红版心盒子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
.shortcut{
height: 52px;
background-color: #333;
}
.shortcut .wrapper{
height: 52px;
background-color: pink;
}
|
先将ul靠右 也就是右浮动
再对里面的li左浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .shortcut .wrapper ul{
float: right;
}
.shortcut .wrapper ul li{
float: left;
}
|
文字调整
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| .shortcut .wrapper ul li{
float: left;
line-height: 52px;
}
.shortcut .wrapper ul a{
padding: 0 16px;
border-right: 1px solid #666;
font-size: 14px;
color: rgb(255, 255, 255);
}
|
手机小图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| .shortcut .wrapper ul a span{
display: inline-block;
width: 11px;
height: 16px;
background-image: url(../images/sprites.png);
background-position: -160px -69px;
vertical-align: middle;
margin-right: 8px;
}
|
头部
布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .header{
margin: 30px auto;
height: 70px;
background-color: pink;
}
|
分成四块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| .logo{
float: left;
width: 207px;
height: 70px;
background-color: pink;
}
.nav{
float: left;
margin-left: 40px;
height: 70px;
background-color: rgb(197, 255, 192);
}
.search{
float: left;
margin-left: 34px;
width: 172px;
height: 30px;
background-color: rgb(205, 54, 54);
}
.car{
float: left;
margin-left: 15px;
width: 23px;
height: 23px;
background-color: rgb(157, 37, 115);
}
|
logo部分
用font-size 0 把a里面的字隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <div class="logo">
<h1><a href="#">小兔鲜</a></h1>
</div>
/* logo搜索引擎优化 */
.logo a{
/* 转换成块元素 */
display: block;
width: 207px;
height: 70px;
background-image: url(../images/logo.png);
/* 背景图大小与盒子保持一致 */
background-size: contain;
/* 让a里面的字隐藏 */
font-size: 0;
}
|
导航
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| <div class="nav">
<ul>
<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><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
.nav{
float: left;
/* 与logo拉开距离 */
margin-left: 40px;
height: 70px;
background-color: rgb(197, 255, 192);
}
.nav ul li {
float: left;
width: 48px;
/* 文字居中 */
line-height: 70px;
}
.nav li a{
/* 搞个下边距 方便等下做下划线 */
padding-bottom: 7px;
}
/* 鼠标接触之后 */
.nav li a:hover{
color: aquamarine;
border-bottom: 1px solid aquamarine;
}
|
搜索
精灵图位置调整用子绝父相
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
| .search{
position: relative;
float: left;
margin-left: 34px;
margin-top: 24px;
width: 172px;
height: 30px;
background-color: rgb(255, 255, 255);
border-bottom: 2px solid #e7e7e7;
}
.search input{
padding-left: 30px;
width: 172px;
height: 28px;
}
.search span{
position: absolute;
left: 2px;
top: 1px;
display: inline-block;
width: 18px;
height: 18px;
background-color: rgb(255, 255, 255);
background-image: url(../images/sprites.png);
background-position: -79px -69px;
}
|
购物车
在调整小红点 可以在网页调整好 再输入进vscode
/* 子绝父相 绝对位置自动转化成行内块元素 可以不用display */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| .car{
position: relative;
float: left;
margin-top: 28px;
margin-left: 15px;
width: 23px;
height: 23px;
background-color: rgb(255, 255, 255);
background-image: url(../images/sprites.png);
background-position: -119px -69px;
}
.car span{
position: absolute;
right: -13px;
top: -5px;
width: 20px;
height: 15px;
background-color: #e26237;
border-radius: 8px;
font-size: 13px;
color: rgb(255, 255, 255);
text-align:center;
line-height: 15px;
}
|
版权区域
精灵图部分
和 如何更改接下来的精灵图
1
2
3
4
5
6
7
8
9
10
|
.footer .top li ::before{
.footer .top li:nth-child(2) ::before{
|
整个代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
|
<div class="footer">
<div class="wrapper">
<div class="top">
<ul>
<li>
<span>价格亲民</span>
</li>
<li>
<span>物流快捷</span>
</li>
<li class="last">
<span>品质新鲜</span>
</li>
</ul>
</div>
<div class="bottom"></div>
</div>
</div>
/* */
.footer{
height: 342px;
background-color: #333;
}
.footer .wrapper{
/* 这个的版心宽度更大 */
width: 1393px;
}
.footer .top{
/* 调整位置 */
padding-top: 59px;
padding-left: 135px;
height: 175px;
/* 加分割线 */
border-bottom: 3px solid #434343;
}
.footer .top li{
/* 子绝父相 */
position: relative;
float: left;
/* 添加右边距 */
margin-right: 295px;
width: 195px;
height: 58px;
/* background-color: pink; */
/* span没有行高所以直接在父级加linehigh */
line-height: 58px;
}
/* 把最右边的li边距改为0 */
.footer li.last{
margin-right: 0;
}
/* 伪元素添加的标签：行内 */
.footer .top li ::before{
/* 精灵图定位 */
position: absolute;
left: 0;
top: 0;
/* 伪元素语法 */
content: '';
width: 58px;
height: 58px;
/* 精灵图 */
background-image: url(../images/sprites.png);
/* 居中 */
vertical-align: middle;
}
.footer .top li span{
margin-left: 77px;
font-size: 28px;
color: #fff;
}
/* 第二个li的图片 */
.footer .top li:nth-child(2) ::before{
background-position: -64px 0;
}
/* 第三个 */
.footer .top li:nth-child(3) ::before{
background-position: -129px 0;
}
|
底部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| <div class="bottom">
<p>
<a href="#">关于我们</a> |
<a href="#">帮助中心</a> |
<a href="#">售后服务</a> |
<a href="#">配送与验收</a> |
<a href="#"> 商务合作</a> |
<a href="#">搜索推荐</a> |
<a href="#">友情链接</a>
</p>
<p>CopyRight @ 小兔鲜儿</p>
</div>
.footer .bottom{
padding-top: 40px;
font-size: 14px;
color: #999;
text-align: center;
}
/* 超链接字体颜色大小 */
.footer .bottom a{
font-size: 14px;
color: #999;
}
.footer .bottom p{
margin-bottom: 20px;
}
|
banner部分
左右箭头的时候出现的问题
解决方法就是在浏览器里面调试 background-position: 14px -60px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
|
<div class="banner">
<div class="wrapper">
<ul>
<li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
</ul>
<div class="aside">
<ul>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">美食<span>面点 干果</span></a></li>
<li><a href="#">餐厨<span>数码产品</span></a></li>
<li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
<li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
<li><a href="#">洗护<span>洗发 洗护 美妆</span></a></li>
<li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
<li><a href="#">服饰<span>女装 男装</span></a></li>
<li><a href="#">杂货<span>户外 图书</span></a></li>
<li><a href="#">品牌<span>品牌制造</span></a></li>
</ul>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<ol>
<li></li>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</div>
/* banner区域 */
.banner{
height: 500px;
background-color: #fff;
}
.banner .wrapper{
/* 子绝父相 */
position: relative;
height: 500px;
background-color: pink;
}
/* 左侧导航 */
.banner .aside{
/* 定位 */
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
/* 背景色半透明 */
background-color: rgba(0,0,0,.8);
}
.banner .aside li{
/* 文字居中 */
height: 50px;
line-height: 50px;
}
.banner .aside a{
position: relative;
padding-left: 36px;
padding-right: 19px;
/* a是行内元素 转成块 */
display: block;
height: 50px;
width: 250px;
color: #fff;
}
.banner .aside a span{
/* 与最左边的字拉开距离 */
margin-left: 15px;
/* span里面的字要小一点 */
font-size: 14px;
}
/* 鼠标接触后换颜色 */
.banner .aside li :hover{
background-color: #27ba9b;
}
/* 加小箭头 */
.banner .aside a::after{
/* after的父级就是a */
position: absolute;
right: 19px;
top: 19px;
content: '';
width: 6px;
height: 11px;
background-image: url(../images/sprites.png);
background-position: -80px -110px;
}
/* /* 箭头 */
/* 两个一起写就用逗号隔开 */
.next,
.prev{
position: absolute;
top: 228px;
width: 45px;
height: 45px;
/* 半透明 */
background-color: rgba(0,0,0,0.2);
background-image: url(../images/sprites.png);
/* 圆角边框 让盒子变成圆的 */
border-radius: 50%;
}
.prev{
left: 260px;
background-position: 14px -60px;
}
.next{
right: 10px;
background-position: -23px -60px;
}
/* 圆点 */
.banner ol {
position: absolute;
left: 680px;
bottom: 30px;
height: 10px;
}
.banner ol li {
float: left;
margin-right: 24px;
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
/* 鼠标放上去变成小手样式 */
cursor: pointer;
}
/* 当前页面的圆点 所以白色 */
.banner ol .current {
background-color: #fff;
}
|
新鲜好物
生鲜
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
|
<div class="goods wrapper">
<div class="hd">
<h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
<a href="#">查看全部</a>
</div>
<div class="bd clearfix">
<ul>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
</a>
</li>
</ul>
</div>
</div>
<div class="shengxian wrapper">
<div class="hd">
<h2>生鲜</h2>
<a href="#" class="more">查看全部</a>
<ul>
<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><a href="#">水果</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
<div class="bd clearfix">
<div class="left">
<a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
</div>
<div class="right"></div>
</div>
</div>
/* 新鲜好物 */
.goods .hd {
height: 114px;
line-height: 114px;
}
.goods .hd h2 {
float: left;
font-size: 29px;
font-weight: 400;
height: 114px;
}
.goods .hd h2 span {
margin-left: 34px;
font-size: 16px;
color: #999;
}
.goods .hd a,
.shengxian .hd .more {
float: right;
color: #999;
}
/* 精灵图 > */
.goods .hd a::after,
.shengxian .hd .more::after {
content: '';
display: inline-block;
margin-left: 13px;
width: 7px;
height: 13px;
background-image: url(../images/sprites.png);
background-position: 0 -110px;
vertical-align: middle;
}
.goods .bd li {
position: relative;
float: left;
margin-right: 8px;
width: 304px;
height: 405px;
background-color: #f0f9f4;
text-align: center;
}
.goods .bd li:last-child {
margin-right: 0;
}
.goods .bd li img {
width: 304px;
}
.goods .bd li h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 20px;
font-weight: 400;
}
.goods .bd li div {
color: #9a2e1f;
font-size: 17px;
}
.goods .bd li div span {
font-size: 23px;
}
.goods .bd li b {
/* 变成竖直 */
position: absolute;
left: 17px;
top:18px;
width: 28px;
height: 51px;
border: 1px solid #27ba9b;
border-radius: 2px;
font-size: 18px;
color: #27ba9b;
font-weight: 400;
line-height: 24px;
}
/* 生鲜 */
.shengxian .hd {
height: 96px;
line-height: 96px;
}
.shengxian .hd h2 {
float: left;
font-size: 29px;
font-weight: 400;
}
.shengxian .hd .more {
float: right;
}
.shengxian .hd ul {
float: right;
margin-right: 65px;
}
.shengxian .hd ul li {
float: left;
}
.shengxian .hd li a {
padding: 2px 7px;
margin-left: 6px;
}
.shengxian .hd li a:hover {
background-color: #27ba9b;
color: #fff;
}
.shengxian .bd .left {
float: left;
width: 240px;
height: 610px;
background-color: pink;
}
.shengxian .bd .right {
float: left;
width: 1000px;
height: 610px;
background-color: skyblue;
}
|
index.html页面中需要按照base、common、index的顺序引入css文件，因为防止页面自身样式被覆盖，后面写的样式会覆盖上面的样式。外链是样式表后写的生效。
小兔鲜网站案例实现
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<link rel="shortvut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="shortcut">
<div class="wrapper">
<ul>
<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><a href="#">在线客服</a></li>
<li><a href="#"><span></span> 手机版</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="wrapper">
<div class="logo">
<a href="#"><img src="./images/logo.png" alt=""></a>
</div>
<div class="nav">
<ul>
<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><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="搜一搜" ;>
<span></span>
</div>
<div class="car">
<span>2</span>
</div>
</div>
</div>
<div class="banner">
<div class="wrapper">
<ul>
<li><a href=""><img src="./uploads/banner_1.png" alt=""></a></li>
</ul>
<div class="aside">
<ul>
<li><a href="">生鲜 <span>水果 蔬菜</span></a></li>
<li><a href="">美食 <span>面点 干果</span></a></li>
<li><a href="">餐厨 <span>数码产品</span></a></li>
<li><a href="">电器 <span>床品 四件套 被枕</span></a></li>
<li><a href="">居家 <span>奶粉 玩具 辅食</span></a></li>
<li><a href="">洗护 <span>洗发 洗护 美妆</span></a></li>
<li><a href="">孕婴 <span>奶粉 玩具</span></a></li>
<li><a href="">服饰 <span>女装 男装</span></a></li>
<li><a href="">杂货 <span>户外 图书</span></a></li>
<li><a href="">品牌 <span>品牌制造</span></a></li>
</ul>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<ol>
<li></li>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div class="goods wrapper">
<div class="hd">
<h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
<a href="#">查看全部</a>
</div>
<div class="bd clearfix">
<ul>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
</a>
</li>
</ul>
</div>
</div>
<div class="shengxian wrapper">
<div class="hd">
<h2>生鲜</h2>
<a href="#" class="more">查看全部</a>
<ul>
<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><a href="#">水果</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
<div class="bd clearfix">
<div class="left">
<a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
</div>
<div class="right"></div>
</div>
</div>
<div class="footer">
<div class="wrapper">
<div class="top">
<ul>
<li>
<span>价格亲民</span>
</li>
<li>
<span>物流快捷</span>
</li>
<li>
<span>品质新鲜</span>
</li>
</ul>
</div>
<div class="bottom">
<p>
<a href="">关于我们</a> |
<a href="">帮助中心</a> |
<a href="">售后服务</a> |
<a href="">配送与验收</a> |
<a href="">商务合作</a> |
<a href="">搜索推荐</a> |
<a href="">友情链接</a>
</p>
<p>CopyRight @ 小兔鲜儿</p>
</div>
</div>
</div>
</body>
</html>
|
base.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
|
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
ul,
ol {
list-style: none;
}
em,
i {
font-style: normal;
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: middle;
}
input {
border: none;
outline: none;
color: #333;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
|
common.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
|
.wrapper {
width: 1240px;
margin: 0 auto;
}
.shortcut {
height: 52px;
background-color: #333;
}
.shortcut .wrapper {
height: 52px;
}
.shortcut .wrapper ul {
float: right;
}
.shortcut .wrapper li {
float: left;
line-height: 52px;
}
.shortcut .wrapper a {
padding: 0 16px;
border-right: 1px solid #666;
font-size: 14px;
color: #dcdcdc;
}
.shortcut .wrapper li:last-child a {
border-right: none;
}
.shortcut .wrapper a span {
display: inline-block;
background-image: url(../images/sprites.png);
width: 11px;
height: 16px;
background-position: -160px -70px;
vertical-align: middle;
margin-right: 8px;
}
.header {
margin: 30px;
height: 70px;
height: 70;
}
.logo {
float: left;
width: 207px;
height: 70px;
}
.logo img {
width: 207px;
height: 70px;
}
.nav {
float: left;
margin-left: 40px;
height: 70px;
width: 710px;
line-height: 70px;
}
.nav ul li {
float: left;
line-height: 70px;
margin-left: 46px;
}
.nav ul li a {
padding-bottom: 7px;
}
.nav ul li a:hover {
color: #27ba9b;
border-bottom: 1px solid #27ba9b;
}
.search {
position: relative;
float: left;
margin-top: 24px;
margin-left: 60px;
width: 172px;
height: 30px;
border-bottom: 2px solid #e7e7e7;
}
.search input {
padding-left: 30px;
width: 172px;
height: 28px;
}
.search input::placeholder {
font-size: 14px;
color: #cccccc;
}
.search span {
position: absolute;
left: 2px;
width: 17px;
height: 17px;
background-image: url(../images/sprites.png);
background-position: -80px -70px;
vertical-align: top;
}
.car {
position: relative;
float: left;
margin-top: 28px;
margin-left: 15px;
width: 23px;
height: 23px;
background-image: url(../images/sprites.png);
background-position: -119px -69px;
}
.car span {
position: absolute;
left: 15px;
bottom: 15px;
width: 20px;
height: 15px;
background-color: #e26237;
border-radius: 8px;
font-size: 13px;
color: #fff;
line-height: 15px;
text-align: center;
}
.footer {
height: 342px;
background-color: #333333;
}
.footer .wrapper {
width: 1393px;
}
.footer .top {
padding-top: 59px;
padding-left: 135px;
height: 175px;
border-bottom: 3px solid #434343;
}
.footer .top li {
float: left;
width: 195px;
height: 58px;
margin-right: 300px;
font-size: 28px;
color:#fff;
line-height: 58px;
}
.footer .top li:last-child {
margin-right: 0;
}
.footer .top li::before {
display: inline-block;
content: '';
width: 58px;
height: 58px;
background-image: url(../images/sprites.png);
vertical-align: middle;
}
.footer .top li span{
margin-left: 10px;
}
.footer .top li:nth-child(2)::before{
background-position: -64px 0;
}
.footer .top li:nth-child(3)::before{
background-position: -130px 0;
}
.footer .bottom{
padding-top: 40px;
}
.footer .bottom p a{
font-size: 14px;
color:#999999;
}
.footer .bottom p {
margin-bottom: 20px;
font-size: 14px;
color:#999999;
text-align: center;
}
|
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
|
.banner {
height: 500px;
background-color: #f5f5f5;
}
.banner .wrapper {
position: relative;
height: 500px;
background-color: pink;
}
.banner .aside {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background-color: rgba(0, 0, 0, 0.8)
}
.banner .aside li {
height: 50px;
line-height: 50px;
}
.banner .aside li:hover {
background-color: #27ba9b;
}
.banner .aside a {
position: relative;
padding-left: 36px;
display: block;
height: 50px;
color: #fff;
}
.banner .aside a span{
margin-left: 15px;
}
.banner .aside a::after{
position: absolute;
content: '';
right: 19px;
top: 19px;
width: 7px;
height: 13px;
background-image: url(../images/sprites.png);
background-position: -39px -110px;
}
.prev,
.next{
position: absolute;
top:228px;
width: 45px;
height: 45px;
background-color: rgba(0,0,0,.2);
background-image: url(../images/sprites.png);
border-radius: 50%;
}
.prev{
left: 260px;
background-position: 14px -60px;
}
.next{
right: 10px;
background-position: -23px -60px;
}
.banner ol{
position: absolute;
left: 680px;
bottom: 30px;
width: 200px;
height: 10px;
}
.banner ol li{
float: left;
margin-right: 24px;
width: 10px;
height: 10px;
background-color:rgba(255,255,255,0.4);
border-radius: 50%;
cursor: pointer;
}
.banner ol .current{
background-color: #fff;
}
.goods .hd {
height: 114px;
line-height: 114px;
}
.goods .hd h2 {
float: left;
font-size: 29px;
font-weight: 400;
height: 114px;
}
.goods .hd h2 span {
margin-left: 34px;
font-size: 16px;
color: #999;
}
.goods .hd a,
.shengxian .hd .more {
float: right;
color: #999;
}
.goods .hd a::after,
.shengxian .hd .more::after {
content: '';
display: inline-block;
margin-left: 13px;
width: 7px;
height: 13px;
background-image: url(../images/sprites.png);
background-position: 0 -110px;
vertical-align: middle;
}
.goods .bd li {
position: relative;
float: left;
margin-right: 8px;
width: 304px;
height: 405px;
background-color: #f0f9f4;
text-align: center;
}
.goods .bd li:last-child {
margin-right: 0;
}
.goods .bd li img {
width: 304px;
}
.goods .bd li h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 20px;
font-weight: 400;
}
.goods .bd li div {
color: #9a2e1f;
font-size: 17px;
}
.goods .bd li div span {
font-size: 23px;
}
.goods .bd li b {
position: absolute;
left: 17px;
top:18px;
width: 28px;
height: 51px;
border: 1px solid #27ba9b;
border-radius: 2px;
font-size: 18px;
color: #27ba9b;
font-weight: 400;
line-height: 24px;
}
.shengxian .hd {
height: 96px;
line-height: 96px;
}
.shengxian .hd h2 {
float: left;
font-size: 29px;
font-weight: 400;
}
.shengxian .hd .more {
float: right;
}
.shengxian .hd ul {
float: right;
margin-right: 65px;
}
.shengxian .hd ul li {
float: left;
}
.shengxian .hd li a {
padding: 2px 7px;
margin-left: 6px;
}
.shengxian .hd li a:hover {
background-color: #27ba9b;
color: #fff;
}
.shengxian .bd .left {
float: left;
width: 240px;
height: 610px;
background-color: pink;
}
.shengxian .bd .right {
float: left;
width: 1000px;
height: 610px;
background-color: skyblue;
}
|
实现效果：
图片标签的title属性
行高的文本分为 上间距 文本高度 下间距 = 行间距
