整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
程序開發中，標簽ul與css樣式實現菜單，也是經常用到的技巧，這里給大家介紹2個實例：
如下圖所示：
標簽ul與css樣式實現菜單特效實例1
menu1.html網頁代碼如下：
<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>標簽ul與css樣式實現菜單特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="mymenu">
<ul>
<li><a href="" title="">首頁</a></li>
<li><a href="" title="">產品介紹</a></li>
<li><a href="" title="">熱門推薦</a></li>
<li><a href="" title="">行業動態</a></li>
<li><a href="" title="">加盟我們</a></li>
<li><a href="" title="">聯系我們</a></li>
<li><a href="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
css.css代碼如下：
#mymenu{
border-top: 7px solid black;
margin: 0;
padding: 0;
}
#mymenu ul{
margin: 0;
margin-left: 15px;
float: left;
padding-left: 10px;
font: 12px 宋體;
background-color: black;
}
* html #mymenu ul{
margin-bottom: 1em;
margin-left: 7px;
}
#mymenu ul li{
display: inline;
}
#mymenu ul li a{
float: left;
color: white;
font-weight: ;
padding: 2px 11px 7px 7px;
text-decoration: none;
}
#mymenu ul li a:visited{
color: white;
}
#mymenu ul li a:hover, #mymenu ul li a#selected{
color: white;
background-color: darkred;
}
#mymenu ul li a#rightcorner{
padding-right: 0;
padding-left: 8px;
}
如下圖所示：
標簽ul與css樣式實現菜單特效實例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>標簽ul與css樣式實現菜單特效</title>
<style type="text/css">
*
{
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body
{
background:#ddd;
}
#menu
{
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(a.png) 0 0 repeat-x;
}
#menu li
{
border-right:1px solid #fff;
float:left;
}
#menu li a
{
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}
#menu li a:hover,#menu li.current
{
background:#fff url(b.png) 0 0 repeat-x;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="" title="Index">首頁</a></li>
<li><a href="" title="Produces">產品介紹</a></li>
<li><a href="" title="Hot">熱門推薦</a></li>
<li><a href="" title="">行業動態</a></li>
<li><a href="" title="">加盟我們</a></li>
<li><a href="" title="">聯系我們</a></li>
</ul>
</body>
</html>
看完代碼實現后，大家是不是覺得比較簡單呀，趕快來DIY吧。
著橙先生上一篇的常見樣式屬性，可以用在絕大多數的標簽中，如div、sapn、p等標簽中，這篇繼續講樣式屬性，不過是一些特殊標簽的樣式屬性。
廢話不多說，直接往下看
1、<img src="圖片路徑" alt="圖片的描述說明文字">
Img標簽也有橙先生上一篇文章中介紹的常見樣式屬性，另外如上所見它也有自己特殊的屬性src和alt屬性，img就是圖片標簽，那么src就是引入圖片的屬性，其中輸入圖片路徑地址即可，而alt屬性是對圖片的描述文字，當圖片不能正常顯示時，將會顯示alt里的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="GZ.png" alt="‘Hi橙先生’是我的公眾號名稱，請關注一下吧！謝謝" style="width: 400px; height: auto;">
</body>
</html>
如下圖所示
圖片未正常顯示的效果
<ul>
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol>
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol的固定樣式效果
2、無序列表和有序列表，它們有固定的樣式如下圖的圓點和序號，大多數情況我們是不需要的，這時我們就可以通過list-style: none;這個樣式屬性取消它們的固定樣式
<ul style="list-style: none;">
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol style="list-style: none;">
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol取消固定樣式的效果
3、另外在常見的標簽中的文章中提到的a標簽，其中href屬性就是填寫鏈接目標的地方，而target屬性定義被鏈接的文檔（即網址）在何處顯示，常用的就是“_blank”代表在新窗口中打開被鏈接文檔。默認的是“_self”代表在此窗口中打開被鏈接文檔，其他屬性值不常用，就不過多介紹了
<a href="需要跳轉到的網址或是文件，如" target="_blank">這個是文字的鏈接</a>
4、外邊距（margin）、內邊距（padding）,每個標簽元素都可以設定外邊距和內邊距，外邊距可以理解為是盒子以外的部分，而內邊距是盒子以內的部分直到內容的地方，看圖或是實際操作會比較好理解一些
所有HTML元素可以看作盒子，它包括：邊距（margin），邊框(border)，填充（padding），和實際內容(content)，如下圖
HTML元素可以看作盒子
當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完整大小的元素，你還必須添加內邊距，邊框和邊距。
下面的例子中設置div元素的寬度為300px，而實際寬度為450px
<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">這是一個div盒子</div>
實際寬度為450px的div
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
margin和padding（內邊距和外邊距）
margin或是padding只設置一個數值時代表上下左右都是這個數值，以下以margin為例的簡寫形式，代表的不同含義（padding也是一樣的）
margin屬性可以有一到四個值。
margin:25px 50px 75px 100px;
含義如下：
上外邊距為25px (margin-top: 25px;)
右外邊距為50px (margin-right: 50px;)
下外邊距為75px(margin-bottom: 75px;)
左外邊距為100px(margin-left: 100px;)
margin:25px 50px 75px;
含義如下：
上外邊距為25px(margin-top: 25px;)
左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)
下外邊距為75px(margin-bottom: 75px;)
margin:25px 50px;
含義如下：
上和下外邊距都為25px(margin-top: 25px和margin-bottom: 25px;)
左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)
margin:25px;
含義如下：
上、下、左、右外邊距都是25px（margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px）
這部分先講到這里，后續將會不斷的提到這些屬性，記得要上手操作哦，動手寫一下才能更好的理解！加油！爭取后續出個視頻，這樣可以更形象的講解。
本文中，我們將討論無序列表，在制作現代網站和應用程序時，無序列表的發展是不可避免的。
你是否做了很多很多名單的粉絲？我也不是。但是，這里我們不是在談論家務或購物清單。我們正在討論制作現代網站和應用程序時不可避免的有序和無序列表。
如前所述，在HTML和CSS中創建列表時，有兩種類型：有序和無序。在有序列表的情況下，存在數字。另一方面，在無序列表的情況下，不存在計數，這就是為什么這些類型的列表的通用名稱是項目符號列表。
使用列表時，正確格式化文本非常重要。
本文的重點將放在無序列表上，以及子彈的類型和屬性。
無序列表使用
<ul></ul>
標簽。我們來看一個簡單的例子。
HTML
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<ul>
該類型屬性可以被用來確定哪個子彈的類型將在列表中被使用。該屬性可以由三個不同的值組成：
Circle
Disc
Square
可以在<ul></ul>or <li></li>元素上設置項目符號類型，這意味著您可以在整個列表中設置樣式，或者單獨設置每個列表項目的樣式。
需要知道的是在創建列表時使用哪種字體大小。
為了改變項目符號樣式，可以使用兩個屬性。該列表樣式類型屬性或列表樣式。不同的是，通過使用第二個，我們可以同時更改多個屬性。但我們會在稍后討論。
CSS
.ul { list-style-type: square; }
這里我們看到列表樣式設置為square。
借助CSS的強大功能，可以使用自定義圖像作為子彈。通常，它是一個簡單的小圖標。為此，我們使用list-style-image。
CSS
ul { list-style-image: url(‘images/sample-bullet.png’); }
我們也可以通過使用list-style-position屬性來設置項目符號的位置。它可以有兩個值：外部和內部。
CSS
ul { list-style-position: outside; }
CSS
ul { list-style-position: inside; }
第一張圖片顯示的是設置為外部的值，第二張圖片的值設置為內部。
將值設置為外部時，表示子彈將位于列表項之外。并且，將值設置為內部時，子彈將位于列表項內。
不要忘記給列表一些樣式。
如果這種造型不夠，可以改變項目符號的顏色。
如前所述，您可以通過設置列表樣式來組合多個屬性。
CSS
ul { list-style: square inside url("element.gif"); }
通過這個簡寫，我們同時設置了列表式樣式，列表式樣位置和列表式樣圖像。
開發網站和應用程序時經常使用列表，所以您應該始終知道如何設計它們。我希望這個簡短的解釋能幫助你的項目。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
