导航条制作

最新推荐文章于 2024-04-28 13:41:52 发布

Sweet_Ya

最新推荐文章于 2024-04-28 13:41:52 发布

阅读量2.2k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/syy1292/article/details/88311075

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

导航条一般分为两种：一种为竖向导航条，即为竖向的；一种为横向导航条，即为横向的！例子如下：

横向导航条例子：

竖向导航条例子：

横向导航栏和竖向导航栏就在于它的展示状态，一般做好之后默认的就是竖向的，若要变横向的，只需在css中nav ul li 样式里面加入display: inline-block; 即可

基本代码如下：

html代码:

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>导航栏制作</title>
        </head>
<body >
    <nav>
      <ul>
        <li><a href="#" class="g">网站首页</a></li>
        <li><a href="#" class="g">专业介绍</a></li>
        <li><a href="#" class="g">专业认证</a></li>
        <li><a href="#" class="g">发展历程</a></li>
      </ul>
    </nav>
</body>
</html>

css样式：

<style>
nav {样式按需求设计}
nav ul {样式按需求设计}
nav ul li {display: inline-block;//样式按需求设计}
nav ul li a {样式按需求设计}	
</style>

横向导航栏的css样式模板如下：

<style>
nav {
	width: 110px;
	height: 200px;
	background-color: #006699;
	margin-top: 0px;
}
nav ul {
	margin: 0;
	padding: 0;
}
nav ul li {
        display: inline-block;
	list-style: none;
}
nav ul li a {
	color: #FFFFFF;
	text-decoration: none;
	font: 1.0em/40px microsoft yahei;
}
</style>

Sweet_Ya

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
导航条制作

导航条一般分为两种：一种为竖向导航条，即为竖向的；一种为横向导航条，即为横向的！例子如下：横向导航条例子：竖向导航条例子：横向导航栏和竖向导航栏就在于它的展示状态，一般做好之后默认的就是竖向的，若要变横向的，只需在css中nav ul li 样式里面加入display: inline-block; 即可基本代码如下：html代码:<!doctype html...
复制链接

扫一扫