CSS + HTML导航栏效果

CSS + HTML导航栏效果今天写了一个导航栏,需要的效果如下:实现的代码思路如下:<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>导航栏</title> <styletype="text/css"

大家好,又见面了,我是你们的朋友全栈君。

今天写了一个导航栏,需要的效果如下:

CSS + HTML导航栏效果

实现的代码思路如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
		div{
			height: 40px;
			width:960px;
			background: #55a8ea;
			margin:0 auto;
		}
	span{
		display: inline-block;
		font:bold 14px/40px '微软雅黑';
		color:#fff;
		margin-left:40px;
	}
	span img{
		position: relative;
		top:-10px;
		left:40px;
	}
	</style>
</head>
<body>

	<div>
		<span style="display: inline-block;width:70px;background: #00619f;margin:0;padding-left: 40px">首 页</span>
		<span>网站建设</span>
		<span>程序开发</span>
		<span>网络营销</span>
		<span style="margin:0;"><img src="images/new.png" alt="new"> 企业VI</span>
		<span>案例展示</span>
		<span> 联系我们</span>
	</div>
</body>
</html>

实现的效果如下:

CSS + HTML导航栏效果

以上代码仅供参考。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140426.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Windows远程桌面开发之九-虚拟显示器(Windows 10 Indirect Display 虚拟显示器驱动开发)[通俗易懂]

    Windows远程桌面开发之九-虚拟显示器(Windows 10 Indirect Display 虚拟显示器驱动开发)[通俗易懂]byfanxiushu2019-06-24转载或引用请注明原始作者。这里与远程桌面关系不是太大,但这个部分是xdisp_virt远程控制程序的实现多显示器桌面扩展的子功能,因此也归为远程桌面开发一类。这篇文章与之前发布的…

  • java的serializable接口_javacloneable接口

    java的serializable接口_javacloneable接口Cloneable接口clone:它允许在堆中克隆出一块和原对象一样的对象,并将这个对象的地址赋予新的引用。Java中一个类要实现clone功能必须实现Cloneable接口,否则在调用clone()时会报CloneNotSupportedException异常。Java中所有类都默认继承java.lang.Object类,在java.lang.Object类中有一个方法clon

    2022年10月14日
  • 数学速算法_小学初中高中 数学奥数教材及习题讲解(共42册PDF)

    数学速算法_小学初中高中 数学奥数教材及习题讲解(共42册PDF)学习勤育儿|爱自己在育儿的道路上,家长和孩子一同成长;慢慢陪孩子走,把我们的时间浪费在孩子身上,是世间最有价值的浪费!资源介绍奥数对青少年的脑力锻炼有着一定的作用,可以通过奥数对思维和逻辑进行锻炼,对学生起到的并不仅仅是数学方面的作用,通常比普通数学要深奥些。奥数相对比较深,数学奥林匹克活动的蓬勃发展,极大地激发了广大少年儿童学习数学的兴趣,成为引导少年积极向上,主动探索…

  • linux的vi命令详解_useradd命令详解

    linux的vi命令详解_useradd命令详解最近vi用的多,很多技巧不知道,备注一份,vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本,vi编辑器是完全相同的,因此您可以在其他任何介绍vi的地方进一步了解它。Vi也是Linux中最基本的文本编辑器,学会它后,您将在Linux的世界里畅行无阻。

  • java读取输入字符串的操作过程_java查找字符串中重复字符

    java读取输入字符串的操作过程_java查找字符串中重复字符读取输入字符串的方法:通过Scanner类读取字符串的方法next()和nextLine()importjava.util.*;publicclassMain{ publicstaticvoidmain(String[]args){ Scannerscanner=newScanner(System.in); Stringa=scanner.next();/…

    2022年10月17日
  • VBA listview控件「建议收藏」

    VBA listview控件「建议收藏」
    1、在Listview控件中,用ColumnHeaders对象来操作列,而添加新的列可以用ColumnHeaders对象的ADD方法。具体如下: 
    ListView1.ColumnHeaders.Add序号,唯一的字符串标识,列标显示文字,列宽,列的内容对齐方式,所使用的图标序号。
    对齐方式有:lvwColumnLeft 、 lvwColumnCenter、lvwColumnRight                                            

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号