導航:首頁 > 萬維百科 > 網頁設計青春的導航欄

網頁設計青春的導航欄

發布時間:2020-09-24 19:29:49

1、導航欄是網頁設計中非常重要的元素。

設計網頁(⊙_⊙)? 我覺得不是專業的設計出來也不怎麼好看 建議去買個套裝 我之前就是自己學設計 學了3天頭都搞大了 結果後來我在淘寶網店和拍拍網店買的套裝 真劃算 30塊錢就解決了 最重要的是節約了我的時間 弄那個不懂的人真的很費頭腦 就拿PS來說吧 我學那個逐幀動畫就學了很久 最後祝你好運!!!

2、網頁設計中的導航欄問題

<style type="text/css">
<!--
ul,li{margin:0;padding:0;}
#nav {
height: 400px;
width: 200px;
border: 1px solid #000000;
}
#nav li {
list-style-image: none;
list-style-type: none;
background-color: #99FF00;
}
#nav li:hover{ background-color: #333333;cursor:pointer;}
-->
</style>
這樣也能實現你要的效果,不過ie6好像不支持。如果用<a>的話會比較復雜

3、網頁設計左側導航欄

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

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


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

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

5、求網頁製作導航欄的代碼或方法

css代碼如下:---------------------
#box_topbar {
/*width: 980px;*/
width:100%;height:135px;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;height: 105px;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");background:#1a1a1a;
color:#fff;

}
html代碼如下------------------------------
<div id="box_topbar">
<div id="topNav">
</div></div>

做網頁還是用Dreamweaver更方便一些的

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

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代碼之間,網頁此時的效果如圖:

7、如何使用Dreamweaver做一個網頁的導航欄

Dreamweaver,簡稱「DW」,中文名稱"夢想編織者",是美國MACROMEDIA公司開發的集網頁製作和管理網站於一身的所見即所得網頁編輯器。
想用DW做出導航欄必熟知div+css,基本代碼:
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*設置滑鼠滑過或懸停時變化的背景顏色*/

<ul id="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">HTML教程</a></li>
<li><a href="#">CSS基礎</a></li>
<li><a href="#">CSS開發工具</a></li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS問題</a></li>
</ul>

8、關於網頁製作導航欄鏈接的問題

如果是靜態網頁,基本是這樣,手工每個頁面加,也可以使用js,全部網頁引用一個js,js來生成導航,如果是有動態程序的網頁,就不用一個個加了,有循環生成以及文件包含,請採納

與網頁設計青春的導航欄相關的知識