上节作业回顾
<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 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c{
width:70px;
height:50px;
background-color:black;
color:white;
line-height:50px;
position:fixed; #固定在某处，下面是设置固定的地方
bottom:20px;
right:10px;
}
</style>
<!-- position属性的fixed代表固定在某处，定义position后，有四个属性，top,left,right,bottom，距离屏幕的四个位置 -->
</head>
<body>
<div class="c">返回顶部</div>
<div style="height:5000px;background-color:aliceblue;"></div>
<!-- 两个块级标签，层叠的形式，要想实现放置底部的效果，要实现网页分层的效果 -->
</body>
</html>
首行固定，漂浮在网页顶端，两层网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--position属性的fixed是固定网页，margin-top属性是自动让标签距屏幕的距离，fixed固定屏幕，固定了标签，不会动的 -->
<title>Title</title>
<style>
.c1{
background-color:black;
height:30px;
color:white;
position:fixed;
left:;
right:;
top:;
}
.c2{
background-color:pink;
height:5000px;
margin-top:31px;
}
</style>
</head>
<body>
<div class="c1">顶部网页</div>
<div class="c2">下面网页的信息</div>
<div>草，怎么看不见华伦</div>
<div>我擦，真的看不见呀，你妈妈的</div>
</body>
</html>
上面HTML代码中，position属性中的fixed是固定网页，而margin-top是让<div>标签距屏幕的距离，不会固定，是相对屏幕顶部位置。
relative相对,本身单独positive:relative是没有任何效果的
absolute绝对定位
relative + absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
position:relative;
width:500px;
height:200px;
border:1px solid red;
margin: auto;
}
.c2{
position:absolute;
left:;
bottom:;
height:50px;
width:50px;
background-color:black;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>
在父级标签中添加位置
网页分层，很多网页点开都有三层，如知乎的注册，点开之后有三层显示，最外层让用户注册
CSS中标签中,opacity用来设置透明度，范围是0--1
z-index指定层级，网页可以设置多层，z-index值大的在最外层。
margin-left，相对左边移动，margin-top相对顶端移动，相对框的最左边进行移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 边框的居中是相对左上角，因此要向真正居中，要进行调整，分成一半上下调整 -->
<style>
.c1{
margin: auto;
background-color:green;
height:5000px;
z-index:;
}
.c2{
z-index:;
position:fixed;
background-color:white;
height:400px;width:500px;
left:%;
top:%;
border:1px solid deeppink;
margin-left:-250px;
margin-top:-200px;
}
</style>
</head>
<body>
<div class="c2">我们一家亲</div>
<div style="z-index:9;position:fixed;background-color:black;top:0;left:0;bottom:0;right:0;opacity:0.8"></div>
<!-- 让网页外层变成透明的，需要一个属性，opacity，范围0-,opacity用来设置透明度-->
<div class="c1">最里面的一层</div>
</body>
</html>
框架，各种框架的作用，页面上显示内容。
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，超过部分出现滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c{ }
</style>
</head>
<body>
<div style="height:300px;width:400px;overflow:auto;">
<img src="xiaohua.jpg" style="height:200px;width:300px;"/>
</div>
<!-- overflow中，hidden是如果图片大小超过设置的大小，则隐藏超过的部分，auto是滚动条，在设置的框架内设置拉向两端的滚动条 -->
<!-- 如果想完全显示，可以给图片本身定义高度和宽度，这时候跟<div>的高度和宽度无关了，但是尽可能要一致 -->
</body>
</html>
移动变颜色，移动到图片上面，颜色会变化，菜单上变化颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position:fixed;
right:;
left:;
top:;
height:48px;
background-color:#2459a2;
line-height:48px;
}
.pg-body{
margin-top:50px;
}
.w{
width:980px;
margin: auto;
}
.pg-header .menu{
display:inline-block;
padding: 10px;
color:white;
}
.pg-header .menu:hover{
background-color:blue;
}
</style>
<!-- hover的作用是当标签移动到上面的时候CSS执行hover的里面定义的效果 -->
<!-- padding代表上下左右边距都要增加10px,padding设置宽度，高度，上下左右,上下左右都增加10个像素(px) 上右下左 -->
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="menu" href="http://www.baidu.com" target="_blank">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu"></a>
</div>
</div>
<!-- a标签之间如何设置间距，可以设置宽度和告诉，a标签默认是没有高度和宽度的，行内标签，要进行转换为块级标签 -->
<!-- a标签默认行内标签，自身定义了高度和宽度，不能设置宽度和高度，除非进行转换，转化为块级标签 -->
<div class="pg-body">asdfasdf</div>
</body>
</html>
.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方向移动，处理图片的移动，背景的移动，背景可以是图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:100px;width:20px;"></div>
<div style="background-image:url(点赞.png);height:20px;background-repeat:no-repeat;border:1px solid red;width:20px;"></div>
</body>
</html>
背景图片的移动，从一张图片的位置来会移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
background-image:url(login.png);
width:40px;
height:40px;
background-position-x:5px;
background-position-y: 80px;
display:inline-block;
position:absolute;
top:5px;
right:5px;
}
</style>
</head>
<body>
<div style="height:50px;width:400px;position:relative;">
<input type="text" name="username" style="height:50px;width:390px;padding-right:10px;"/>
<span class="c1"></span>
</div>
</body>
</html>
上面HTML代码实现的是输入框分层的情况，在input框里面增加一个图标。