Web前端开发-导航效果
Web前端开发，自学笔记整理
导航效果
1.导航效果1
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>导航效果title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 1000px;
height: 42px;
background: orange;
margin: 50px auto;
}
.box li {
float: left;
list-style: none;
/* border-right: 1px solid gray;*/
/*调整盒子大小*/
padding-right: 2px;
background: url(img/nav1-2.png) no-repeat right center;
}
.box li a {
text-decoration: none;
color: gray;
padding: 0 50px;
height: 37px;
line-height: 37px;
background: url(img/nav1-1.png);
display: block;
}
.box li a:hover {
background: orange;
}
style>
head>
<body>
<div class="box">
<ul>
<li><a href="#">Homea>li>
<li><a href="#">About usa>li>
<li><a href="#">Servicesa>li>
<li><a href="#">Clientsa>li>
<li><a href="#">Potfolioa>li>
<li style="border-right: none;"><a href="#">Contact usa>li>
ul>
div>
body>
html>2.导航效果2
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>导航效果title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav {
width: 900px;
height: 20px;
margin: 30px auto 0;
border-bottom: 8px solid #de4b15;
padding-left: 20px;
}
.nav li {
float: left;
list-style: none;
margin-right: 2px;
}
.nav li a {
display: block;
text-decoration: none;
width: 80px;
height: 20px;
text-align: center;
line-height: 20px;
background: #dfdfdf;
color: black;
font-size: 10px;
}
.nav li a:hover {
background: #DE4B15;
color: white;
}
/*隐藏设置*/
.nav li a b {
display: none;
}
/*鼠标移入*/
.nav li a:hover span {
display: none;
}
.nav li a:hover b {
display: block;
}
style>
head>
<body>
<div class="nav">
<ul>
<li><a href="#"> <span>Homespan> <b>首页b> a>li>
<li><a href="#"> <span>Blogspan> <b>首页b> a>li>
<li><a href="#"> <span>Guestbookspan> <b>首页b> a>li>
<li><a href="#"> <span>Pickbarspan> <b>首页b> a>li>
<li><a href="#"> <span>Fansirspan> <b>首页b> a>li>
ul>
div>
body>
html>
3.导航效果3
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>导航效果title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.view {
width: 1000px;
height: 43px;
/*盒子大小是43px 而背景大小是37px */
background: url(img/nav3-1.png) repeat-x left bottom;
margin: 30px auto 0;
}
.view li {
float: left;
list-style: none;
}
.view li a {
display: block;
width: 76px;
height: 37px;
text-align: center;
text-decoration: none;
color: black;
line-height: 43px;
font-size: 11px;
}
.view li a:hover {
height: 43px;
background: url(img/nav3-2.png);
color: white;
line-height: 37px;
}
style>
head>
<body>
<div class="view">
<ul>
<li> <a href="#">Homea> li>
<li> <a href="#">Homea> li>
<li> <a href="#">Homea> li>
<li> <a href="#">Homea> li>
<li> <a href="#">Homea> li>
ul>
div>
body>
html>
4.导航效果4
完整代码
<html>
<head>
<meta charset="UTF-8">
<title>导航效果title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
width: 1000px;
height: 40px;
border-bottom: 1px solid black;
margin: 30px auto 0;
padding-left: 40px;
}
ul li {
float: left;
list-style: none;
}
ul li a {
padding: 0 15px;
height: 35px;
display: block;
text-align: center;
line-height: 35px;
text-decoration: none;
color: gray;
background: #f7f7f7;
border: 1px solid gray;
border-bottom: none;
margin-right: 10px;
/*往下移动*/
margin-top: 4px;
}
ul li a:hover {
height: 40px;
margin-top: 0;
background: white;
border-color: black;
}
style>
head>
<body>
<ul>
<li> <a href="#">tab onea> li>
<li> <a href="#">tab onea> li>
<li> <a href="#">tab onea> li>
<li> <a href="#">tab onea> li>
<li> <a href="#">tab onea> li>
ul>
body>
html>