首页 >> 要闻 >

导航栏在哪（导航栏）

2023-11-30 18:00:21 来源：用户：

你们好，最近小榜发现有诸多的小伙伴们对于导航栏在哪，导航栏这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、先写好一个html的框架，加上导航栏的条目

2、<!DOCTYPE html>

3、<html>

4、<head>

5、 <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>

6、 <style>

7、 </style>

8、</head>

9、<body>

10、 <div id="menu">

11、 <ul>

12、 <li>

13、 <a href="#">首页</a>

14、 </li>

15、 <li>

16、 <a href="#">介绍</a>

17、 <dl>

18、 <dd>

19、 <a href="#">简介</a>

20、 </dd>

21、 <dd>

22、 <a href="#">学院</a>

23、 </dd>

24、 <dd>

25、 <a href="#">校区</a>

26、 </dd>

27、 </dl>

28、 </li>

29、 <li>

30、 <a href="#">新闻</a>

31、 <dl>

32、 <dd>

33、 <a href="#">通知</a>

34、 </dd>

35、 <dd>

36、 <a href="#">简讯</a>

37、 </dd>

38、 <dd>

39、 <a href="#">公文</a>

40、 </dd>

41、 </dl>

42、 </li>

43、 </ul>

44、 </div>

45、</body>

46、</html>

47、用浏览器打开显示如下

48、首先添加初始化的css属性

49、把浏览器预设的padding和margin全部归零

50、效果如下

51、接下设置<div id="menu">的css属性

52、将位置固定

53、设置大小，100%即等于浏览器的显示宽度

54、设置其背景色

55、效果如下

56、接下添加<li>列表项目的css属性

57、去掉前面的小圆点

58、使列表项目横排

59、设置其大小

60、可得效果如下

61、上面的字样式与颜色样式与背景格格不入，这与<a>的属性有关

62、设置<a>的css属性

63、把下划线的效果去掉

64、把字的颜色改为#FFFFFF，字体为微软雅黑

65、可得效果如下

66、接着将ul列表排好版

67、宽度是<li>的个数乘<li>的宽即3*100=300px，高度和<li>一样

68、在div内居中

69、设置ul列表位置向下移32px

70、效果如下

71、接着设置dl列表项目的css属性

72、先是定好位，absolute是相对父级元素定位，top: 55px是元素顶端距离父级元素顶端55px

73、把dl的上端拓宽10px;

74、设置宽度和背景与li列表项目相同

75、接着设置dd列表项目的css属性

76、宽度要比dl小一些，上下各留出一些距离

77、设置下边框为虚线，1px，颜色为#EC933F

78、使dd居中，使dd内的文本也居中

79、效果如下

80、在li的css属性内也加上

81、使文本居中

82、总的样式就已经设置好了

83、接着我们要设置鼠标放在导航栏项目时的事件

84、先将dl列表隐藏，在dl的css属性加上

85、这样dl列表就隐藏了，接下来我要设置当鼠标放在导航栏项目上使，其相应的dl类别就会显示

86、加入下面css代码

87、下图为当鼠标放在项目介绍上时的效果

88、最后加上

89、当鼠标放在链接上时会变色

90、这样一个常见的导航栏就完成了，赋上完整css代码

91、* {

92、 margin: 0;

93、 padding: 0;

94、}

95、#menu {

96、 position: fixed;

97、 width: 100%;

98、 height: 55px;

99、 background: #9a0000;

100、}

101、li {

102、 list-style: none;

103、 float: left;

104、 width: 100px;

105、 height: 40px;

106、 text-align: center;

107、}

108、a {

109、 text-decoration: none;

110、 color: #000000;

111、 font-size: 16px;

112、 font-family: 微软雅黑;

113、 text-align: center;

114、}

115、ul {

116、 margin: auto;

117、 width: 300px;

118、 height: 40px;

119、 margin-top: 32px;

120、}

121、dl {

122、 position: absolute;

123、 top: 55px;

124、 padding-top: 10px;

125、 width: 100px;

126、 background: #9a0000;

127、 display: none;

128、}

129、dd {

130、 margin: auto;

131、 width: 80px;

132、 margin-top: 2px;

133、 margin-bottom: 5px;

134、 border-bottom: dashed 1px #EC933F;

135、 text-align: center;

136、}

137、ul li:hover dl{

138、 display: block;

139、}

140、a:hover{

141、 color: #D7643B;

142、}

以上就是导航栏这篇文章的一些介绍，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。如有侵权请联系删除！