CSS + HTML實現導航條顯示

阿新 • • 發佈：2019-01-16

最近在寫前端，需要實現一個導航條，效果如下：

實現程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>導航欄</title>
	<style type="text/css">
		/**{margin: 0;padding: 0;}*/

		div{
			border:2px solid #000;
			height: 32px;
			width: 960px;
			text-align: center;
			margin:0 auto;
			padding-top: 10px;

		}
		span{
			display: inline-block;
			color:#333;
			font-size:14px;
			font-weight: bold;
			font-family: '微軟雅黑';
			padding:0 20px;
			border-left: 2px solid #000;
		}

	</style>
</head>
<body>
	<div>
		<span style="border-left: 0;">首頁</span>
		<span>網站建設</span>
		<span>程式開發</span>
		<span>網路營銷</span>
		<span>企業VI</span>
		<span>案例展示</span>
		<span>聯絡我們</span>
	</div>
</body>
</html>

實現的效果如下：

以上程式碼思路僅供參考。

CSS + HTML實現導航條顯示

最近在寫前端，需要實現一個導航條，效果如下：實現程式碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>導航欄<

Ubuntu 16.04安裝indicator-sysmonitor實現導航條顯示上下行網速/CPU/內存使用率

mem cnblogs http sudo images ica cpu 上下實現安裝： sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitor sudo apt-get update sudo

監測滑鼠滾輪的上下滾動來實現導航條顯示隱藏

$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDe

css ul li 導航條水平顯示

css 裡面有個屬性叫做 display , 能夠實現許多效果。比如 display:block, 即用要顯示的內容，把 width 填滿,而不是預設的有多長顯示多長 display:inline, 則是取消前後換行符 <ul><li>

HTML 實現導航欄帶有子列表

這段時間，在學習前端，特此做個筆記。  <div class="titlediv"> <img class="logo" src="../res/logo.png"> <ul

js css+html實現簡單的日曆

(function(){ /* * 用於記錄日期，顯示的時候，根據dateObj中的日期的年月顯示 */ var dateObj = (function(){ var _date = new Date(); // 預設為當前系統時間 return { g

css練習之導航條

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></

CSS HTML實現背景圖片的填充

margin: 0; background-image: url('bg.jpg'); backgroun

vue中純html實現過度條動畫

效果：因為錄製的軟體關係，顯的有點卡，專案上自己哼哧哼哧地實現了這個功能，so，提升蠻大的，so，記錄一下，視訊裡面過度條移上移下，可以利用class 或style 動態渲染解決這個問題，我懶得寫了。動畫效果是利用計時器實現的，也有css動畫實現。自己發上來的程式碼稍微改了一下，可供大家參考

使用jquery + css + html實現點選左右箭頭切換圖片

$(function() { var sWidth = $("#focus").width(); //獲取焦點圖的寬度（顯示面積） var len = $("#focus ul li").length; //獲取焦點圖個數 var index = 0; var picTimer; //以下程式碼新

css+html實現基本幾何元素：多邊形、圓、橢圓、直線

用canvas可以輕易地畫出各種幾何元素，貼圖當然更簡單。不過，用css也有用css的好處，比如說容易修改等。效果如下：（部分程式碼只考慮了webkit）一、四邊形四邊形當然最簡單了，因為塊狀元素本來就是個四邊形嘛。下面用<div>實現。先設定一下背

css+html實現自適應寬度的選單學習

本文是利用css和html實現自適應於文字長度選單。實現後的效果圖，如下：實現程式碼如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

建立一個純CSS的水平導航條

按照傳統的方法，導航條由放在一行表格單元裡的圖形影象構成。由於人們不再推薦用表格來定位任何非表格的頁面內容，所以很多製作Web的人正在尋找（新的）方法，用結構化的XHTML標記和CSS格式來建立導航條。一個簡單的CSS導航條建立CSS樣式文字導航條的最簡單解

css樣式之導航條(nav)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s

html 使用js+css+html實現圖片劃過預覽效果

效果圖：：：當滑鼠劃過的時候圖片自動開啟和摺疊程式碼：： html程式碼：：命名為：index.html <!DOCTYPE html> <html><head><meta charset="utf-8" />

使用css實現移動端導航條滾動

動態 inline -i 使用 div 導航條底部 ble pac 1 <div class="tab"> 2 <div class="table-item"> 3 <span class="tab-link">首頁

html/css/js-橫向滾動條的實現

位置 htm block button 技術分享代碼遇到 itl spa 在前端UI設計時，網頁的制作很麻煩，深有感悟！碰到太多的不懂，或是第一次見，就要去網上找資料！橫向滾動條就是我遇到麻煩中其中的一個，其實也很簡單，只是在幾次項目中都用到了這個橫向滾動條

DIV+CSS實現仿京東商城導航條效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xml

1.angular html+css+js導航條點選樣式修改，加跳轉頁面

1.html頁面程式碼如下： <div class="main-menu" id="L1" (click)="Tab(1)" style="color:#3bb9e2;"> 主頁 </div> <div class="main-menu

【程式碼筆記】HTML+CSS+JavaScript實現密碼輸入框顯示文字

原理：通過設定一個input為password，預設display為none，再設定一個input為text設定為block，利用js指令碼控制顯隱。具體思路：給type型別為text的輸入框加一個點選事件，點選事件是設定text型別輸入框的display為none，

CSS + HTML實現導航條顯示

相關推薦