微軟風格的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.pswp.cn/news/259950.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/259950.shtml
英文地址,請注明出處:http://en.pswp.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…