1.优酷顶部导航
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="img/x-icon" href="static/images/1.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
.header{
position: relative;
width: 100%;
height: 422px;
background: 176,180,189;
}
.content{
width: 1200px;
margin:0 auto;
}
.pic_show{
margin: 0 auto;
width: 1200px;
height:422px;
background: url(static/images/bg.jpg) no-repeat;
}
.bg{background: rgba(176,180,189,0.2);
width: 100%;
height: 100%;
position: absolute;top: 0;left: 0;z-index: 99;}
.logo{
position: fixed;top: 20px;left:120PX;z-index: 100;
}
.logo form{
width: 370px;
height: 40px;
position: relative;left: 290px;}
.logo input{
width: 370px;
height: 40px;
border: none;
border-radius: 100px;
background: rgba(234,234,234,0.3);
}
.logo button{
position: absolute;top: 0;right: 0;
width:80px;
height: 40px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
border:none;
background: #1F82FC;
color: #fff;
}
.box{float: left;}
.clera{clear: both;}
</style>
</head>
<body>
<div class="header">
<div class="pic_show"></div>
<div class="bg"></div>
<div class="logo">
<img src="static/images/logo.png" class="box">
<form class="box">
<input type="" name="">
<button>全网搜</button>
</form>
</div>
<div class="clear"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.CSS中的定位(Position)属性允许你对元素进行定位;(fixed/relative/absolute)*/
A- fixed:元素的位置相对于浏览器窗口是固定位置.
B- relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块.
C- absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块;特点：绝对定位使元素的位置与文档流无关，因此不占据空间.
D- z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效-子绝父相.
E~ :hover 选择器用于选择鼠标指针浮动在上面的元素
实例
<!DOCTYPE html>
<html>
<head>
<style>
div:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<div>php</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
