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)
blank

相关推荐

  • C#实现简单网页

    C#实现简单网页⑴创建ASP.NET网站新建MyWebSite网站,添加一个WebForm1网页,其中包含一个文本框TextBox1一个按钮Button1(计算)和一个标签Label1(””)。在文本框中输入一个数,当点击“计算”按钮时,在标签中显示此数的平方根。WebForm1.aspx文件内容如下:<%@PageLanguage=”C#”AutoEventWireup=”true…

    2022年10月13日
  • 宽度学习详解(Broad Learning System)

    宽度学习详解(Broad Learning System)宽度学习(BroadLearningSystem)我也是最近才知道除了深度学习,还有一个神经网络叫宽度学习(下文统称BLS)。宽度学习是澳门大学科技学院院长陈俊龙和其学生于2018年1月发表的文章提出的,文章名为《BroadLearningSystem:AnEffectiveandEfficientIncrementalLearningSystemWithoutthe…

  • Admin组件

    Django提供了admin组件为项目提供基本的管理后台功能(对数据表的增删改查)。本篇文章通过对admin源码简单分析admin内部原理,扩展使用方式,为以后进行定制和自己开发组件做铺垫

  • redhat7.2配置网络yum源

    redhat7.2配置网络yum源

  • utf-8的中文是一个汉字占三个字节长度吗?

    utf-8的中文是一个汉字占三个字节长度吗?英文字母和中文汉字在不同字符集编码下的字节数英文字母:字节数:1;编码:GB2312字节数:1;编码:GBK字节数:1;编码:GB18030字节数:1;编码:ISO-8859-1字节数:1;编码:UTF-8字节数:4;编码:UTF-16字节数:2;编码:UTF-16BE字节数:2;编码:UTF-16LE中文汉字:字节数:2;编码:GB2312字节数:2;编…

  • 博科brocade光纤交换机alias-zone的划分–>实操案例「建议收藏」

    博科brocade光纤交换机alias-zone的划分–>实操案例「建议收藏」一,图形化操作  光纤交换机作为SAN网络的重要组成部分,在日常应用中非常普遍,本次将以常用的博科交换机介绍基本的配置方法。博科300实物图:环境描述:如上图,四台服务器通过各自的双HBA卡连接至两台博科300光纤交换机,IBMV3700为双控制器,每个控制器再分别与两台光纤交换机相连。完成所有的连线及配置工作后,还需对光纤交换机作相应配置,当然不…

发表回复

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

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