<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{margin:0;padding:0;}
body{overflow:hidden;}
h1{
position:fixed;
left:20px;/*相对于浏览器左边距离*/
top:20px;/*相对于浏览器上边距离*/
}
#nav{
360px;
height:40px;
background-color:#3c3c3c;
position:fixed;
top:20px;
right:20px;
border-radius:20px;
}
#nav ul li a{
color:#ccc;
text-decoration:none;
cursor:pointer;
font-size:14px;
text-align:center;
font-family:"微软雅黑";
background-color:red;
100px;
height:40px;
display:block;/*以块元素显示*/
float:left;
line-height:40px;
}//看作盒子
#nav .first{
margin-left:20px;
}
#nav ul li a span{
display:block;
1px;
height:12px;
background:red;
float:left;
margin-top:9px;
}//设置宽高度展示|，同一行一般用span
#nav .last{
background-image:url("images/icon_buy.png") ;
background-repeat:no-repeat;
background-position:10px center;/*背景定位：第一个值 水平 第二个值 垂直*/
134px;
}
#banner{
100%;
height:880px;
position:relative;
}
#banner ul{
500%;//是浏览器宽度的5倍,出现滚动条
height:800px;
background:#0000ff;
left:0;/*特效就是去改变left值*/
right:0;
z-index:-1;
}
#banner ul li{
20%;
height:880px;
float:left;
}
#banner .btn{
71px;
height:82px;
position:absolute;
top:390px;
cursor:pointer;
}
#banner .btn-l{
left:20px;
background:url(images/but-icon.png);
opacity:0.5;
}
#banner .btn-r{
right:20px;
background:url(images/but-icon.png) right;
}
</style>
</head>
<body>
<h1><img src="imges/logo.png" /></h1>
<div id="nav">
<ul>
<li><a class="first" href="">关于我们<span></span></a></li>//可以点击用a标签
<li><a href="">联系我们<span></span></a></li>
<li><a href="" class="last">购买鳗鱼</a></li>
<ul>
</div>
<div id="banner">
<ul>
<li style="background:url("image/pic1.jpg") center top"></li> //背景颜色居中
<li style="background:url("image/pic2.jpg") center top"></li>
<li style="background:url("image/pic3.jpg") center top"></li>
<li style="background:url("image/pic4.jpg") center top"></li>
<li style="background:url("image/pic5.jpg") center top"></li>
</ul>
</div>
<div class="btn btn-l’"></div>
<div class="btn btn-r"></div>
//两个在一起<>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var i=0;//点击次数
$(".btn-l").click(function(){
i++;
if(i>4){
i=4;
}
$("ul").animate((left:-i*100'%'),500)//有过程的动叫做动画
});
if(i==4){
$('.btn-l').css("opacity":"0.5");//
}else{
$('.btn-l').css("opacity":"1");
}
$(".btn-r").click(function(){
i--;
if(i<0){
i=0;
}
$("ul").animate((left:-i*100'%'),500)//有过程的动叫做动画
});
$('.btn').click(function(){
if(i==4){
$('.btn-r').css("opacity":"0.5");//暗
}else{
$('.btn-r').css("opacity":"1");
}
});
//触屏事件
</script>
<!--
1.浏览器空白区域就是我们的body
2.h1标签（整个页面只能出现一个h1，logo,标题，关系到seo优化）
3.img插入图片标签 src="图片地址" （绝对路径，相对路径，域名路径）
4.固定定位：把创建出来的东西固定到浏览器窗口
5.行内样式：不能控制宽高度，上下外边距块元素，一行放置多个块元素
6.触屏事件
7.onclick是js的，click是jq的
-->
</body>
