目标制作:
步骤:
1,制作一个url的li列表,因为每个导航都是一个超链接,所以要加上超链接a,因为字体颜色是白色的,所以看不到
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
/* 共有标签去掉内外间距 */
*{
margin: 0;
padding: 0;
}
/* 因为超链接a的字体是白色 */
a{
color: white;
/* 去掉a标签的样式 */
text-decoration: none;
}
/* 去掉ul,ol的样式 */
ul,ol{
list-style: none;
}
</style>
</head>
<body>
<nav >
<ul>
<li><a href="#">淘宝首页1</a></li>
<li><a href="#">淘宝首页2</a></li>
<li><a href="#">淘宝首页3</a></li>
<li><a href="#">淘宝首页4</a></li>
<li><a href="#">淘宝首页5</a></li>
<li><a href="#">淘宝首页6</a></li>
<li><a href="#">淘宝首页7</a></li>
<li><a href="#">淘宝首页8</a></li>
<li><a href="#">淘宝首页9</a></li>
</ul>
</nav>
</body>
</html>
2, 设置nav的宽和高,以及背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
/* 共有标签去掉内外间距 */
*{
margin: 0;
padding: 0;
}
/* 因为超链接a的字体是白色 */
a{
color: white;
/* 去掉a标签的样式 */
text-decoration: none;
}
/* 去掉ul,ol的样式 */
ul,ol{
list-style: none;
}
.nav-top{
/* width不要超过1366px */
width: 1300px;
/* 居中 */
margin:auto;
border: 1px solid red;
height: 66px;
/* 这里的背景颜色可以使用工具捕获 */
background-color:#2A3C5C;
background-image:url(img/666.png) ;
}
</style>
</head>
<body>
<nav class="nav-top">
<ul>
<li><a href="#">淘宝首页1</a></li>
<li><a href="#">淘宝首页2</a></li>
<li><a href="#">淘宝首页3</a></li>
<li><a href="#">淘宝首页4</a></li>
<li><a href="#">淘宝首页5</a></li>
<li><a href="#">淘宝首页6</a></li>
<li><a href="#">淘宝首页7</a></li>
<li><a href="#">淘宝首页8</a></li>
<li><a href="#">淘宝首页9</a></li>
</ul>
</nav>
</body>
</html>
3, 设置ul的宽和高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
/* 共有标签去掉内外间距 */
*{
margin: 0;
padding: 0;
}
/* 因为超链接a的字体是白色 */
a{
color: white;
/* 去掉a标签的样式 */
text-decoration: none;
}
/* 去掉ul,ol的样式 */
ul,ol{
list-style: none;
}
.top-nav>ul{
width: 1300px;
height: 66px;
border: 1px solid red;
}
.nav-top{
/* width不要超过1366px */
width: 1300px;
/* 居中 */
margin:auto;
border: 1px solid red;
height: 66px;
/* 这里的背景颜色可以使用工具捕获 */
background-color:#2A3C5C;
background-image:url(img/666.png) ;
}
</style>
</head>
<body>
/*语义化标签都是div*/
<nav class="nav-top">
<ul>
<li><a href="#">淘宝首页1</a></li>
<li><a href="#">淘宝首页2</a></li>
<li><a href="#">淘宝首页3</a></li>
<li><a href="#">淘宝首页4</a></li>
<li><a href="#">淘宝首页5</a></li>
<li><a href="#">淘宝首页6</a></li>
<li><a href="#">淘宝首页7</a></li>
<li><a href="#">淘宝首页8</a></li>
<li><a href="#">淘宝首页9</a></li>
</ul>
</nav>
</body>
</html>
4,通过计算设置li标签的宽和高,以及设置浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
/* 共有标签去掉内外间距 */
*{
margin: 0;
padding: 0;
}
/* 因为超链接a的字体是白色 */
a{
color: white;
/* 去掉a标签的样式 */
text-decoration: none;
}
/* 去掉ul,ol的样式 */
ul,ol{
list-style: none;
}
/* 设置a标签字体 */
nav.nav-top a{
font-size: 23px;
font-weight: bold;
}
.nav-top>ul{
width: 1300px;
height: 66px;
border: 1px solid red;
}
.nav-top>ul>li{
width: 144px;
/* 设置手势标志 */
cursor: pointer;
height: 66px;
float: left;
}
.nav-top{
/* width不要超过1366px */
width: 1300px;
/* 居中 */
margin:auto;
border: 1px solid red;
height: 66px;
/* 这里的背景颜色可以使用工具捕获 */
background-color:#2A3C5C;
background-image:url(img/666.png) ;
}
</style>
</head>
<body>
<nav class="nav-top">
<ul>
<li><a href="#">淘宝首页1</a></li>
<li><a href="#">淘宝首页2</a></li>
<li><a href="#">淘宝首页3</a></li>
<li><a href="#">淘宝首页4</a></li>
<li><a href="#">淘宝首页5</a></li>
<li><a href="#">淘宝首页6</a></li>
<li><a href="#">淘宝首页7</a></li>
<li><a href="#">淘宝首页8</a></li>
<li><a href="#">淘宝首页9</a></li>
</ul>
</nav>
</body>
</html>
5,其他属性的添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
*{
/* 通用标签 */
margin: 0;
padding: 0;
}
a{
/* 通用标签 */
color: white;
text-decoration: none;
}
nav.nav-top a{
font-size: 23px;
font-weight: bold;
}
.nav-top{
/* width不要超过1366px */
width: 1300px;
/* 居中 */
margin:auto;
/* border: 1px solid red; */
height: 66px;
background-color:#2A3C5C;
background-image:url(img/666.png) ;
}
a:hover{
text-decoration: underline;
color: #FF0000;
}
.nav-top>ul{
width: 1300px;
height: 66px;
border: 1px solid red;
}
.nav-top>ul>li{
width: 144px;
cursor: pointer;
height: 66px;
/* margin-top:16px ; */
/* 文字居中 */
text-align: center;
/* border: 1px solid red; */
/* display: inline-block; */
/* float最开始是用来决定文字和图片的环绕关系的,现在也可以用来块元素的横向排列 */
float: left;
line-height: 66px;
}
.nav-top>ul>li:hover{
background: darkred;
}
/* nth-child(2n-1)可以接受表达式表示奇数 */
/* 也能接受odd,even两个单词 */
.nav-top>ul>li:nth-child(3),.nav-top>ul>li:nth-child(6){
border-right: 1px solid white;
}
/* 通用标签 */
ul,ol{
list-style: none;
}
</style>
</head>
<body>
<nav class="nav-top">
<!-- 语义化标签本身就是div -->
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
<li><a href="#">导航7</a></li>
<li><a href="#">导航8</a></li>
<li><a href="#">导航9</a></li>
</ul>
</nav>
</body>
</html>