Python之路Day15--CSS补充以及JavaScript（一）
一、上节作业问题：
上节作业问题： 1、css重用 <style> 如果整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自适应 和 改变大小变形 左右滚动条的出现 宽度，百分比 页面最外层：像素的宽度 => 最外层设置绝对宽度 自适应：media 3、默认img标签，有一个1px的边框 img{ border: 0; } 4、作业中的数量输入框 上节内容回顾 1、块级和行内 2、form标签 <form action='http://sssss' methed='GET' enctype='multi'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上传文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用户输入的值 http://sssss?q=用户输入的值&b=用户输入的内容 POST： 请求头 请求内容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身发生变化
回顾
让IE有自动加上的外边框消失
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0; } </style> <!--将图片边框变为零--> </head> <body> <a href="http://www.baidu.com"> <img src="image/1.png" title="phto" style="width: 200px;height: 300px;border: 0"> </a> </body> </html>
二、本节内容
（一）CSS补充
（二） JS
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
（一） CSS补充
1.position
a. fiexd ==>固定在页面的某个位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="width:50px; height:50px;background-color:black;color: white; position: fixed; bottom: 20px; right: 20px; ">返回顶部</div> <div style="height:5000px;background-color: #dddddd"> </div> <script> function GoTop(){ document.body.scrollTop = 0; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top: 0; right: 0; left: 0; } .pg-body{ height: 5000px; background-color: #dddddd; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
效果：
b.absolute + relative
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto"> <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div> </div> <div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto"> <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div> </div> <div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto"> <div style="position: absolute;left: 0;top: 0;width: 50px;height: 50px;background-color: black"></div> </div> </body> </html>
效果：
2.opcity 透明度
3.z-index 层级顺序
范例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" display:none;margin:0 auto;z-index:10;position: fixed;top:50%;left:50%; margin-left: -250px ; margin-top:-200px;background-color: white;height:400px;width: 500px; "> <input type="text" /> <input type="text" /> <input type="text" /> </div> <div style="display:none;z-index:9;position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5 "></div> <div style="height: 500px;background-color: green;"> rcvbrcvghb </div> </body> </html>
4.overflow
范例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> . <img src="image/1.png"> </div> <div style="height: 200px;width: 300px;overflow: hidden"> . <img src="image/1.jpg"> </div> </body> </html>
效果：
5.hover 伪类
实例：
<!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 0 10px; color: white; } /*当鼠标移动到当前标签上时，当前标签才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">挨踢1024</a> <a class="menu">你问我答</a> </div> </div> <div class="pg-body"> <div class="w">正文</div> </div> </body> </html>
效果：
6.background-image 背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px"></div> <div style="background-image: url('image/2.png');background-repeat: no-repeat;height: 20px;width: 20px;border: 1px solid red;"></div> <-- backgroud-repeat:no-repeat 表示不重复 还有repeat-x表示横着堆叠 repeat-y表示竖着堆叠-->
<--backgroud-opsition-x:10px; backgroud-position-y:10px;表示往哪个方向移动 还可以使用上右下左的方式写-->
</body> </html>
效果
课堂小练习--->输入框加头像
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 370px;padding-right:30px ;"> <sapn style=" position:absolute; right:0; top:10px; background-image: url(image/i_name.jpg); height: 16px; width: 16px; display: inline-block;"></sapn> </div> </body> </html>
效果：
