导航条设计素材_导航条

2023-04-21 21:51:28 来源 : 互联网

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

1、首先，在body标记中创建一个DIV，将其命名为“nav ”,并在DIV中创建一个无序列表。根据图中所示的列表，分为9项，每项都有超链接。因为是演示，所以下面的每个链接都会用空链接来演示。

2、代码如下：

(资料图)

3、html

4、head

5、标题制作网页导航条/title

6、style

7、!-- --

8、/style

9、/head

10、body

11、div id="nav"

12、 ul

13、Li a href=" # "/网站主页/a/li

14、Li a href=" # "/公司简介/a/li

15、Li a href=" # "/产品演示/a/li

16、Lia href="#"/News /a/li

17、lia href=" # "/企业文化/a/li

18、lia href=" # "/招聘人才/a/li

19、lia href=" # "/联系我们/a/li

20、Li a href=" # "/参观路线/a/li

21、Li a href=" # "/收藏的网站/a/li

22、/ul

23、/div

24、/body

25、/html

26、打开浏览器预览，并查看以下效果：

27、点击鼠标右键，先在电脑中保存导航条的背景图片，如下图：

28、现在让我们逐一为导航条中的元素设置CSS样式，先为ul指定样式；代码如下：

29、style

30、!—

31、#nav ul {

32、Width:1000px;

33、height:40px;

34、margin:30px auto;

35、padding:0;

36、list-style:none;

37、border-top:solid 5px #DAA520;

38、border-bottom:solid 5px #DAA520;

39、background:url(img/navig-bg.jpg);

40、}

41、--

42、/style

43、上述代码的含义依次为

44、#nav ul {

45、宽度：1000像素；

46、高度：40像素；

47、外层空间：上下30像素，左右相等；

48、内部边距：0；

49、列表样式显示：无；(这句话代表去掉列表前面的黑点。)

50、上边框线：实线，5像素，颜色# daa520

51、下边框线：实线，5像素，颜色# daa520

52、背景：URL(图片地址)；

53、}

54、打开浏览器预览，看到的效果如下：

55、再为ul中的li规定样式，代码如下：

56、#nav ul li {

57、float:left;

58、text-align:center;

59、font:16px/2.5 "microsoft yahei";

60、}

61、上列代码的意思依次为

62、#nav ul li {

63、宽度：100像素；

64、浮动：左对齐；

65、文本对齐：居中；

66、文字：大小16像素，行高162.5，字体”微软雅黑”；

67、}

68、打开浏览器预览，看到的效果如下：

69、接下来就是为li里的链接a标签规定样式了，代码如下：

70、#nav ul li a {

71、text-decoration:none; color:#800080;

72、}

73、这句代码的意思是a 元素文字装饰：无（表示去掉下划线）；默认下文字颜色：#800080（颜色代码）；

74、#nav ul li a:hover {

75、display:block; color:#FFFFFF; background:#DC143C;

76、 }

77、这句代码的意思是当鼠标移上a元素时，显示为：块；文字颜色#FFFFFF（白色）；背景颜色：#DC143C（红色）；

78、到了这一步，这个导航条就已经完成了，当把鼠标移到“公司简介”这一链接时，链接就会显示为块级元素，文字显示白色，背景显示为红色，如下图所示：

79、所有的样式代码如下：

80、style type="text/css"

81、#nav ul {

82、Width:1000px;

83、height:40px;

84、margin:30px auto;

85、padding:0;

86、list-style:none;

87、border-top:solid 5px #DAA520;

88、border-bottom:solid 5px #DAA520;

89、background:url(images/navig-bg.jpg)

90、}

91、#nav ul li {

92、width:100px;

93、float:left;

94、text-align:center;

95、font:16px/2.5 "microsoft yahei";

96、}

97、#nav ul li a {

98、color:#800080; text-decoration:none;

99、}

100、#nav ul li a:hover {

101、display:block; color:#FFFFFF; background:#DC143C;

102、}

103、/style

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

标签：

导航条设计素材_导航条

推荐文章

最新资讯

精彩图文