머리말
이 일련의 네비게이션 바 슬라이더도 효과 등으로 구현
난 여전히 간단하고 우아한 느낌, 따라서 아래로 가볍게 밀어 대조적으로, 다른 사이트 봐.
레이아웃 층
첫째, 같은 다음, DIV 레이아웃 먼저 새 navigator1.html을 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动条导航栏</title>
<style type="text/css">
body{margin: 0; }
ul, li{margin: 0; padding: 0;}
a{text-decoration: none;}
.banner{
width: 100%;
height: 70px;
background-color: yellow;
}
.nav-box{
width: 50%;
float: right;
position: relative;
top: 40px;
background-color: darkgray;
}
.nav-box ul{
list-style: none;
}
.nav-box ul li{
float: left;
font-size: 14px;
font-family: "微软雅黑";
height: 30px;
line-height: 30px;
padding: 0 12px;
background-color: #F5F5F5;
}
</style>
</head>
<body>
<div class="banner" >
<div class="nav-box">
<ul>
<li class="cur"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">商务合作</a></li>
<li><a href="#">下载专区</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</body>
</html>
위의 코드의 준비를 한 후, 효과를 다음
그림은 매우 이미 우리가 답을 참조 표시되었습니다. 의 이전 섹션은 이미 위치에 대해 이야기했다.
추가 탐색
다음은 전체 내용입니다 navigator1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动条导航栏</title>
<style type="text/css">
body{margin: 0; }
ul, li{margin: 0; padding: 0;}
a{text-decoration: none;}
.banner{
width: 100%;
height: 70px;
/* background-color: yellow;*/
}
.nav-box{
width: 50%;
float: right;
position: relative;
top: 40px;
/*background-color: darkgray;*/
}
.nav-box ul{
list-style: none;
}
.nav-box ul li{
float: left;
font-size: 14px;
font-family: "微软雅黑";
height: 30px;
line-height: 30px;
padding: 0 12px;
/*background-color: #F5F5F5;*/
}
.nav-box .nav-line {
background: none repeat scroll 0 0 #35C4FD;
bottom: 0;
font-size: 0;
height: 2px;
left: 0;
line-height: 2px;
position: absolute;
width: 52px;
}
</style>
</head>
<body>
<div class="banner" >
<div class="nav-box">
<ul>
<li class="cur"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">商务合作</a></li>
<li><a href="#">下载专区</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<div class="nav-line" ></div>
</div>
</div>
</body>
</html>
상기 추가 탐색 바,도 같은 컬러 층을 제거하는 효과.
발문
이 코드 섹션은 많은 스타일을 달성하기 위해, 그러나 누구는 어려울 것, 어려운 사람은 다음 절에서는 마우스 슬라이드를 따라 달성하기 위해 jQuery를 사용하지 것이다
