day15--JavaScript
上节作业回顾
<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:0; right:0; top:0; } .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: 0 auto; } .c2{ position:absolute; left:0; bottom:0; 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:0 auto; background-color:green; height:5000px; z-index:8; } .c2{ z-index:10; position:fixed; background-color:white; height:400px;width:500px; left:50%; top:50%; 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-1,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:0; left:0; top:0; height:48px; background-color:#2459a2; line-height:48px; } .pg-body{ margin-top:50px; } .w{ width:980px; margin:0 auto; } .pg-header .menu{ display:inline-block; padding:0 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">1024</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框里面增加一个图标。
