一、上节作业问题：
上节作业问题：
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>
让IE自动加上的边框消失默认1px
二、本节内容
（一）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>
relative+absolutw
效果：
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>
效果：
时间： 2024-11-10 00:53:36