欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS設置列表樣式和創(chuàng)建導航菜單實現(xiàn)代碼

  發(fā)布時間：2018-07-24 14:16:49   作者：佚名   我要評論
這篇文章主要介紹了CSS設置列表樣式和創(chuàng)建導航菜單實現(xiàn)代碼,需要的朋友可以參考下

一、設置列表的符號

 list-style-type: 屬性；//設置列表樣式

list-style-type: none; //清楚樣式

屬性有很多可以自己去試：circle，disc,decimal。。。。

二、設置列表圖片符號

為ul,ol設置圖片符號

ul,ol{
     list-style-image: url("li.png")
 }

代碼：
 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>設置列表的符號</title>
<style type="text/css">
ul,ol{
 list-style-image: url("li.png")
}
</style>
</head>
<body>
<ul>
 <li>主頁</li>
 <li>我的博客</li>
 <li style="list-style-image: url('image.png')">我的相冊</li>
 <li>留言</li>
 <li>關(guān)于我</li>
</ul>
<ol>
 <li>主頁</li>
 <li>我的博客</li>
 <li>我的相冊</li>
 <li>留言</li>
 <li>關(guān)于我</li>
</ol>
</body>
</html>

顯示效果：

三、創(chuàng)建簡單導航菜單

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>創(chuàng)建簡單導航菜單</title>
<style type="text/css">
#navigation{
/*  width: 120px;  */
 
 font-family: Arial;
 font-size: 14px;
 text-align: center;
}
#navigation ul{
 list-style-type: none;
 margin:0px;
 padding:0px;
}
#navigation li{
 border-bottom:1px solid #9F9FED;   /* 添加下劃線 */ 
 float: left;   /* 橫向排列 */
} 
#navigation li a{
 display: block;
 height:1em;
 padding: 5px 5px 5px 0.5em;
 text-decoration: none;
}
#navigation li a:link,#navigation li a:visited{
 background-color: #1136c1;
 color: #FFF;
}
#navigation li a:hover{    /* 鼠標經(jīng)過時 */
 background-color: #002099;  /* 改變背景 */
 color: #ff0;     /* 改變文字顏色 */
}
</style>
</head>
<body>
<div  id="navigation">
 <ul>
  <li><a href="#">主頁</a></li>
  <li><a href="#">我的博客</a></li>
  <li><a href="#">我的相冊</a></li>
  <li><a href="#">留言</a></li>
  <li><a href="#">關(guān)于我</a></li>
 </ul>
</div>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的CSS設置列表樣式和創(chuàng)建導航菜單實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • CSS 帶搜索導航欄的示例代碼

    這篇文章主要介紹了CSS 帶搜索導航欄的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2021-02-22

  • html+css+js實現(xiàn)導航欄滾動漸變效果

    這篇文章主要介紹了html+css+js實現(xiàn)導航欄滾動漸變效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-28

  • css錨點定位被頂部固定導航欄遮住的解決方案

    這篇文章主要介紹了css錨點定位被頂部固定導航欄遮住的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小
    2020-04-09

  • 不可思議的CSS導航欄下劃線跟隨效果

    這篇文章主要介紹了純CSS實現(xiàn)導航欄下劃線跟隨效果，本文圖文并茂實例代碼詳解，給大家介紹的非常詳細，需要的朋友參考下吧
    2019-12-09

  • html+css 實現(xiàn)簡易導航欄功能

    這篇文章主要介紹了基于html+css 實現(xiàn)簡易導航欄功能，主要就是css（級聯(lián)樣式表）對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學習吧
    2021-04-07

  • CSS導航條菜單之帶小三角形的實現(xiàn)代碼

    這篇文章主要介紹了CSS導航條菜單之帶小三角形的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-22

  • css實現(xiàn)導航切換的實例代碼

    本文通過實例代碼給大家介紹了css實現(xiàn)導航切換效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-08-15

  • CSS中的導航欄和下拉菜單的實現(xiàn)

    這篇文章主要介紹了CSS中的導航欄和下拉菜單的實現(xiàn)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-18

  • 純CSS + 媒體查詢實現(xiàn)網(wǎng)頁導航效果

    這篇文章主要介紹了純CSS + 媒體查詢實現(xiàn)網(wǎng)頁導航效果,需要的朋友可以參考下
    2018-05-02

  • CSS3 二級導航菜單的制作的示例

    這篇文章主要介紹了CSS3 二級導航的制作的示例的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-02

最新評論