Home > Article > Web Front-end > CSS method to implement horizontal navigation and vertical navigation bar (code)
CSS method to implement horizontal navigation and vertical navigation bar (code)
- 不言Original
- 2018-08-21 10:53:4317471browse
The content of this article is about the method (code) of implementing horizontal navigation and vertical navigation bar in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Vertical navigation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}
a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}
</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>Run result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}
</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>Run result :
Note:
1. The display=block of the a tag makes the link a clickable area instead of text. 2. After specifying a link as a block element, you can set the width so that the width of each link looks the same. Related recommendations:div css navigation bar (full screen css navigation bar)_html/css_WEB-ITnose
CSS picture Navigation_html/css_WEB-ITnose
The above is the detailed content of CSS method to implement horizontal navigation and vertical navigation bar (code). For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn