css在网页中的一些重要运用
1.导航
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border: 1px solid #008000;
width: 400px;
height: 40px;
background-color: #008000;
}
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
float: left;
padding:0 20px;
line-height: 40px;
}
a{
font-size: larger;
font-weight: bold;
text-decoration: none;
color: red;
}
li:hover{
background-color: #ffff00;
}水平导航
div{
width: 40px;
height: 300px;
border: 1px;
background-color: #000088;
}
ul{
margin: 0px;
padding: 0px;
}
a{
display: block;
width: 50px;
font-size: large;
color: #008000;
text-decoration: none;
}
li:hover{
background-color: red;
}垂直导航
</style>
</head>
<body>
<nav>
<div>
<ul>
<li><a href="ba8.jpg">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">运输</a></li>
<li><a href="#">生产</a></li>
</ul>
</div>
</nav>
</body>
</html>
2.浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
3.对图片的简单处理
（1）图片透明
在网页中创建图片，我们是通过css中的opacity来完成的
opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
代码：a：{
opacity：0-1
}
opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
我们也可以通过rgb（0,0,0)颜色来改变背景的透明（这种只能改变背景的透明）
opacity可以改变任何的属性
（2）.隐藏：在没选中时时隐藏 选中时显示隐藏的内容**
代码：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style: none;
}
.one{
display: none;
}
li：hover .one{
display: block;
}
</style>
</head>
body>
<div>
<ul>
<li>
罗峰
<div class="one">
<dd>
一定会成功
</dd>
</div>
</li>
</ul>
</div>
</body>
</html>
（3）点击图片时图片跳动
代码：
.two:hover{
padding: 20px;
}
<div>
<img class="two" src="1-9_03.png" alt=""/>
</div>
（4）图片遮盖技术
代码：<body>
<h1><a href=“链接的地址”>名称</a>
</body>
<style>
h1{
background-image:url("图片");
width:图片的宽
height：图片的高
border：1px solid green
}
a{
a时行内元素，因此我们要用display把它转变成块级元素
display：block
border: 1px solid #000000;
width：图片的宽
height：图片的高
（line-height：图片的高）
text-indent：负值px
（5）雪碧图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 120px;
background: url("sprites2.png（组合图片");
background-position: 0 -240px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
