導航:首頁 > 萬維百科 > 邊緣導航網頁設計

邊緣導航網頁設計

 發布時間：2020-10-04 14:55:48

1、淺談網頁中導航的設計技巧

如下是我自己的體會
1、導航一般要求放在網頁最醒目的地方，例如頭部橫向導航，側欄豎向導航。
2、導航的文字要清晰，一般要粗體，並且比正文的字體要大一號。
3、導航不要用圖片按鈕，一定要用文字描述，這樣做是為了讓搜索引擎清楚你站的主題，以便在搜索排名中獲得更靠前的位置；圖片一般是用作導航的背景，而鏈接肯定要用文字。
4、導航欄目不能隨意修改，那樣會讓搜索引擎認為你站不穩定，會降權。

2、網址導航類網站建設步驟是什麼？

網站導航系統要簡潔而明晰；網站導航系統應根據頁面所在位置來改變導航系統中的鏈接；在內容較多的網頁上設置網頁下方的導航系統；網站導航條里的導航數量問題；合理運用網站地圖導航。既然是導航網站，那就需要簡潔明了。色彩方面：顏色不能濫用，最多使用三個主要顏色和一個堅實的背景。對於背景的選擇，也是要注意選擇的，選擇一個有質感的背景，會讓你的網站加分很多，如果你選擇有一個可以發出像霓虹燈一樣的顏色的背景，你的網站看起來，可想而知。字體方面：一個不合適的字體大小可能會影響閱讀，比如閱讀的字體大小超過12，就會引起人們點擊後退的按鈕。其實，對於字體這一塊，你應該對你網站的受眾有一定的了解，如果你的網站是為40歲以上的人服務的，那麼更可能需要稍大的字體。據相關網路調查，老年人一般喜歡的字體大小為14左右。導航網站的適用范圍可能更廣，可以加上調節字體大小的選項。

3、網頁設計左側導航欄

可以用js來實現，給每一項添加滑鼠移入事件，當滑鼠移入的時候，顯示右邊提前寫好的內容，滑鼠移開後再次隱藏。

附件是我寫的一個京東頁面最頭部部分的例子


4、網頁設計導航條

下面的代碼，你去看看，不好用再說。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--
body {
background-color: #0099FF;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
border-bottom-style: none;
border-bottom-color: #ed9f9f;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-top-color: #ed9f9f;
border-right-color: #ed9f9f;
border-left-color: #ed9f9f;
float: left;
}
#navigation li a {
text-decoration: none;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 12px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #711515;
border-left-color: #711515;
border-top-style: none;
border-bottom-style: none;
width: 50px;
text-align: center;
margin: 0px;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFFFF;
background-color: #c11136;
}
#navigation li a:hover {
color: #ffff00;
background-color: #990020;
}
#navigation ul li:hover ul,#navigation ul a:hover ul {
visibility: visible;
}
#navigation ul ul {
visibility: hidden;
}
#navigation ul ul li {
clear: both;
}
#navigation ul ul li a {
border: 1px solid #CCCCCC;
}
#navigation ul ul li a:link, #navigation ul ul li a:visited {
color: #000000;
background-color: #FFCC66;
}
#navigation ul ul li a:hover {
color: #006699;
background-color: #99CC00;
}
.nav {
border: 1px solid #0099CC;
position: absolute;
width: 357px;
left: 112px;
top: 34px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
}
.nav li {
float: left;
}
.nav li a {
border: 1px solid #FF3333;
display: block;
padding: 5px;
background-color: #FFCC33;
text-decoration: none;
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">產品展示</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">聯系電話</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介紹</a></li>
</ul>
</div>

</body>
</html>

5、網頁設計導航是怎麼做的

1、打開Deamweaver8，新建一網頁文件。接著輸入以下導航菜單的內容：

<html xmlns="網址">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>導航欄示例</title>

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首  頁</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互動交流</a></li>

<li><a href="#">開心一刻</a></li>

<li><a href="#">懸 賞 令</a></li>

<li></li>

</ul>

</body>

</html>

2、此時對應效果如圖：

3、接下來准備相關的導航按鈕圖片（可以事先利用PS製作好）。

4、然後將以下CSS代碼加入到<head></head>之間：

<style type="text/css">

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微軟雅黑", "宋體", "隸書";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

</style>

5、在加入CSS代碼之間，網頁此時的效果如圖：

6、網頁設計，導航菜單，我想實現一個很常見的效果

<style>
#div1{ background:url(img_1.gif) ; }
#div1:hover{ background:url(img_2.gif); }
</style>
<div id="div1">hello</div>
不需要js

與邊緣導航網頁設計相關的知識