導航:首頁 > 萬維百科 > 網頁設計很寬的二級導航

網頁設計很寬的二級導航

發布時間:2021-01-23 03:29:14

1、DIV+CSS設計網頁布局時,如何將菜單導航部分背景自適應屏幕寬度,而讓導航內容居中?

這是由兩個div來實現的,首先建立一個外層div並設置寬高,要使寬度隨屏幕寬度變化(即瀏覽器寬度變化),那麼寬度就得設置100%,高度設置為你需要的高度即可,具體屬性為 width:100%;height:你自己的高度;background:你需要的顏色; 這樣就讓該div隨屏幕(瀏覽器)寬度變化而變化了。然後在這個div裡面再嵌套一個div給定一個寬高屬性,就是你導航的寬高,要使之居中,各人使用的方法也有所不同,但是常用的還是margin屬性,具體屬性如下 width:你導航的寬度;height:你導航的高度;margin:0 auto; 這樣就實現了,如果背景是圖片的話就更改background屬性即可,還有不明白的隨時Hi我。

2、網頁設計ps畫布最佳大小是幾×幾像素 導航欄呢?

中間內容區大小不能小於1000px,一般是1000-1200,高度不限制,導航欄是通欄,根據最大的解析度來,一般1920差不多了。操作方法如下:

1、首先單擊【文件】按鈕,在菜單中選擇【新建】命令。

2、在新建文檔對話框中,設置文檔的詳細信息,單擊【創建】按鈕。

3、然後單擊工具箱中的【圓角矩形工具】。

4、在選項欄中選擇『路徑』工具模式。設置半徑為『50』像素。

5、在文檔中繪制出路徑圖形,然後設置前景色為白色。

6、在圖層面板中,單擊【創建新圖層】新建『圖層1』。然後單擊【路徑】按鈕『切換到路徑面板。

7、接著滑鼠右擊』背景圖層『,在彈出的快捷菜單中單擊【刪除圖層】。

8、最後在對話框中單擊』是『刪除背景圖層,就完成了。

3、dw網頁二級菜單代碼怎麼做!很著急把它放在一級導航底下!

方法和詳細的操作步驟如下:

1、第一步,打開dw軟體並創建一個新文件,見下圖,轉到下面的步驟。

2、第二步,執行完上面的操作之後,單擊「常用」選項,選擇「布局」按鈕,然後繪制一個圖層,見下圖,轉到下面的步驟。

3、第三步,執行完上面的操作之後,再次單擊該層並繪制另一個,看到第一層是layer1,第二層是layer2,見下圖,轉到下面的步驟。

4、第四步,執行完上面的操作之後,將游標放在layer1上,然後單擊「插入表格」,建立一個具有一行三列且寬度為288的表,見下圖,轉到下面的步驟。

5、第五步,執行完上面的操作之後,在表格中輸入百度經驗,百度知道,百度文庫,可以在屬性欄中設置以下屬性,見下圖,轉到下面的步驟。

6、第六步,執行完上面的操作之後,在第2層中輸入經驗首頁,個人中心,小測首頁,幫幫首頁,然後設置以下屬性,見下圖。這樣,就解決了這個問題了。

4、UI設計網頁時,導航欄尺寸規格一般是多少

目前ios的尺寸都是_@2x,除了plus需要注意導航欄60PX,底部標簽欄148PX,尺寸需要_@3X也就是1.5倍計算。

5、我在做網站,請問怎樣設計網頁導航欄可以全屏顯示的,如圖所示,導航欄綠色背景左右兩邊可以無限延伸。

寬度設抄置為1920PX,或者100%

設置1920PX的原因是,現在襲顯示器最大解析度寬度是1920PX,所以1920一般就可以代表全屏了。
如果考慮的方向有點多的話,就設置為100%
再說了, 如果你使用的是DIV,默認它就是鋪滿的,因為它是行級,並非塊級。

6、製作網頁LOGO與導航欄長寬多少才合適

logo在首頁顯示的話大小沒什麼規定 要是做友情鏈接的話大小一般就是 88*31 導航長度一般寬屏的是960左右 窄屏的800左右

7、UI設計網頁時,導航欄尺寸規格一般是多少

當前最流行的解析度是1920*1080,在該解析度下,頁面中心區域為1200px以內都可以。在800*600解析度下,導航欄尺寸規格保持在778px以內;在1024*768解析度下,網頁寬度保持在1002px以內。

如果沒有指定的要求,以1920尺寸設計就好(這是目前最普遍的尺寸大小),前端開發人員會自行適配其他的解析度。

(7)網頁設計很寬的二級導航擴展資料:

UI設計網頁方法

一、呈現更新穎的內容

設計師在進行網頁ui設計的過程中需要注意的是,想要讓自己的網頁看起來更加與眾不同,但也不必過於誇大,可以用一些新鮮的理念和不同的布局來吸引用戶訪問。比如以一種動態的方式,將信息呈現給用戶,以此來贏得用戶更多的關注。

二、增強元素的設計感

相對於普通的網頁ui設計而言,具有較強的設計感的網頁往往會更容易吸引用戶的注意。任何一個具有創意的網站開發設計方案,都會把目光更聚焦在網頁的基本布局和色彩搭配上,而這也意味著網頁上一般存在很多種不同的元素。

三、激勵用戶更多操作

網站開發的設計製作的類型有很多種,面對不同的類型,要有特定的網頁ui設計方案。給用戶提供一個尋找目標的簡易方法,這樣用戶就容易沉浸到頁面中來,同時也增加了用戶操作的幾率。

8、用CSS樣式製作的網頁二級導航!

<style> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首頁 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首頁</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社區圈子 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首頁</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的簡訊 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">賬戶管理 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首頁</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日誌</a><br /> <a href="#">我的相冊</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div>

採納哦

9、如何製作網頁首頁導航菜單顯示二級菜單

<!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>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}

.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}

</style>
<script>
// JavaScript Document

function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>

<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何銷售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采購</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服務</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商業資訊</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展會幫助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">廣告幫助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>

</div>

</div>
</body>
</html>

這個拿去參考一下吧~~

與網頁設計很寬的二級導航相關的知識