总结
定位：position: fixed（固定）、relative（相对） 、 absolute（绝对）; top:x right: x;
实例
<!DOCTYPE html>
<html>
<head>
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="static/images/1.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none; float: left;}
a{color: #000;text-decoration: none;}
.clear{clear: both;}
.mr{margin-right: 10px;}
.l{float: left;}
.contents{
width: 1540px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentul{line-height: 70px;}
small{color: #ccc;}
.hot-tv img{
width: 210px;
height: 320px;
}
.tab li{margin-left: 25px;}
.bigshow img{
width: 420px;
height: 320px;
}
.tv-tab img{
width: 210px;
height: 120px;
}
.tv-tab{
width: 1100px
}
.tv-tab li{margin:0 5px 30px;}
.header{
position: relative;
width: 100%;
height: 420px;
background: #e7e7e7;
}
.pic-show{
margin: 0 auto;
width: 1540px;
height: 420px;
background: url(static/images/bg.jpg) no-repeat;
}
.bg{background: rgba(0,0,0,0.3); width: 100%;height:100%; position: absolute;top: 0;left: 0;z-index: 99;}
.menu_ul{position: fixed;top: 1px;left: 100px;z-index: 999}
.menu_ul form{width: 500px;height: 40px;position: relative;left: 400px;}
.menu_ul input{width: 500px;height: 40px;border-radius: 100px; border: none;background:rgba(234,234,243,0.5);}
.menu_ul button{width: 90px;height: 40px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
background:#b30702;
border: none;
color: #fff;
position: absolute;top:0;right: 0;
}
</style>
</head>
<body>
<div class="header">
<div class="pic-show"></div>
<div class="bg"></div>
<div class="menu_ul">
<img src="static/images/logo.png" class="l">
<form action="" method="" class="l">
<input type="text" name="">
<button>全网搜</button>
</form>
</div>
</div>
<div class="contents">
<div class="content">
<div class="contentul">
<h2>正在热播</h2>
</div>
<ul class="hot-tv">
<li >
<a href="">
<img src="static/images\a.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/b.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/c.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/d.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/f.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/g.jpg"><br>
<span>雪地娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<h2 class="l">剧集 ></h2>
<ul class="tab">
<li class="l" style="margin-top: 5px; "><a href="">最新</a></LI>
<li class="l" style="margin-top: 5px; "><a href="">大陆剧</a></LI>
<li class="l" style="margin-top: 5px; "><a href="">台剧</a></LI>
<li class="l" style="margin-top: 5px; "><a href="">日剧</a></LI>
</ul>
<div class="clear"></div>
<div class="tv_show">
<div class="bigshow l ">
<a href="">
<img src="static/images/tv.jpg"> <br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</div>
<ul class="tv-tab l">
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv2.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv2.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>娘子军</span>
</a><br>
<small>邱胜翊王笛演革命虐恋</small>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例