導航:首頁 > 萬維百科 > Ul網頁設計需要學些什麼內容

Ul網頁設計需要學些什麼內容

發布時間:2020-10-17 08:29:43

1、css html製作網頁,用ul和li製作橫向導航欄

將ul裡面的li標簽都設置為右浮動即可。如:

<ul style="overflow:hidden; display:block">
    <li class="float:right; padding:10px;>項目1</li>
    <li class="float:right; padding:10px;>項目1</li>
    <li class="float:right; padding:10px;>項目1</li>
    <li class="float:right; padding:10px;>項目1</li>
</ul>

2、網頁設計導航條

下面的代碼,你去看看,不好用再說。
<!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>

3、網頁設計怎樣插入UL LI 這樣表格

你可以直接寫代碼;形如:
<ul>
<li>內容1</li>

<li>內容2</li>

<li>內容3</li>
......
</ul>

4、網頁設計中,為什麼都用<UL><LI>標簽來製作導航條,有什麼好處?

列表式導航條代碼簡潔有序,且易於編排

5、網頁設計中的.top ul li:hover a表示什麼意思 求指教

表示定義一個按照元素層級關系限定的CSS樣式。

即:要求元素的層級關系,首先是最外層元素要包含.top樣式,其次再去尋找下面ul元素,再找到ul下面的li,再找到li下面的a標簽元素。


上面這個樣式的意思是當滑鼠移動到li元素上時,它下面的a標簽將會按照這個樣式進行渲染。


<div class="top">
    <ul>
        <li>
            <a href="#">鏈接</a>
        </li>
    </ul>
</div>

 樣式的這種定義方式只對滿足上述結構的元素生效,像如下結構的代碼,將不會擁有上述定義的樣式:

<div class="top">
    <a href="#">鏈接</a>
    <ul>
        <li>
        </li>
    </ul>
</div>

6、自學ul設計和網站設計用什麼軟體呢高手來回答初學怎麼入門呢

PS和AI 學完這兩個其他都比較簡單了,譬如fireworks,都是同一家公司的,界面也差不多。入門看下一些APP,或者在線視頻學習。

7、關於asp.net網頁設計中<ul><li>排版問題

其實一般要實現你所要的效果用tab菜單就能解決,但是最大的問題是很容易造成單個頁面數據內容過多造成用戶瀏覽頁面的時候載入太慢

所以一般網站實現點擊導航顯示不同內容的方法,無非就是頁面跳轉,就比如導航分為動作、科幻、愛情。。。,那麼你也要分別為這幾類做頁面,你考慮用框架做會更方便;

我花幾分鍾寫了大概一個示例,你打開文件UntitledFrameset-7.html,點擊3個不同的導航就能跳轉到不同的頁面

我這給你的只是方法思路,細節內容還得你自己做

8、網頁製作中,如何讓我的ul里邊的li內容居中顯示啊?text-agin-center.也不行

li {
  display: inline-block;
  width: 114px;
  height: 46px;
  font-size: 18px;
  text-align: center;
}

與Ul網頁設計需要學些什麼內容相關的知識