Rumah > Artikel > hujung hadapan web > 详解Css常用操作导航栏方法
详解Css常用操作导航栏方法
- 高洛峰asal
- 2017-03-26 11:07:051639semak imbas
这篇文章主要为大家详解Css常用操作导航栏方法的布局类，感兴趣的小伙伴们可以参考一下
一、垂直导航栏
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: aqua;
color: black;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: crimson;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<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>
</ul>
</body>
</html>二、水平导航栏
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: aqua;
width: 250px;
text-align: center;
}
a:link,a:visited{
font-weight: bold;
text-decoration: none;
background-color: aqua;
color: black;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: crimson;
}
li{
display: inline;
padding-left: 5px;
padding-right: 5px;
}Atas ialah kandungan terperinci 详解Css常用操作导航栏方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：详解Css常用操作图片方法Artikel seterusnya：详解Css常用操作分类方法