微软风格的CSS横向菜单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平导航菜单(DIV+CSS)</title>
<style type="text/css">
body{
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
padding: 0px;
margin: 5px;
text-align: center;
font-size: 12px;
}
#nav{
height: 44px;
width: 425px;
background: #FFF;
margin:10px auto;
}
.vline{
background: #999;
width: 1px;
height: 20px;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#nav li a{
display: block;
width: 84px;
line-height: 28px;
color:  #666;
text-decoration: none;
border-top: 4px solid #0F35A5;
}
#nav li a:hover{
color:  #7C8DD9;
border-top: 4px solid #7C8DD9;
}
</style>
</head>
<body><div id="nav"><ul><li><a href="http://www.js323.com">产品介绍</a></li><li class="vline"></li>
<li><a href="http://www.sjzlixing.com">石家庄拓展</a></li><li class="vline"></li>
<li><a href="#">联系我们</a></li><li class="vline"></li>
<li><a href="#">新闻中心</a></li><li class="vline"></li>
<li><a href="#">公司简介</a></li><li class="vline"></li>
</ul></div>
</body>
</html>

 

转载于:https://www.cnblogs.com/youtianxia/p/3969567.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php函数库快速记忆法_PHP速成大法

简单介绍一下PHP的语法1、嵌入方法&#xff1a;类似ASP的&#xff0c;当然您也可以自己指定。2、引用文件&#xff1a;引用文件的方法有两种&#xff1a;require 及 include。require 的使用方法如 require("MyRequireFile.php"); 。这个函数通常放在 PHP 程序的最前…

html css精灵,谈谈CSS Sprites(css精灵)

CSS Sprites在国内很多人叫css精灵&#xff0c;其实这个技术不新鲜&#xff0c;这个技术老到什么程度呢&#xff0c;我不敢确定&#xff0c;但是我看到最早的关于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》&#xff0c;时间是March 05, 2004 …

分布式搜索 Elasticsearch —— 节点实例化

为什么80%的码农都做不了架构师&#xff1f;>>> 要连接到集群&#xff0c;首先要告诉集群&#xff1a;你是谁&#xff0c;你有什么特征。在 ES 中体现为实例化节点。 ES 通过 org.elasticsearch.node.NodeBuilder 的 build() 或者 node() 方法实例化节点&#xff0…

计算几何/sgu 124 Broken line

题意 给出由n条线段围成的多边形&#xff08;每条边均平行于坐标轴&#xff09;&#xff0c;以及一个点(x0,y0)&#xff0c;问这个点是在形内或是形外或是形上 分析 对于在线段上&#xff0c;比较容易判断&#xff0c;直接比较一下坐标的位置即可&#xff1b; 若不在形上&#…

(转)在ios android设备上使用 Protobuf (使用dll方式)

自&#xff1a;http://game.ceeger.com/forum/read.php?tid13479 如果你的工程可以以.Net 2.0 subset模式运行&#xff0c;请看这个帖子中的方法。 地址&#xff1a;http://game.ceeger.com/forum/read.php?tid14359&fid27 如果只能以.Net 2.0下运行&#xff0c;就可以继…

ps 毛发 边缘_Adobe Photoshop抠图技巧/抠图后头发边缘的颜色处理方法教程!

PS教学第1&#xff11;期抠图技巧和抠图后的头发边缘的颜色处理的解释本篇抠图技巧教程除了跟大家分享了抠头发的方法外&#xff0c;还分享如何解决抠头发后头发周围的异色&#xff0c;如白边紫边等问题。教程作者没有提供素材&#xff0c;大家可以找其他图片来练习。有些时候想…

计算机运维知识点,系统运维必会知识点

1 删除文件的原理文件删除&#xff1a;需要具备以下两个条件同时具备才生效1受文件的硬连接控制&#xff0c;有一个硬连接i_link1,减少一个硬连接&#xff0c;i_link-1,当i_link0时&#xff0c;文件就被删了列&#xff1a;创建文件i_link1,为这个文件创建一个硬连接&#xff0c…

Hyper-v 2016 VHD Set

Hyper-v 2016 VHD Set微软在Windows Server 2016 Hyper-v中新增了一种磁盘类型--“VHD集”&#xff0c;和以前版本的共享VHD类似&#xff0c;这种类型的磁盘能够在多个服务器之间共享来实现来宾群集。看到这里相信有很多熟悉Hyper-v的朋友会问&#xff1a;这和以前的 Share VHD…

【总有一些东西要弄清】——说说面试时一系列的CSS问题

仅以此篇缅怀那些笔试100次&#xff0c;问100次的CSS问题。 问&#xff1a; CSS选择符有哪些&#xff1f;哪些属性可以继承&#xff1f;优先级&#xff1f;内联和important哪个优先级高&#xff1f; 选择符 1通配选择符&#xff08;*&#xff09;表示页面内所有元素的样式*{fon…

面试总结之html+css

最近面试了一些公司&#xff0c;和技术总监聊了一些前端技术方面的内容。回来之后我总结了一下&#xff0c;大致可以分为三个模块&#xff1a;第一、Html与css 方面&#xff1b;第二、浏览器解析方面&#xff1b;第三、js方面。打算&#xff0c;分为三篇博文&#xff0c;根据自…

k8s部署tomcat及web应用_k8s部署tomcat的yaml文件

1、k8s部署tomcat的yaml文件apiVersion: apps/v1kind: Deploymentmetadata:name: mytomcatspec:replicas: 5selector:matchLabels:app: mytomcatminReadySeconds: 1progressDeadlineSeconds: 60revisionHistoryLimit: 5strategy:type: RollingUpdaterollingUpdate:maxSurge: 1m…

计算机的发展经历阶段应用领域,计算机的发展阶段

计算机的发展阶段以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;计算机经历了四个发展阶段。1、电子管数字机(1946—1958年)硬件方面&#xff0c;逻辑元件采用的是真空电子管&#xff0c;外…

全球都对HTTPS抛出了橄榄枝,为什么?你又该怎么办?

2019独角兽企业重金招聘Python工程师标准>>> 互联网发展20多年&#xff0c;大家都习惯了在浏览器地址里输入HTTP格式的网址。但前两年&#xff0c;HTTPS逐渐取代HTTP&#xff0c;成为传输协议界的“新宠”。 早在2014年&#xff0c;由网际网路安全研究组织Internet …

jqGrid格式化日期

colModel列中属性 formatter:date, formatoptions:{srcformat: Y-m-d H:i:s, newformat: Y-m-d H:i:s}, 其它参数参考API转载于:https://www.cnblogs.com/GYoungBean/archive/2013/03/20/2970598.html

大一大学计算机考试难吗,新生必看!大一期间必考的3个证书,不考后悔,越拖越难考!...

原标题&#xff1a;新生必看!大一期间必考的3个证书&#xff0c;不考后悔&#xff0c;越拖越难考!9月开学季&#xff0c;大学新生也陆陆续续来到了学校报到&#xff0c;开启自己美好的大学生活!但是!小编要提醒大家的是千万不要相信高中老师说的那句&#xff1a;“上了大学你们…

我是如何实用:before :after

本文地址http://www.cnblogs.com/Bond/p/3972854.html 最近一直做移动端&#xff0c;没和IE6打交道了&#xff0c;瞬间感觉世界变美好了。移动端虽然还是各种坑&#xff0c;但是比起修复IE6那还是轻松多了&#xff0c;移动端很多效果可以用CSS3来做&#xff0c;感觉一切都和谐…

rockmq运维指令_RocketMQ运维监控

一个完善的消息中间件&#xff0c;监控是必不可少的功能。通过监控我们可以查看系统的运行情况&#xff0c;是否出现异常&#xff0c;是系统稳定性和运维的基础。1、监控平台搭建RocketMQ控制台需要自己去下载编译打包&#xff0c;可以在编译时设置其namesrvAddr和端口号&#…

Maven学习之 仓库镜像

使用仓库镜像 仓库可以声明在项目中&#xff0c;但有时&#xff0c;你可能想要使用某个仓库的镜像&#xff0c;而不去修改项目文件。 使用镜像的原因&#xff1a; 有一个同步镜像&#xff0c;且速度更快。想使用你自己控制的内部仓库。想运行repository manager来提供一个本地的…

谁看的最多

今天想到了昨天看到一道acm题目&#xff0c;难度入门级别。“谁看的最多”&#xff0c;题目大概是这样的&#xff1a;一队列的人3 2 1 6 4 5&#xff0c;数值的大小表示该人的高度。每个人只能看到前面比他高的人&#xff0c;如1可以看见2、3。但是&#xff0c;如果有人B比他高…

计算机与网络应用基础知识下上机考试,计算机应用基础知识考试

计算机应用基础课程是提高高职学生计算机文化水平的公共必须课&#xff0c;那么你对计算机应用基础知识了解多少呢?以下是由小编整理关于计算机应用基础知识试题的内容&#xff0c;希望大家喜欢!计算机应用基础知识试题1、计算机系统由硬件系统和软件系统两部分组成&#xff0…