前端pink老师网课

最新推荐文章于 2023-03-24 18:56:16 发布

京与旧铺

最新推荐文章于 2023-03-24 18:56:16 发布

阅读量2.5k

点赞数 3

文章标签： css html5 css3 html

本文链接：https://blog.csdn.net/qq_46272491/article/details/116892189

版权

0p前言
先听与看，动手练习，分享交流
1p品优购静态网站基础班
精通网页布局
html5基础，没有兼容性的标签
css3基础，传统企业网页制作
h5c3，有一定兼容性，与未来更好地接轨
品优购电商网站
2p
web标准
3p
概念
网站网页集合
网页 html格式，浏览器阅读
图片元素，链接，文字，声音，视频
html文件超文本标记语言标记语言标签

超文本
网页是由网页元素组成的
图片，链接，文字，声音，视频，html后缀
书写，浏览器打开

4p
常用的浏览器
网页显示，运行的平台
chrome
浏览器内核渲染引擎
读取网页内容，整理讯息，计算网页的显示方式并显示页面

5p
web标准的构成
结构html，表现css，行为JavaScript交互
结构样式行为相分离
结构最重要

6p
html标签（上）
目标
1.书写注意规范
语法规范
尖括号包围的关键词
成对出现

7p
2.标签关系
包含关系和并列关系

8p
第一个html网页

网页标题后缀名必须是.html 最大HTML标签 head里有titie body和head并列

9p
安装插件

10p

<!DOCTYPR html>声明文档类型版本

lang语言种类
en英语
zh-CN中文，提倡
警示

必须要写

11p常用标签
标签语义
让页面结构更清晰
标题标签
段落标签

12p标题标签
双标签

-

文字加粗一行显
从重到轻
不加标签不变粗

13段落和换行标签

查看切换自动换行文本在一个段落中会根据浏览器窗口的大小自动换行段落和段落之间有空隙换行标签
强制换行，单标签

14p
体育新闻
crtl+

15p文本格式化标签
加粗
推荐

倾斜
推荐

删除线
推荐

下划线
推荐

重点加粗和倾斜

16p常用标签

无语义，盒子，装内容特点 div一个人独占一行，大盒子 span跨距，用来布局，一行可以放很多个，小盒子

17p图像标签和路径（重点）

src指定图像文件的路径和文件名
单标签
alt替换文本，图像显示不出来的时候用文字替换
图片无法显示出来
title提示文本，鼠标放到图像上，提示的文字

插入图像，alt，title

18p图像标签下
width给图像设定宽度
height给图像设定高度
只修改一个，等比例缩放
border给图像设定边框，css后续改进

19p图像标签和路径（重点）
注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3.属性=“属性值”

20p路径
1、目录文件夹和根目录：
目录文件夹：放置相关素材
根目录：最外面那一层

21p路径
新建文件夹，把图片都放到文件夹里
相对路径：图片相对于html页面的位置

22p相对路径
下一级路径
上一级路径
…/上一级符号
…/…/上上一级符号

23p绝对路径，很少使用，只用于自己的电脑
目录下的绝对位置，盘或完整的网络地址
了解即可

24p超链接标签（重点）
文本或图像
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其中—self为默认值，当前窗口打开页面，-blank为在新窗口中打开方式

25p链接标签（下）
外部链接：例如百度
内部链接：网站内部页面之间的相互链接，例如首页
空链接：如果没有确定链接目标时，首页
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件，地址链接的是文件.exe或者是压缩包，会下载这个文件，例如下载文件
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频都可以添加超链接

26p锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
1.个人生活,在链接文本的href属性中，设置属性值为#名字的形式
2.找到目标位置标签，里面添加一个id属性=刚才的名字，例如

第二集介绍

27p注释
便于阅读理解，但不显示在页面内

结束

快捷键 Ctrl+ /
显示给程序员用
更好的解释代码的功能

特殊字符
&nbsp 空格，以；分开
&lt，&gt；，小于号，大于号例如&lt； p &gt；是一个段落标签

28p综合案例
复习
查看-自动换行
target="_blank" 在新的页面打开

29p综合案例下
锚点链接
Crtl+x 剪切
超链接，新建一个HTML文件

02p表格标签基本使用
1.表格标签
1.1表格的主要作用
用于显示，展示数据
1.2表格的基本语法

... ...

单元格内的文字

定义表格 2.定义表格中的行，必须嵌套在

标签中 3.定义单元格，嵌套在标签中 4.td表格数据，数据单元格的内容 1.3表头单元格标签一般位于第一行或第一列，文本内容加粗显示，突出重要性

4p表格相关属性
1.4表格属性
css
相关属性（这些属性要写到table里面去）
align 对齐，居中
left，center，right
border=“1”表格边框，默认为“”
cellpadding 像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值规定单元格之间的空白，默认2像素，一般改为0
width，height，设置表格宽和高

5p小说排行榜案例
先书写制作表格的结构
1.th
2.td
3.单元格里面可以放任何元素，文字链接图片等
后书写表格属性
1.用到宽度高度边框
2.表格浏览器中对齐

6p表格结构标签
表格头部和表格主体，更好的表达语义

头部主体可收缩都放在

中

7p合并单元格
1.6合并单元格
合并单元格方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
三步曲
1.确定跨行还是跨列合并
2.找到目标单元格，写上合并方式=合并的单元格数量，比如：
3.删除多余的单元格

8p表格总结
1.表格相关标签
table
tr行
td单元格
th表头单元格标签
thead头部区域标签
tbody主体区域标签
2.相关属性
align
border
cellpadding
cellspacing
width
3.合并单元格
colspan
rowspan

9p无序列表
列表就是用来布局的
无序列表，有序列表，自定义列表
2.1无序列表（重点）

列表项
- 内只能放
- 相当于一个容器，可以容纳所有元素无序列表会带有自己的样式属性，但在实际使用时，我们会使用css来设置 ul作为父亲，li作为儿子，可以多个，li内可以放置任何标签

10p有序列表
有排列顺序的列表

里放
注意事项与无序列表基本一致

11p自定义列表
对术语或名词进行解释和描述

自定义列表与

一起来使用

围绕

来使用 1.

里面只能包含和

和

个数没有限制，经常是一个

对应多个

12p列表总结
无序标签

没有顺序，使用较多

有序标签
有顺序，使用较少自定义列表
里面只能包含dt和dd

注意：
1.学会什么时候用无序列表，什么时候用自定义列表
2.无序列表和自定义列表怎么写

13p表单使用场景以及分类
3.1为什么需要表单
收集用户信息
我们需要跟用户交互

3.2表单的组成
表单域，表单控件（表单元素），提示信息
最常见于注册页面

14p表单域
包含表单元素的区域

用于定义表单域，以实现用户信息的收集和传递会把它范围内的表单元素信息提交给服务器

3.3 表单域
1.在写表单元素之前，应该有个表单域把他们进行包含
2.表单域是form标签
三个属性在服务器编程学习

15p表单控件（表单元素）
1.input输入表单元素
用于收集用户信息
<input type="属性值” />
input为单标签
type属性设置不同的属性值用来指定不同的控件类型

test ：定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
password：定义密码字段，该字段中的字符被掩码，用户看不见的输入密码

16p单选按钮和复选框
单选按钮，可以实现多选一
CheckBox：定义复选框
用
换行

17p name和value属性
name 由用户自定义定义input元素的名称每个表单元素独一无二的

name是表单元素名字，这里性别单选按钮必须有相同的名字name才可以实现多选一 name=“sex”

value 由用户自定义规定input元素的值只在文本框中可以看到效果，单选按钮和复选框看不到

注意：
1.name和value是每个表单元素都有的属性值，主要给后台人员使用
2.name表单元素的名字，要求单选按钮和复选框要有相同的name值

18p
checked 单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮，单选框只可以选择一个加上checked=“checked” 主要针对单选按钮和复选框
maxlength 正整数规定输入字段中的字符的最大长度，一般较少使用

19p四个属性

20p
type属性
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
语法格式

reset 定义重置按钮，重置按钮会清除表单中的所有数据
<input type=“reset” value="重新填写”>

21p
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
例如获取验证码，不提交数据
普通按钮
<input type=“button” value="获取短信验证码”>

file 文件域使用场景，上传文件使用的
例如上传头像：

22p
标签为input元素定义标注（标签）
用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
男

核心：标签的for属性应当与相关元素的id属性相同

23p
select下拉表单元素
多个选项让用户选择，并且想要节约页面空间

山东人 ...... ...

1.select中至少包含一对option
2.在option中定义selected=“selected”时，当前项即为默认选中项

24p textarea文本域元素
在用户输入内容较多的情况下，就不能使用文本框表单了
用于定义多行文本输入的控件
可以输入更多的文字，常见于留言板，评论

今日反馈： pink老师，我知道这个反馈留言是textarea来做的实际开发用css来改变大小

26p综合案例

30p查阅文档
百度
w3c
mdn

01p css层叠样式表导读

2p css简介
主要使用场景是美化网页，布局页面
1.HTML的局限性
只关注内容的语义

1.2 css 层叠样式表的简称
css样式表
也是一种标记语言
主要用来设置HTML页面中的文本内容，图片的外形，版面的布局和外观显示样式

总结
1.HTML主要做结构，显示元素内容
2.css美化HTML，布局网页
3.样式与结构相分离

3p css语法规范
两部分
1,选择器
2，一条或多条声明

体验
写在head标签里
在style标签里
选择器样式，给谁改样式
p {
color：pink；
font-size：12px；修改了文字大小为12像素
}

4p css代码风格
不是强制规范，而是符合实际开发方式

1.样式格式书写
展开格式
h3 {
color：pink；
font-size：12px；修改了文字大小为12像素
}
2.样式大小写，通常使用小写格式
3.空格规范
h3 {
color： pink；
}
3.1.属性值前面，冒号后面，保留一个空格
3.2，选择器（标签）和大括号中间保留空格

5p 选择器的作用
根据不同需求把不同的标签选出来，选择标签用的
1.选对人
2.做对事

6p 标签选择器
基础选择器由单个选择器组成
1.标签选择器
用HTML名称作为选择器，按标签名称分类，为页面中某一标签指定统一的css样式
作用：
把某一类标签全部选择出来，比如所有的div标签
优点：
能快速为页面中同类型的标签统一设置样式
缺点：
不能设计差异化样式，只能选择全部的当前标签

7p 类选择器
单独选一个或者某几个标签
.类名 {
属性1：属性值1；
,
}

语法
结构需要用class属性来调用class类的意思

变红色

口诀：样式点定义结构类（class ）调用一个或多个开发最常用

注意：
1.类选择器使用“.”进行标识，后面紧跟类名（自定义，我们自己命名的），不能使用标签名
2.可以理解为给这个标签起了个名字
3.长名称或词组可以使用中横线为选择器命名
4.不要使用纯数字，中文等命名，尽量使用英文字母来表示
5.命名要有意义，尽量使别人一眼就知道这个类名的目的
6.命名规范
头：header
内容：container
尾：footer
导航：nav
侧栏：sidebar

8p 使用类选择器画盒子
1.类选择器的使用
2.div就是一个盒子，用来装网页内容

9p 类选择器-多类名
可以给一个标签指定多个类名
一个标签有多个名字

1.多类名使用方式

亚瑟

(1)在标签class属性中写多个类名 (2)多个类名中间必须用空格分开

2.使用场景
（1）可以把一些标签元素相同的样式（共同的部分）放到一个类的里面
（2）这些标签都可以调用这个公共的类，然后再调用自己独有的类
（3）从而节省css代码，统一修改也非常方便

10p id选择器
HTML元素以id属性来设置id选择器，css中id选择器以“#”来定义
例
#nav {
color：red；
}

注意：口诀：样式通过#定义，结构id调用，只能调用一次，别人切勿使用

id选择器和类选择器的区别
（1）类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
（2）id选择器好比人的身份证号码，全中国是惟一的，不得重复
（3）id选择器和类选择器最大的不同在于使用次数上
（4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

11p 通配符选择器
使用“*”来定义，选取页面中所有元素
把html body div span li 统一修改样式
特殊情况下才使用，后面讲解使用场景
*{color：red}

如果是修改样式，类选择器是使用最多的

12p font-family设置字体
3.1字体系列
p {
font-family：‘微软雅黑’；
}
Microsoft YaHei
可以写多种字体，之间用，分隔
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体
最常见的几个字体：tahoma，arial
按照顺序找电脑是否装这种字体
谷歌浏览器默认为微软雅黑
通常给body定义

13p文字大小
font-size
px是我们网页的最常用的单位，默认16像素，我们尽量给一个明确值大小，可以给body设置整个字体的大小

body {
font-size： 16px；
}

标题标签比较特殊，需要单独指定文字大小

body {
font-size： 12px；
}

14p 字体粗细
font-weight
normal：最正常，相当于numbee为400
bold：粗体
title标签里
.bold {
font-weight: bold;
}
body标签里

最提倡用数字
font-weight： 700；
这个700的后面不要跟单位，等价于bold都是加粗的效果
实际开发中更提倡用数字，表示加粗或变细
100-900
学会让加粗标签(h和strong）不加粗，或者其他标签加粗

15p 文字样式
font-style
p {
font-style：italic；
}
em，i 标签斜体
经常让一个倾斜的字体不倾斜
em {
font-style：normal；
}

16p font之混合属性
body {
font：font-style font-weight font-size/line-height font-family;
font：italic 700 16px ‘Microsoft yahei’;
}
复合属性font开头
不能颠倒顺序！
各个属性用空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
font： 20px ‘黑体’；

17p 字体属性总结

18p 文本颜色 color
color属性用于定义文本的颜色
div {
color: pink；
}
或color： #ff0000；红色
16进制的颜色
RGB代码：
color： rgb（255,0,255）；粉红色
实际开发时，16进制用的最多

19p 文本对齐text-align
div {
text-align：center；
}
left 左对齐（默认值）
right 右对齐
center 居中对齐
本质是让h1盒子里面的文字居中对齐

20p 装饰文本
text-decoration，可以添加下划线，删除线，上划线
none 默认，没有装饰线（最常用）
underline 下划线，链接a自带下划线（常用）
overline 上划线（几乎不用）
line-through 删除线（不常用）

取消a默认的下划线，用none
重点记住如何添加下划线 underline，如何删除下划线

21p 文本缩进
text-indent属性是用来指定文本的第一行的缩进，通常是将段落的首行缩进
p {
text-indent： 20px；
}
文本的第一行首行缩进多少距离
em是一个相对单位，当前元素（font-size）1个文字的大小

22p 行间距
line-height用于设置行间的距离（行高），由上间距和下间距组成，改变的是上间距和下间距
默认文本高度16px
测量工具:FastStone Capture
屏幕标尺测量上一行的最下沿到下一行的最上沿

23p 文本属性总结

24p 内部样式表
css的引入方式，分为三大类
1.行内样式表
2.内部样式表
3.外部样式表

5.2内部样式表
写到html页面内部，但是单独写到style标签内部，通俗放在head内部
部分分离，但是没有实现结构与样式完全分离
可以方便控制当前整个页面中的元素样式设置
使用内部样式表设定css，通常也称为嵌入式引入

25p 行内样式表
在元素标签内部的style属性中设定css样式，适合于修改简单样式

青春不常在，抓紧谈恋爱

style其实就是标签的属性可以控制当前的标签设置样式不推荐大量使用，只有简单修改

26p 外部样式表
适合于样式比较多的情况
核心：样式单独写到css文件中，之后把css文件引入到HTML页面中使用
引入外部样式表分为两步：
1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中
这个css文件里面只有样式没有标签
div{
color： pink；
}
2.在HTML页面中，用标签引入这个文件

style.css

27p css引入方式总结
外部样式表使用最多完全实现结构和样式相分离

28p 新闻页面综合案例

分隔页面

1.搭建html页面

29p 修改css样式新闻页面
font-weight：400；不加粗
font：16px/28px ‘Microsoft YaHei’; 必须有字号大小，字体间距
text-align:center;

30p 修改样式二
屏幕拾色器确定颜色
#666666 #666
#ff00ff #f0f

31p 修改样式3
首行缩进两个字的距离
p {
text-indent： 2em；
}
想要图片居中对齐，则是让他的父亲p添加标签

32p chrome调试工具

01p css第二天导读

02 emmet语法生成html标签
使用缩写，提高编写速度
1.快速生成html结构语法

生成标签，按tab键
生成多个，加上*即可
父子级，可以用>
兄弟级，可以用+
带有类名或者id名字的，直接写.demo或者#two tab键
如果生成的div类名是有顺序的，可以用自增符号$
.demo$*5
div{我不喜欢男人} 按tab键 div{$}*5

03-emmet语法快速生成css样式
采取简写的形式，第一个字母，就可以自动生成

04-快速格式化代码
右键格式化文档

05-复合选择器简介
建立在基础选择器之上
由两个或多个组成

06-后代选择器
包含选择器，可以选择父元素里面所有子元素
例如把ol里面的小li选出来改为pink
ol li {
color：pink；
}
元素一元素二 { 样式声明 }
选择元素1里面的所有元素2（后代元素）
重点
元素一和元素二中间用空格隔开
最终选择的是元素2
元素2可以是儿子，也可以是孙子的等，只要是元素1的后代即可
例如
ol li a {
color：red；
}
元素一和元素二可以是任意基础选择器
若区分相同的段落，可以用class
.nav li a{
color:yellow;
}

07-子元素选择器
只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子
语法
元素1>元素2{ 样式声明 }
例如
div > p { 样式声明 }

09-并集选择器
可以选择多组标签，用时为他们定义相同的格式，通常用于集体声明
并集选择器是各选择器通过，连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法
元素1，元素2 {样式声明}
上述语法表示选择元素1和元素2
约定的语法规范，并集选择器喜欢竖着写
一定要注意，最后一个选择器，不需要加逗号

10-链接伪类选择器上
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素
书写最大的特点是用冒号表示
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的标签
a:active 选择活动链接（鼠标按下未弹起的标签）

<style>

          a:link {
              color:#333;
              text-decoration: none;
          }
          a:visited {
              color:hotpink;
          }
          a:hover {
              color:skyblue;
          }
          a:active {
              color:green;`在这里插入代码片`
          }
    </style>
</head>
<body>
    <a href="#" >小猪佩奇</a>
</body>
</html>

hover使用最多

11-下
1.按照link ,visited,hover,active的顺序
love hate
LVHA
2.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

实际开发时写法，先写a，然后给a单独指定样式

12-focus伪类选择器
：focus伪类选择器用于选取获得焦点的表单元素
把获得光标的input表单元素选取出来
input：focus{
background-color：pink；
color:red;
}

14-元素显示模式
网页标签，了解他们的特点可以更好的布局我们的网页
就是元素（标签)以什么方式进行显示，
HTML元素一般分为块元素和行内元素，例如div和span

15-块元素
div属于最典型的块元素
四个特点
1.比较霸道，自己独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器body的100%
4.是一个容器及盒子，里面可以放行内或者块级元素

注意：
文字类的元素不能使用块级元素
p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
同理，h1~h6等都是文字类块级标签，里面也不能放其他块级元素

16-行内元素
span是最典型的行内元素，有的地方也将行内元素称为内联元素
四大特点
1.相邻行内元素在一行上，一行可以显示多个
2.高，宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4，行内元素只能容纳文本或其他行内元素

注意：
链接里面不能再放链接
特殊情况链接里面可以放块级元素，但是给a转换一下块级元素最安全

17-行内块元素
img，input，td，它们同时具有块元素和行内元素的特点
特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身内容的宽度（行内元素特点）
3.高度，行高，外边距，以及内边距都可以控制（块级元素特点）

19-显示模式的转换
一个模式的元素需要另外一种模式的转换
比如想要增加链接a的触发范围

行内元素a转换为块元素：display：block；（重点）
块级元素div转换为行内元素：display：inline；
其他元素转换为行内块元素：display：inline-block；（重点）

20-snipaste
截图

21-简洁版小米侧边栏
1.把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度 display：block；
2,鼠标经过a给链接设置背景颜色

font-size：字体的尺寸
text-indent：2em；首行缩进
鼠标按住alt键，然后c，取色

22-单行文字垂直居中的原理
一个小技巧
css没有提供
让文字的行高等于盒子的高度
line-height=height
行高由文字本身高度和上空隙和下空隙
简单理解：行高的上空隙和下空隙把空气挤到中间了
如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下

23-背景颜色
默认透明

24-背景图片
优点是便于控制位置
background-image：none| url（url）；
使用绝对或相对地址指定背景图像

25-背景平铺
background-repeat：no-repeat；背景不平铺
repeat 背景平铺
repeat-x 背景沿着x轴平铺
repeat-y 沿着y轴平铺
页面元素即可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

26-背景位置-方位名词
background-position：x y；
可以使用方位名词或者精确单位
1，方位名词
background-position：center top；
right center
两个词的顺序无关
只指定一个方位名词，另外一个词是默认的，水平靠右侧对齐，第二个参数省略y轴是垂直居中显示的
第一个参数是top y轴顶部对齐，第二个参数省略x轴是水平居中显示的
默认居中对齐，一个水平，一个垂直

27-背景位置案例1
font-weight：400px；文字不加粗
检查，选定图片，右键，open in new tab
插入图片非常难改位置，一般用背景图片插入
重复的话，用no-repeat
text-indent：1.5em；

28-案例2超大背景图片
background-position：top center；
一般都是用这个

29-精确位置
参数是精确单位，第一个肯定是x轴单位，第二个肯定是y轴单位，可以精准调整位置
如果只指定一个数值，那么那个数值一定是x轴，另一个默认垂直居中

30-背景位置-混合单位
1.参数是混合单位
两个值是方位名词和精确单位混合使用，那么第一个一定是x坐标，第二个是y坐标

31-背景固定
是否固定还是随着页面的其余部分滚动 background-attachment： scroll | fixed
默认随着对象内容滚动，scroll
把背景图像固定住，fixed
视差滚动的原理

32-背景属性混合写法
合并缩写在同一个属性中，没有特定的书写习惯
背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置
用空格隔开

33-背景颜色半透明
css3
background：rgba（0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0-1之间
我们习惯上把0.3的0去掉
背景半透明是指盒子背景半透明，盒子里面的内容不受影响

35-五彩导航
1.链接属于行内元素，但是此时需要宽度高度，因此需要模式转换
2.里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码
3.链接里面需要设置背景图片，需要背景相关的属性
4.链接伪类选择器

 <style>
        .nav a{
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 58px;
            color: #fff;
            text-decoration: none;
        }
        .nav .bg1 {
           background: url(images/bg1.png) no-repeat;
        }
        .nav .bg1:hover{
            background-image: url(images/bg11.png);
        }
        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }
    </style>

<div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>

01-css三大特性之层叠性
给相同选择器设置相同的样式，出现冲突，实行就近原则
样式不冲突，不会层叠

02-继承性
子标签继承父标签的某些样式，适当的使用继承可以简化代码
比如text-，font-，line-，color属性，跟文字相关的

03-行高的继承
行高可以跟单位也可以不跟单位
12px/1.5
所有的子元素是行高的1.5倍，子元素继承了父元素body的行高
如果子元素没有指定行高，则会继承父元素的行高为1.5，此时为文字大小*1.5
body行高1.5，这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高

04-优先级
当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，执行层叠性
选择器不同，根据选择器权重产生
从小到大·
继承或者*
元素选择器
类选择器，伪类选择器
ID选择器
行内样式style=“”
！important重要的

05-优先级注意的问题
1.权重是有四组数字组成，但是不会有进位
2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值
4.通配符和继承权重是0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important无穷大
5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
6.a链接浏览器默认制定了一个样式：蓝色的，有下划线的，给body设置样式没有用

选择器类型

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type=“text”]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

三、权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

06-权重叠加
复合选择器会有权重叠加的问题，需要计算权重
ul li>li
.nav li>ul li>li
权重虽然会叠加，但是永远不会有进位
div ul li 0,0,0,3

08-盒子模型

09-看透网页布局本质
页面布局三大核心，盒子模型，浮动，定位
网页布局过程
1.先准备好相关的网页元素，基本都是盒子
2.利用css设置盒子样式，然后摆放到相关位置
3.往盒子里面装内容
核心本质：利用css摆盒子

10-盒子模型组成部分
盒子里面的内容
border
content
padding
margin

11-盒子模型边框border
border-width：边框的粗细
border-style：solid（实线边框）
dashed（虚线）
dooted（点线）
border-color

12-边框的复合写法
边框简写：
border：1px solid red；没有顺序
边框分开写法：
border-top：1px solid red；（只设定上边框）
border-bottom 下边框
层叠性，四条边是蓝色，上边框是红色，节省代码，其他三条边必须写在上面，否则会被覆盖

13-表格细线边框
border-collapse：collapse；
合并相邻边框
table，
td，th {

}

14-边框会影响盒子实际大小
1.测量盒子时不测量边框
2.包含边框，需要width/height减去边框宽度

15-盒子模型内边距padding
边框与内容的距离
padding-left 左内边距
padding-right 右内边距
top bottom

16-padding复合属性
padding：5px；
上下左右都有5像素内边距
padding：5px 10px；
上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px；
上内边距5像素，左右内边距10像素，下内边距20像素
padding：5px 10px 20px 30px；
上右下左顺时针

17-padding会影响盒子实际大小
width和height减去padding的内边距大小即可

18-新浪导航栏
a属于行内元素，此时必须换成行内块元素

20-小米侧边栏修改

21-padding不会撑开盒子
不定义height和width属性，此时padding不会撑开盒子大小

22-盒子模型外边距margin
上下左右

23-块级盒子水平居中
1.盒子必须指定宽度
2.左右的外边距设定为auto
margin：0 auto；

24-行内元素和行内块元素水平居中
让块级元素水平居中，给其父元素添加text-align：center；

26-外边距合并-嵌套块元素塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边框，此时父元素会塌陷较大的外边距值
解决方案:
1.为父元素定义上边框 transparent border
2.为父元素定义上内边框 padding
3.可以为父元素添加overflow：hidden

27-清除内外边距
*{
margin：0；
padding：0；
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素即可

28-ps的基本操作
文件-打开
视图-标尺
右击标尺，单位改为像素
Ctrl+加号放大视图
按住空格键，鼠标可以变成小手，拖动ps视图
用选区拖动，可以测量大小
在旁边空白处点击一下可以退出测量

29-综合案例
修改图片大小
.box img {
width:100%;
}

|
font-style:normal;
由加粗变为浅灰色

text-decoration：none；链接没有下划线

34-解答
1.布局为什么用不同盒子
合理的地方用合理的标签，起类名是一个很好的习惯
可以更好的找到这个盒子

2.margin和padding
根据实际情况

01-综合案例-快报模块布局分析
去掉li前面的项目符号
list-style：none；

04-圆角边框原理（重点）
border-radius：length；
10px
radius：圆的半径

05-圆角边框的使用
参数可以用数值也可以用百分比
border-radius：50%；
宽度和高度的一半
圆角矩形设置为高度的一半
简写属性，可以跟四个值，顺时针，左上角，右上角，右下角，左下角

06-盒子阴影（重点）
box-shadow
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小 -4px
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 rgba（0,0,0,0.3）
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：
1.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列

div：hover {
添加属性
}

07-文字阴影（了解）
text-shadow
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离，虚的还是实的
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 rgba（0,0,0,0.3）

08-浮动

09-传统网页布局三种方式
网页布局的本质，用css来摆放盒子
盒子如何进行排列顺序
普通流（标准流）
浮动
定位

标准流：标签按照规定好默认方式排列
1.块级元素会独占一行，从上向下顺序排列
常用：div，hr，p，h1-h6，ul，ol，dl（定义列表），form，table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
span,a,i,em（倾斜）
标准流是最基本的布局方式

一个页面基本都包含了三种布局方式

10-为什么需要浮动
浮动可以改变元素默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

11-什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器{ float：属性值；}
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

12-浮动特性-脱标（重点）
1.浮动元素会脱离标准流

1.脱离标准流的控制，移动到指定位置
2.浮动的盒子不再保留原先位置

13-浮动元素一行显示
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
在一行显示，三个div都要设置浮动属性

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

14-浮动元素具有行内块元素
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

15-浮动元素经常搭配标准流的父元素
为了约束浮动元素，我们网页布局一般采取的策略是
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
准备标准流父盒子，约束浮动的盒子

16-练习1
网页布局第二准则
先设置盒子大小，再设置盒子内容
.right>div {
}
只设置亲儿子，第一个

20-常见的页面布局
只要是通栏的盒子（和浏览器一样宽）不需要指定宽度

21-浮动的两个注意点
1.浮动和标准流的父盒子搭配
2.一个元素浮动了，其他的兄弟元素也会浮动

<!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;
            }

            li {
                  list-style: none;
            }

            .top {
                  height: 50px;
                  background-color: gray;
            }

            .banner {
                  width: 980px;
                  height: 150px;
                  background-color: gray;
                  margin: 10px auto;
            }

            .box {

                  width: 980px;
                  margin: 0 auto;
                  height: 300px;
                  background-color: pink;
            }

            .box li {
                  float: left;
                  width: 237px;
                  height: 300px;
                  background-color: gray;
                  margin-right: 10px;
            }

            .box .last {
                  margin-right: 0;
            }

            .footer {
                  height: 200px;
                  background-color: gray;
            }
      </style>
</head>

<body>
      <div class="top">top</div>
      <div class="banner">banner</div>
      <div class="box">box
            <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li class="last">4</li>
            </ul>
      </div>
      <div class="footer">footer</div>
</body>

</html>

21-浮动的注意点
一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

22-为什么清除浮动
浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的
由于父盒子很多情况下，不方便给高度，但是子盒子又不占用位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

23-清除浮动本质以及额外标签法
本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：
选择器{clear：属性值；}
left 清除左侧浮动的影响
right 清除右侧
both 同时清除
实际工作中，几乎只用clear：both；
策略是：闭合浮动
只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
方法
1.额外标签法
w3c推荐的
在浮动元素末尾添加一个空的标签
如

.clear {
clear:both;
}
添加许多无意义的标签，结构化较差
注意：添加的元素标签必须是块级元素不能是行内元素

总结：
1.清除浮动的本质是清除浮动元素脱离标准流造成的影响
2.额外标签，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式

24-父级添加overflow属性
属性值设置为hidden，auto，scroll
给父元素添加代码
代码简洁，无法显示溢出的部分

25-after伪元素

.clearfix:before, .clearfix:after {   
    content:"";   
    display:table;   
}   
.clearfix:after{   
    clear:both;   
    overflow:hidden;   
}   
.clearfix{   
    *zoom:1;   
} 
 <div class="box clearfix">

26-双伪元素

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}

27-总结
影响下面布局，清除浮动
父级没高度
子盒子浮动了

01-常见的图片格式
1.jpg格式：产品类的图片经常用jpg格式
2.gif：可以保存透明背景和动画效果
3.png：切成背景透明的图片，选择png
4.psd：设计稿，ps的专用格式，可以直接从上面复制文字，获得图片，还可以测量大小和距离

02-ps切图
图层切图
右击图层-快速导出为png

03-合并图层
选中需要的图层：图层菜单–合并图层（crtl+e）
右击图层-快速导出为png

04-切片工具
1.利用切片工具手动划出
2.导出选中的图片
文件菜单–导出–存储为web设备所用格式–选择我们要的图片格式–存储

05-cutterman使用器

08-css属性书写顺序（重点）
1.布局定位顺序
display（第一个）block
float
clear
visibility
overflow
position
2.自身属性
width
height
margin
padding
border
background
3.文本属性
color
font
text-decoration
text-align
4.其他属性（css3）
background rgba（0，0，0，.3）
border-radius

09-页面布局整体思路
1.确定页面的版心（可视区），测量可知
2.分析页面中的行模块，以及每个行模块中的列模块，其实页面布局第一准则
3.一行中的列模块经常浮动布局，先确定每个列的大小，确定列的位置页面布局第二准则
4.先有结构，后有样式
5.先理清布局结构

12-导航栏nav区域制作
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）
的做法

li+a语义更清晰
直接用a，容易辨别为由堆砌关键字嫌疑

注意：
1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2.a是行内元素，没有高度，加display：block；
3.这个nav导航栏可以不给宽度，将来可以继续添加其余文字
4.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

15-搜索模块input制作
一个search大盒子里面包含2个表单
input文本框 button按钮

学成在线

<!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="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">
                  <form action="">
                        <input type="text" value="输入关键词">
                        <button>搜索</button>
                  </form>
            </div>
            <!-- 用户模块 -->
            <div class="user">
                  <img src="user.png" alt="">
                  qq-lilei
            </div>
      </div>
      <!-- 头部区域结束啦 -->
      <!-- banner部分开始 -->
      <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="#">前端开发<span> > </span></a></li>
                              <li><a href="#">前端开发<span> > </span></a></li>
                        </ul>
                  </div>
                  <!-- 课程表模块 -->
                  <div class="course">
                        <h2>我的课程表</h2>
                        <div class="bd">
                              <ul>
                                    <li>
                                          <h4>继续学习 程序语言设计</h4>
                                          <p>正在学习-使用对象</p>

                                    </li>
                              </ul>
                              <ul>
                                    <li>
                                          <h4>继续学习 程序语言设计</h4>
                                          <p>正在学习-使用对象</p>

                                    </li>
                              </ul>
                              <ul>
                                    <li>
                                          <h4>继续学习 程序语言设计</h4>
                                          <p>正在学习-使用对象</p>

                                    </li>
                              </ul>
                              <a href="#" class="more">全部课程</a>
                        </div>
                  </div>
            </div>
      </div>
      <!-- banner部分结束 -->
      <!-- 精品推荐模块开始 -->
      <div class="goods w">
            <h3>精品推荐</h3>
            <ul>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
            </ul>
            <a href="#" class="mod">修改兴趣</a>
      </div>
      <!-- 精品推荐模块结束 -->
      <!-- box核心内容区域开始 -->
      <div class="box w">
            <div class="box-hd">
                  <h3>精品推荐</h3>
                  <a href="#">查看全部</a>
            </div>
            <div class="box-bd">
                  <ul class="clearfix111">
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    博客系统实战项目演练
                              </h4>
                              <div class="info">
                                    <span>高级</span> . 1125人在学习
                              </div>
                        </li>

                  </ul>
            </div>
      </div>
      <!-- box核心内容区域结束 -->
      <!-- footer模块制作 -->
      <div class="footer">
            <div class="w">
                  <div class="copyright">
                        <img src="logo.png" alt="">
                        <p>致力于普及中国最好的教育</p>
                        <a href="#" class="app">下载app</a>
                  </div>
                  <div class="links">
                        <dl>
                              <dt>关于学成网</dt>
                              <dd>关于</dd>
                              <dd>管理团队</dd>
                              <dd>工作机会</dd>
                              <dd>客户服务</dd>
                              <dd>帮助</dd>
                        </dl>
                  </div>
            </div>
      </div>
</body>

</html>

* {
      margin: 0;
      padding: 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;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}
.header {
      height: 42px;
      
      /* 注意此地会重叠w里面的margin */
      margin: 30px auto;
}
.logo {
      float:left;
      width: 198px;
      height: 42px;
      
}
.nav {
      float:left;
      margin-left: 60px;
}
.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;
      text-decoration: none;
}
.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: 0;
      color:#bfbfbf;
      font-style: 14px;
      padding-left: 15px;
}
.search button {
      float: left;
      width: 50px;
      height: 42px;
      background-color: skyblue;
      /* 按钮button默认有个边框需要我们手动去掉 */
      border: 0;
}
.user {
      float: right;
      line-height: 42px;
      line-height: 30px;
      font-style: 14px;
      color: #666;
}
/* banner区域 */
.banner {
     height: 421px;
     background-color: #1c036c;
}
.banner .w{
      height: 421px;
      background: url(shipin.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-style: 14px;
      color:#fff;
}
.subnav ul li a span {
      float: right;
}
.subnav ul li a:hover{
      color:#00a4ff;
}
.course {
      float:right;
      width: 230px;
      /* height: 300px; */
      background-color: #fff;
      /* 浮动的盒子不会有外边框合并的问题 */
      margin-top: 50px;
}
.course h2 {
      height: 48px;
      background-color: #9bceea;
      text-align: center;
      line-height: 48px;
      font-style: 18px;
      color: #fff;
}
.bd {
      padding: 0 20px;
}
.bd ul li {
      padding: 14px 0;
      border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
      font-style: 16px;
      color:#4e4e4e;
}
.bd ul li p {
      font-style: 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-size: 16px;
     font-weight: 700;
     margin-bottom: 5px;
}
/* 精品推荐模块 */
.goods {
      height: 60px;
      background-color: #fff;
      margin-top: 10px;
      box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
      /* 行高会继承，会继承给3个孩子 */
      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-left: 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;
}
/* 把li的父亲ul修改的足够宽一行能撑开5个盒子就不会换行了 */
.box-bd ul {
      width: 1225px;
}
.box-bd ul li {
      float: left;
      width: 228px;
      height: 270px;
      background-color: #fff;
      margin-right: 15px;
      margin-bottom: 15px;
}
.box-bd ul li img {
      width: 100%;
}
.box-bd ul li h4 {
      margin: 20px 20px 20px 25px;
      font-style: 14px;
      color:#050505;
      font-weight: 400;
}
.box-bd .info {
      margin: 0 20px 0 25px;
      font-size: 12px;
      color: #999999;
}
.box-bd .info span{
      color: #ff7c2d;
}
/* footer模块 */
.footer {
      height: 415px;
}
.footer .w {
      padding-top: 35px;
}

.copyright {
    float: left;
}
.copyright p {
     font-size: 12px;
     color:#666;
     margin: 20px 0 15px 0;
}
.copyright .app {
      width: 118px;
      height: 33px;
      border: 1px solid #00a4ff;
      text-align: center;
      line-height: 33px;
      color:#00a4ff;
      font-size: 16px;

}
.links {
      float:right;
}

02-为什么需要定位
定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

03-定位组成
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置

1.定位模式
position
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

2.边偏移
top，bottom，left，right
偏移量

04-相对定位
静态定位
无定位
{ position：static；}
按照标准流特性
很少用

相对定位relative
相对原来位置
{position：relative；}
特点：
1.参照自己原来位置移动
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

05-绝对定位absolute（重要）
相对于祖先元素
{position：absolute；}
特点：
1.如果没有父元素，或者父元素没有定位，根据浏览器决定
2.如果父元素有定位，以最近一级的有定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置（脱标）

08-由来
子级是绝对定位的话，父级要用相对定位
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此父亲只能是相对定位
相对定位经常作为绝对定位的父级
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

09-hot模块

10-固定定位fixed（重要）
是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
{position：fixed；}
特点
1.以浏览器的可视窗口为参照物
跟父元素没有任何关系
不随滚动条滚动
2.固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

11-固定到版心右侧
小算法：
1.让固定定位的盒子left：50%。走到浏览器可视区（版心）的一半位置
2.让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置

12-粘性定位
sticky
{position：sticky；top：10px；}
特点
1.以浏览器的可视窗口为参照物
2.占有原先的位置
3.必须添加，top，left，right，bottom其中一个
兼容性差，ie不支持

14-定位的叠放顺序
盒子重叠，用z-index来控制盒子的前后次序（z轴）
{ z-index：1；}
数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

15-绝对定位的盒子居中算法
1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0 auto水平居中
1.left：50%；：让盒子的左侧移动到父级元素的水平中心位置
2.margin-left：-100px；让盒子向右移动自身宽度的一半

16-定位的特殊特性
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
3.脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位元素的都不会触发外边距合并的问题

17-绝对定位会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素
float：left；

18-淘宝图焦点图布局分析
如果一个盒子既有left属性也有right属性，默认执行left属性，同理，top，bottom会执行top
白色半透明 rgba（255，255,255，.3）

24-网页布局总结

25-display显示隐藏元素
元素的显示与隐藏
让一个元素在页面显示或隐藏出来
1.display 显示隐藏
2.visibility 显示隐藏
3.overflow 溢出显示隐藏

display:none ;隐藏对象
display:block; 显示元素
display隐藏元素后，不再占有原来的位置

26-visibility
visibility：hidden；元素隐藏
visibility：visible；元素可视
隐藏元素后，继续占有原来的位置

27-overflow
溢出部分显示或隐藏
overflow四个属性：

1）visible 可见，超过部分显示出来，无滚动条

2）hidden 超过部分不可见，无滚动条

3）scroll 有滚动条

4）auto 超过部分才显示滚动条，不超过不显示

如果有定位的盒子，慎用overflow：hidden，因为它会隐藏多余的部分

28-土豆案例
原先黑色半透明的盒子看不见，鼠标经过会看见
需要用display和绝对定位

<!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>
            .tudou {
                  position: relative;
                  width: 444px;
                  height: 320px;
                  background-color: pink;
                  margin: 30px auto;
            }

            .tudou img {
                  width: 100%;
                  height: 100%;
            }

            .mask {
                  display: none;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0, 0, 0, .4) url(arr.jpg) no-repeat center;
            }

           

            .tudou:hover .mask {
                  display: block;
            }
      </style>
</head>

<body>
      <div class="tudou">
            <div class="mask">
                  
            </div>
            <img src="tudou.jpg" alt="">
</body>

</html>

01-css高级技巧

02-精灵图
为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

03-精灵图的使用
使用精灵图的核心
1.精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片上
2.移动背景图片位置，background-position
3.主要通过移动x轴和y轴，注意网页坐标和普通坐标不同
4.一般情况下往上往左移动，所以数值是负值，往右走是正值
5.需要准确测量，每个小背景图片的大小和位置

04-使用拼出自己的名字
设置宽高
background：url（images/abcd.jpg） no-repeat -215px -141px;

06-字体图标
iconfont
展示的是图标，显示的是字体
优点：轻量级，灵活性，兼容性
字体图标不能替代精灵技术
总结
1.结构和样式比较简单的，用字体图标
2.复杂的用精灵图

07-字体图标下载
1.下载
2.引入到HTML
3.追加（以后添加新的）

08-应用

<!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>
            /* 字体声明 */
            @font-face {
                  font-family: 'icomoon';
                  src: url('fonts/icomoon.eot?atws6j');
                  src: url('fonts/icomoon.eot?atws6j#iefix') format('embedded-opentype'),
                        url('fonts/icomoon.ttf?atws6j') format('truetype'),
                        url('fonts/icomoon.woff?atws6j') format('woff'),
                        url('fonts/icomoon.svg?atws6j#icomoon') format('svg');
                  font-weight: normal;
                  font-style: normal;
                  font-display: block;
            }

            span {
                  font-family: 'icomoon';
                  font-size: 300px;
                  color: pink;
            }
      </style>
</head>

<body>
      <span></span>
      <span></span>
</body>

</html>

10-css三角的做法

<!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 {
                  width: 0;
                  height: 0;
                  border-top: 10px solid pink;
                  border-right: 10px solid hotpink;
                  border-bottom: 10px solid plum;
                  border-left: 10px solid greenyellow;
            }

            .box2 {
                  width: 0;
                  height: 0;
                  border: 10px solid transparent;
                  border-left-color: pink;
                  margin: 100px auto;
            }
      </style>
</head>

<body>
      <div class="box1"></div>
      <div class="box2"></div>
</body>

</html>

11-京东三角

<!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 {
                  width: 0;
                  height: 0;
                  border-top: 10px solid pink;
                  border-right: 10px solid hotpink;
                  border-bottom: 10px solid plum;
                  border-left: 10px solid greenyellow;
            }

            .box2 {
                  width: 0;
                  height: 0;
                  border: 10px solid transparent;
                  border-left-color: pink;
                  margin: 100px auto;
            }

            .jd {
                  position: relative;
                  width: 120px;
                  height: 249px;
                  background-color: pink;
            }

            .jd span {
                  position: absolute;
                  right: 15px;
                  top: -10px;
                  width: 0;
                  height: 0;
                  line-height: 0;
                  font-size: 0;
                  border: 5px solid transparent;
                  border-bottom-color: aqua;
            }
      </style>
</head>

<body>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="jd">
            <span></span>
      </div>
</body>

</html>

12-用户界面-鼠标样式
li {cursor: pointer; }

<div class="person">
        <ul>
            <li style="cursor: pointer;">小手</li>
            <li style="cursor: move;">移动</li>
            <li style="cursor: not-allowed;">禁止</li>
            <li></li>
        </ul>
    </div>

default 默认

13-表单轮廓和防止拖拽文本域
轮廓线outline就是表单外边的一道轮廓线，默认是有的，我们一般是把它直接去掉，且每个浏览器对outline的显示也不同，例如：

/实际中用border比较多/

防止拖拽主要就是针对文本域textarea，它默认在右下角为之，用户是可以进行拖拽的，这样容易造成页面布局混乱，因此，我们经常这样做：

/直接用resize改为none就能解决拖拽问题/

14-vertical-align属性应用
用于设置图片或者表单（行内块元素）和文字垂直对齐
设置一个元素的垂直对齐方式，只针对于行内元素或者行内块元素有效

定义和用法
vertical-align 属性设置元素的垂直对齐方式。

baseline 默认。元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。

<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p> 

<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>

</body>

15-图片底侧空白缝隙解决方案
效果：（有留白）原因：行内块元素会和文字的基线对齐

1.	image{
		vertical-align: middle;//任意一个属性都可以(提倡使用)
	}

2.	image{
		display: block;//图片改成块级元素
	}

16-溢出的文字用省略号显示
单行文本溢出

display:block;
先强制一行内显示
white-space:nowrap;（normal自动换行）如果显示不开也强制一行内显示
超出的部分隐藏
overflow:hidden;
text-overflow:ellipsis; // 省略号显示

17-多行文本溢出

overflow:hidden;
text-overflow:ellipsis;
弹性伸缩盒子模型显示
display:-webkit-box;
限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;
设置或检索伸缩对象的子元素的排列方式
-webkit-line-clamp:2; // 设置要显示的行数

只有超出才显示省略号
只适合于webkit浏览器或移动端

18-布局技巧
1.margin负值的应用

<!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 {
                  position: relative;
                  float: left;
                  list-style: none;
                  width: 150px;
                  height: 200px;
                  border: 1px solid red;
                  margin-left: -1px;
            }

            ul li:hover {
                  z-index: 1;
                  /* position: relative; */
                  /* 相对定位会压住标准流，只能用相对定位  */
                  border: 1px solid blue;
            }
      </style>
</head>

<body>
      <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
      </ul>
</body>

</html>

20-文字围绕浮动元素小妙招
文字和父盒子一样宽，设置图片浮动

21-行内块的巧妙使用

<!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 {
                  text-align: center;
            }

            .box a {
                  display: inline-block;
                  width: 36px;
                  height: 36px;
                  background-color: #f7f7f7;
                  border: 1px solid #ccc;
                  text-align: center;
                  line-height: 36px;
                  text-decoration: none;
                  color: #333;
                  font-size: 14px;
            }

            .box .prev,
            .next {
                  width: 85px;
            }

            .box .current,
            .box .elp {
                  background-color: #fff;
                  border: none;
            }

            .box input {
                  height: 36px;
                  width: 45px;
                  border: 1px solid #ccc;
                  outline: none;
            }

            .box button {
                  width: 60px;
                  height: 36px;
                  background-color: #f7f7f7;
                  border: 1px solid #ccc;
            }
      </style>
</head>

<body>
      <div class="box">
            <a href="#" class="prev">&lt;&lt;上一页</a>
            <a href="#" class="current">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#" class="elp">...</a>
            <a href="#" class="next">&gt;&gt;下一页</a>
            到第
            <input type="text" value="确定">
      </div>
</body>

</html>

22-css三角巧妙应用
把上边框宽度调大
　　左边下边的边框宽度设置0

.box1 {
         
        width: 0;
        height: 0;
        /*把上边宽度调大一些 实线 颜色改成透明色*/
        /*border-top: 100px solid transparent;*/
        /*左边下边边框宽度设置成0 实线 颜色改成透明*/
        /*border-bottom: 0 solid transparent;*/
        /*border-left: 0 solid transparent;*/
        /*右边边框宽度设置小点 实线 颜色改成可以看见的*/
        /*border-right: 50px solid red;*/
         
        /*符合写法*/
        border-color: transparent red transparent transparent;
        border-width: 100px 50px 0 0;
        border-style: solid;
       }

23-三角巧妙应用


```html
<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            width: 0;
            height: 0;
            /*3.把顶部的颜色设为透明,再把上边框宽度调大*/
            /* border-top: 100px solid transparent;
            border-right: 50px solid green; */
            /*1.首先把border-bottom的边框设为0*/
            /* border-bottom: 0px solid blue; */
            /*2.再把左侧的设为0*/
            /* border-left: 0px solid pink; */
            
            /*简写方式*/
            /*1.只保留右边的边框有颜色*/
            border-color: transparent green transparent transparent;
            /*2.样式都是 solid*/
            border-style: solid;
            /*3.上边框宽度要大，右边框宽度要小，其余的边框该为0*/
            border-width: 100px 50px 0 0;
        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
          

         }
         .miaosha {
             position: relative;
             float: left;
             width: 90px;
             height: 100%;
             background-color: red;
             text-align: center;
             color: #fff;
             font-weight: 700;
             margin-right: 8px;

         }
         .miaosha i {
             position:absolute;
             right: 0;
             top: 0;
             width: 0;
             height: 0;
             border-color: transparent #fff transparent transparent;
             border-style: solid;
             border-width: 24px 10px 0 0;
            
         }
         .origin {
             font-size: 12px;
             color:gray;
             text-decoration: line-through;
         }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">￥427 
            <i></i>
        </span>
        <span class="origin">￥1420</span>
    </div>
</body>

24-css初始化
重设浏览器的样式
每个网页都要css初始化
例如京东

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

宋体                   SimSun     \5B8B\4F53
黑体                   SimHei     \9ED1\4F53
微软雅黑            Microsoft YaHei     \5FAE\8F6F\96C5\9ED1

01-导读

02-HTML5新特性
1.<header>头部标签

2.<nav>导航标签

3.<content>内容标签

4.<section>定义文档某个区域

5.<aside>侧边栏标签

6.<footer>尾部标签

```html
<!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>
            header,
            nav {
                  height: 120px;
                  background-color: pink;
                  border-radius: 15px;
                  width: 800px;
                  margin: 15px auto;
            }

            section {
                  width: 500px;
                  height: 300px;
                  background-color: skyblue;
            }
      </style>
</head>

<body>
      <header>头部标签</header>
      <nav>导航栏标签</nav>
      <section>某个区域</section>
</body>

</html>

03-新增视频标签
1.
定义视频，属性src引入资源，controls视频的控制控件

你的浏览器不支持video标签

以防用户浏览的视频不支持某些格式的视频，可以为用户多准备些格式的视频,目前支持的视频格式video/ogg，video/mp4，video/webm其他格式需要转换

你的浏览器不支持video标签尽量使用mp4标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

</body>
</html>

属性
new : HTML5 中的新属性。

属性值描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。（谷歌浏览器添加muted可以播放）
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 “autoplay”，则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

04-音频格式
2.
该标签可定义声音，及其他的音频文件，不加controls不显示音频的控制界面

你的浏览器不支持audio标签

目前音频可用类型audio/ogg，audio/mpeg

属性
new : HTML5 中的新属性。

属性值描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 “autoplay”，则忽略该属性。

src url 要播放的音频的 URL。

05-新增input表单
HTML5中新增的input类型及其属性
HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括：

color

点击时弹出颜色选择器，可以选择任意颜色
number

输入范围内的数字，可以手动输入超出范围的数字，但不能提交
tel
输入电话号码，只有safari支持
email
自带检测功能，提交时会检测是否包含@符，并且@符前后是否有字符
range

url
输入的网址必须是http://开头，并且后面必须有字符，否则不能提交
date
可以手动选择日期

time
可以手动选择时间

datetime
选择带有时区的日期和时间，ie，firfox和chrome都不支持
datetime-local

选择日期和时间，没有时区
month

和date类型一样，只不过只能选择到月份
week

只能选择到第几周，这种日期方式国内基本很少用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form   action="test1.html"  method="post">
     <input type="email"   name="email" value="1774761877@qq.com">
       <input type="submit"  value="提交">
</form>
</body>
</html>

06-新增表单属性

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" value="提交" />
</form>

</body>
</html>

required 属性规定必需在提交之前填写输入字段。

如果使用该属性，则字段是必填（或必选）的。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>
</html>

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 input 标签的 autofocus 属性。</p>

</body>
</html>

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

如果使用该属性，则 input 元素会获得焦点。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>填写并提交表单，然后重新加载该页面，看看自动完成功能是如何工作的。</p>
<p>注意，表单的自动完成功能是打开的，但是 e-mail 字段的自动完成功能是关闭的。</p>

</body>
</html>

autocomplete 属性规定输入字段是否应该启用自动完成功能。但是必须填入name属性，属性改为off更安全

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
选择图片：<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>请尝试在浏览文件时选取一个以上的文件。</p>

</body>
</html>

multiple 属性规定输入字段可选择多个值。

如果使用该属性，则字段可接受多个值

07-css3新增选择器
1.属性选择器
根据特定的属性来选择元素
img[alt] 选择带有alt属性的img标签
img[alt=“湖南”] 选择alt属性是“湖南”的img标签
img[alt^=“湖南”] 选择alt属性以“湖南”开头的img标签
img[alt$=“湖南”] 选择alt属性以“湖南”结尾的img标签
img[alt*=“美”] 选择alt属性含有“美”字的img标签
img[alt~=“湖南”] 选择alt属性中有空格隔开的“湖南”一词的img标签
img[alt|=“湖南”] 选择alt属性以“湖南-”开头的img标签

<!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>

            /* input[value] {
                  color:pink;
            } */
            input[type=text] {
                  color:pink;
            }
            /* 选择首先是div 然后具有css属性 并且属性值一定是icon开头的这些元素 */
            div[class^=icon] {
                  color:pink;
            }
            section[class$=data] {
                  color:blue;
            }
      </style>
</head>
<body>
      <!--1. 利用属性选择器就可以不用借助于类或者id选择器
      <input type="text">
      <input type="text" value="请输入用户名"> -->
      <!-- 2.属性选择器可以选择属性=值的某些元素 -->
      <input type="text" name="" id="">
      <input type="password" name="" id="">
      <!-- 3.可以选择属性值开头的某些元素 -->
      <div class="icon1">小图标1</div>
      <div class="icon2">小图标2</div>
      <div class="icon3">小图标3</div>
      <div class="icon4">小图标4</div>
      <div>我是打酱油的</div>
      <!-- 4.可以选择属性值结尾的某些元素 -->
      <section class="icon1-data">我是安其拉</section>
      <section class="icon2-data">我是哥斯拉</section>
      <section class="icon3-ico">那我是谁</section>
</body>
</html>

注意：
类选择器和属性选择器伪类选择器权重都是10

09-新增结构伪类选择器-选择第n个元素
主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
父元素 E:first-child 父元素中的第一个子元素 E

父元素 E:last-child 父元素中的最后一个子元素 E

父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E

10-child选择器
nth-child( n ) 注意点：（n 可以是数字，关键字和公式）

数字：选择第 n 个子元素，里面数字从 1 开始

关键字： even 偶数，odd 奇数

ul li:nth-child( even ) // 选择 ul 中所有偶数行的 li 子元素

公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略）

ul li:nth-child( n ) // 从 0 开始每次加1 往后计算，相当于选择了所有的孩子这里面必须是 n 不能是其他字母

偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5

E:first-of-type：指定类型 E 的第一个

E:last-of-type：指定类型 E 的最后一个

E:nth-of-type( n )：指定类型 E 的第 n 个

区别：（两种相反的查找模式）

1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配

2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子

   12----伪元素选择器（重点）

伪元素选择器可以帮助我们利用 css 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构

:: before 在元素内部的前面插入内容

:: after 在元素内部的后面插入内容

注意：

before 和 after 创建一个元素，但是属于行内元素

新创建的这个元素在文档树种是找不到的，所以我们称为伪元素

语法：element::before{ }

before 和 after 必须有 content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1

<!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 {
                  width: 200px;
                  height: 200px;
                  background-color: pink;
            }
            div::before {
                  /* 这个content是必须要写的 */
                  content: '我';
            }
            div::after {
                  content:'小猪佩奇';
            }
      </style>
</head>
<body>
      <div>
            是
      </div>
</body>
</html>

14-伪元素字体图标

<!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>
            @font-face {
                  font-family: 'icomoon';
                  src: url('fonts/icomoon.eot?atws6j');
                  src: url('fonts/icomoon.eot?atws6j#iefix') format('embedded-opentype'),
                        url('fonts/icomoon.ttf?atws6j') format('truetype'),
                        url('fonts/icomoon.woff?atws6j') format('woff'),
                        url('fonts/icomoon.svg?atws6j#icomoon') format('svg');
                  font-weight: normal;
                  font-style: normal;
                  font-display: block;
            }

            div {
                  position: relative;
                  width: 200px;
                  height: 35px;
                  border: 1px solid pink;
            }

            div::after {
                  position: absolute;
                  top: 10px;
                  right: 10px;
                  font-family: 'icomoon';
                  /* content: ''; */
                  content: '/e907'
                        color: thistle;
                  font-size: 18px;
            }
      </style>
</head>

<body>
      <div></div>
</body>

</html>

16-伪元素清除浮动

<!--将clearfix类名加到浮动元素父级盒子上-->
.clearfix:after{
    content:"";             /*设置内容为空*/
    height:0;               /*高度为0*/
    line-height:0;          /*行高为0*/
    display:block;          /*将文本转为块级元素*/
    visibility:hidden;      /*将元素隐藏*/
    clear:both;             /*清除浮动*/
}

17-盒子模型
box-sizing
content-box: 以前默认的
border-box 盒子大小为width
改为这种，padding和border就不会撑大盒子了

18-图片模糊化处理
滤镜filter
filter：函数（）；
filter：blur（5px）； blur模糊处理数值越大越模糊

19-calc函数
计算属性值
width: calc(100%-80px);

20-过渡上
经常和：hover配合使用
transition：要过渡的属性花费时间运动曲线何时开始
谁做过渡给谁加

21-下
如果想要写多个属性，利用逗号分隔，或者直接写all
前两个值必须写，后两个值可写可不写

22-复习过渡进度条

<!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>
            .bar {
                  width: 150px;
                  height: 15px;
                  border: 1px solid red;
                  border-radius: 7px;
                  padding: 1px;
            }

            .bar_in {
                  width: 50%;
                  height: 100%;
                  background-color: red;
                  transition: all .7s;
            }

            .bar:hover .bar_in {
                  width: 100%;
            }
      </style>
</head>

<body>
      <div class="bar">
            <div class="bar_in">

            </div>

      </div>
</body>

</html>

2D转换之translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
1.语法
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
2.重点
定义2D转换中的移动,沿着X和Y轴移动元素
translate最大的优点:不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果
4.3 2D转换之元素转换中心点rotate
旋转360°
transform: rotate(360deg);

2D旋转中心点transform-origin
可以设置元素转换的中心点

语法
transform-origin: x y;
重点
注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）等价于 center
还可以给x y设置像素或者方位名词（top bottom left right center）
案例

原文链接：https://blog.csdn.net/qq_43623147/article/details/111269615
4.4 2D转换之缩放scale
1.里面写的数字不跟单位就是倍数的意思 1 就是1倍 2就是2倍
transform: scale(x, y);
transform: scale(2, 2);
2.修改了宽度为原来的2倍高度不变
transform: scale(2, 1);
3.等比例缩放同时修改宽度和高度,我们有简单的写法以下是宽度修改了2倍,高度默认和第一个参数一样
transform: scale(2);
4.我们可以进行缩小小于1 就是缩放
transform: scale(0.5, 0.5);
transform: scale(0.5);
5.scale 的优势之处: 不会影响其他的盒子而且可以设置缩放的中心点
width: 300px;
height: 300px;
transform: scale(2);
6.可以设置缩放时的中心点
transform-origin: left bottom;
4.6 2D旋转综合写法
1.同时使用多个转换,其格式为:transform:translate() rotate() scale() …等,
2.其顺序会影响转换的效果.(选旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前

京与旧铺

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端pink老师网课

0p前言先听与看，动手练习，分享交流1p品优购静态网站基础班精通网页布局html5基础，没有兼容性的标签css3基础，传统企业网页制作h5c3，有一定兼容性，与未来更好地接轨品优购电商网站2pweb标准3p概念网站网页集合网页 html格式，浏览器阅读图片元素，链接，文字，声音，视频html文件超文本标记语言标记语言标签超文本网页是由网页元素组成的图片，链接，文字，声音，视频，html后缀书写，浏览器打开4p常用的浏览器网页显示，运行的平台chrome
复制链接

扫一扫