上节作业回顾
<style></style>代表的是CSS样式
<script></script>代表的是JavaScript样式
1、CSS重用
<style>
.c1{
}
.c2{
}
<div class="c1 c2"></div>
2、自适应和改变大小变形
左右滚动条的出现
宽度，百分比（全部使用百分比就会变形）
页面最外层：像素的宽度（改变页面大小，自动出现滚动条）
<form> action="http://www.alex.com" method="GET" enctype="multi图片提交必须">
<input type="text" name="q" />
<input type="text" name="b" />
<input type="submit" />
</form>
GET:http://www.alex.com?q=用户输入
GET：http://www.alex.com?q=用户输入&b=用户输入
图片提交必须有enctype属性
CSS补充
position: 返回顶部，顶部菜单不动
position:
fixed固定在某处位置
relative 相对
absolute 绝对定位
Title 返回顶部
首行固定，漂浮在网页顶端，两层网页
Title 顶部网页下面网页的信息草，怎么看不见华伦我擦，真的看不见呀，你妈妈的
上面HTML代码中，position属性中的fixed是固定网页，而margin-top是让<div>标签距屏幕的距离，不会固定，是相对屏幕顶部位置。
relative相对,本身单独positive:relative是没有任何效果的
absolute绝对定位
relative + absolute
Title
在父级标签中添加位置
网页分层，很多网页点开都有三层，如知乎的注册，点开之后有三层显示，最外层让用户注册
CSS中标签中,opacity用来设置透明度，范围是0--1
z-index指定层级，网页可以设置多层，z-index值大的在最外层。
margin-left，相对左边移动，margin-top相对顶端移动，相对框的最左边进行移动
Title 我们一家亲最里面的一层
框架，各种框架的作用，页面上显示内容。
display:none取消显示框，显示框的显示与取消。display:none弹框消失
<div></div>标签里面设置图片的高度和宽度
<div style="height:200px;width:300px>
<img src="图片地址" />
</div>
上面<div>标签中，<img>标签，<div>设置了高度和宽度，但是图片的高度和宽度比设置的要大，则会撑开，<div>设置的高度和宽度就没有效果。
<div>标签中的overflow设置图片的形式，overflow:hidden超过部分隐藏；overflow:auto，超过部分出现滚动条。
Title 
移动变颜色，移动到图片上面，颜色会变化，菜单上变化颜色
.pg-header .menu:hover{}代表的含义是，只有当鼠标移动到.pg-header .menu指定的样式上，CSS才会执行hover里面定义的CSS样式，display:inline-black用来让块级标签拥有行内标签的属性，行内标签具有块级标签的属性，这个很重要，在改造行内标签（比如<a>标签）的时候很有效，可以定义高度和宽度，拉开<a>标签之间的间距。
背景图片
background-image:url(图片地址)，放置图片
background-repeat:repeat-x,向x方向延伸；repead-y向y方向延伸
background-repeat:no-repeat
background-image与background-repeat结合使用
点赞，私藏，手的图片，如何设置的，使用background-position来进行设置的
如何获取上面图片的一个，很多网站的点赞，评论图标都是一张图片，利用background-position来进行调节，如下：
background-position:
background-position-x
background-position-y #用来对图片抠图
设置图片的移动，背景移动，x,y方向移动，处理图片的移动，背景的移动，背景可以是图片。
Title
背景图片的移动，从一张图片的位置来会移动
上面HTML代码实现的是输入框分层的情况，在input框里面增加一个图标。