CSS 列表樣式

SS列表屬性作用如下：

設置不同的列表項標記為有序列表
設置不同的列表項標記為無序列表
設置列表項標記為圖像

列表

在HTML中，有兩種類型的列表：

無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
有序列表 - 列表項的標記有數字或字母

使用CSS，可以列出進一步的樣式，并可用圖像作列表項標記。

不同的列表項標記

list-style-type屬性指定列表項標記的類型是：:

實例

ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}ol.d{list-style-type:lower-alpha;}

一些值是無序列表，以及有些是有序列表。

作為列表項標記的圖像

要指定列表項標記的圖像，使用列表樣式圖像屬性：

實例

ul{list-style-image:url('sqpurple.gif');}

上面的例子在所有瀏覽器中顯示并不相同，IE和Opera顯示圖像標記比火狐，Chrome和Safari更高一點點。

如果你想在所有的瀏覽器放置同樣的形象標志，就應使用瀏覽器兼容性解決方案，過程如下

瀏覽器兼容性解決方案

同樣在所有的瀏覽器，下面的例子會顯示的圖像標記：

實例

ul{list-style-type:none;padding:0px;margin:0px;}ulli{background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px5px;padding-left:14px;}

例子解釋：

設置列表樣式類型為沒有刪除列表項標記
設置填充和邊距0px（瀏覽器兼容性）

ul中所有li:

設置圖像的URL，并設置它只顯示一次（無重復）
您需要的定位圖像位置（左0px和上下5px）
用padding-left屬性把文本置于列表中

列表 -縮寫屬性

在單個屬性中可以指定所有的列表屬性。這就是所謂的縮寫屬性。

為列表使用縮寫屬性，列表樣式屬性設置如下：

實例

ul{list-style:squareurl("sqpurple.gif");}

如果使用縮寫屬性值的順序是：

list-style-type
list-style-position (有關說明，請參見下面的CSS屬性表)
list-style-image

如果上述值丟失一個，其余仍在指定的順序，就沒關系。

所有的CSS列表屬性

屬性	描述
list-style	簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中
list-style-image	將圖象設置為列表項標志。
list-style-position	設置列表中列表項標志的位置。
list-style-type	設置列表項標志的類型。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

接觸簡書也有一段日子了，這中間的時光還是比較輕松加愉快的，那種可以和他人分享知識的欣喜和愉悅的確是非常棒。我一向都是覺得專心寫自己的文就可以了，不會總是糾結有多少人在看，有多少點擊等等。用心寫好自己的文，體會那種分享的快樂，就可以了。

之前寫的《js常用方法和一些封裝》系列暫且告一段落，接下來，我會通過各種案例，來分享javascript的各種技巧，所以最終將這個系列的名稱定為：《從案例中學習JavaScript》,回想到自己初學編程時候的各種艱辛，買了很多書，然而這些書大多為泛泛而談，或者東拼西湊。市面上充斥著各種多少多少天從入門到精通的書籍，我曾經也花了好多大洋，滿懷信心地買了類似的書，結果我就零基礎從入門到蒙逼了。

經過幾年的摸索，我最終發現，知識點還是必須在工作中去練習才能真正的理解，或者通過一個具體的案例來融匯貫通。當然，我指的案例不是那種很多線下培訓機構為了講知識點而弄出來的案例。

比如這樣的：

for (var i = 0; i < 3 ; i ++) {
 alert(i);
}

這就是典型的為了講而講，案例非常枯燥不說，而且花費大量的時間來練習這種語法級別的東西，堆砌這種并沒有什么意思的案例，真的很難引起初學者的興趣。

很多線下的培訓機構，包括大多數大學里的課程，就是這么做的。比如JAVA，一開始都會教著打印一個HelloWorld,然后中規中矩地講解for循環，打印九九乘法表。

接著，一個必然會講的東西就是冒泡排序，很多初學者在此卡殼，覺得JAVA怎么這么難啊！于是，他們開始自暴自棄，為了學而學，也不知道學了有什么用？

好不容易培訓完了，工作了幾年，突然發現，我好像從來沒用到什么冒泡排序啊？

誠然，你不去當算法工程師，就算會了冒泡排序又怎樣呢？算法這東西，需要時間的積累和技術的沉淀，我始終認為初學編程應該將重心放在方法的調用和興趣的培養上面，最起碼，必須得做點東西出來。基本的算法，時間長了自然會，初學者真沒必要花太多的時間在算法上，邏輯思維清晰的話還好一些，如果不是呢，那么很可能就會在剛開始學編程的時候就產生煩躁的情緒，這實在是得不償失。

好了，扯犢子結束了，下面開始愉快的編程之旅吧！

第一個案例，就做一個簡單的音樂播放器吧。

目錄結構

如圖，我已經在mp3文件夾內添加了兩首歌，現在打開index.html，里面是一個簡單的模板。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>音樂小站</title>
 </head>
 <body>
 
 </body>
 <script type="text/javascript">
 
 </script>
</html>

1. 利用audio標簽渲染一個播放器

<audio src='mp3/1.mp3' controls=""></audio>

audio是h5的一個標簽，以上代碼表示創建了一個播放器，并且播放文件指向了1.mp3這首歌，controls代表使用瀏覽器自帶的播放器界面。

渲染效果如圖，感覺還不錯，點擊左邊的播放按鈕就可以播放這首歌了哦。

2. 用js來控制音樂播放器

現在，我們不用瀏覽器自帶的控制界面，單純地用js來操作。因為自帶的界面未必能滿足我們的需要，比如上一首，下一首，歌詞等等。

我們將這一行代碼刪除。

<audio src='mp3/1.mp3' controls=""></audio>

第一步. 用js來創建一個audio元素。

var musicDom = document.createElement('audio');

第二步. 加載一首音樂。

musicDom.src = 'mp3/2.mp3';

第三步. 播放音樂。

musicDom.play();

這樣的話，當我們在此刷新頁面，歌曲就會被自動播放。

第四步. 開始將基本的方法封裝起來

一個音樂播放器，最基本的功能有：

1.初始化

2.添加歌曲

3.播放

4.暫停

5.下一首

6.上一首

var musicBox= {
 
 musicDom : null, //播放器對象
 songs : [], //歌曲目錄，用數組來存儲
 
 //初始化音樂盒
 init : function(){
 this.musicDom = document.createElement('audio');
 },
 
 //添加一首音樂
 add : function(src){
 this.songs.push(src);
 },
 
 //根據數組下標決定播放哪一首歌
 play : function(index){
 this.musicDom.src = this.songs[index];
 this.musicDom.play();
 },
 
 //暫停音樂
 stop : function(){
 this.musicDom.pause();
 },
 
 //下一首（待編寫）
 next : function(){
 
 },
 
 //上一首（待編寫）
 prev : function(){
 
 }
}

我們將邏輯代碼用一個json對象包裹了起來，對音樂播放器進行了簡單的封裝，這樣看起來條理會比較清晰。其實，這已經是一個簡單的js小插件了，不是嗎？等以后做得比較完善的時候，我們完全可以將這個對象放到js文件里，作為一個js插件被其他頁面來調用。

js基礎我以后會專門開貼來總結，現在先就這么寫下去吧。

封裝插件也是學習js的一大樂趣呢！

好了，來測試一下吧:

musicBox.init(); //初始化
musicBox.add('mp3/1.mp3');
musicBox.add('mp3/2.mp3');
musicBox.play(0); //聽第一首歌

刷新頁面，雖然啥也沒有，但是動聽的音樂已然響起，我這邊的第一首歌曲是火影忍者的主題曲，很帶感哦。

第五步. 畫一個樣式吧！

這一步，我們來簡單繪制一個播放器的樣式，我盡可能寫詳細一點：

css：

width: 200px;
height:300px;
background:#ccc;

html：

<div id='music' class='music'></div>

效果：

接下來，讓這個div盒子相對于body居中。

還記得上一節《js常用方法和一些封裝》-- 時間相關（附案例詳解）嗎，里面就有一個現成的居中方法，還有獲取元素的方法。現在我們拿過來直接用：

//讓元素居中的方法

function _center(dom){

dom.style.position = 'absolute';

dom.style.top = '50%';

dom.style.left = '50%';

dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';

dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';

}

//根據id獲取元素

function dom(id){

if(id.toString().indexOf('#') != -1) {

id = id.replace('#','');

}

return document.getElementById(id);

};

調用

var musicDom = dom('#music');
_center(musicDom);

成功居中了。

接下來，我們將顏色調深一點，然后加上一點圓角：

background:#333;
border-radius: 5px;

再加上一點盒陰影：

box-shadow: 3px -3px 3px #666;

Paste_Image.png

這樣就有一點陰影效果了。

下面，我們來繪制屏幕和按鈕區：

css:

.music {
 width: 200px;
 height:300px;
 background:#333;
 border-radius: 5px;
 box-shadow: 3px -3px 3px #666;
 position: relative;
}
.music .screen {
 height:70%;
 width:96%;
 background: #ccc;
 margin-left:2%;
 margin-top: 2%;
}
.music .buttons {
 height:25%;
 width:96%;
 background: wheat;
 margin-left:2%;
 margin-top: 2%;
}

html：

<div id='music' class='music'>
 <div class='screen'></div>
 <div class='buttons'></div>
</div>

效果：

Paste_Image.png

我打算在屏幕區域加一個音樂的圖標，順便分享一下iconfont的使用吧。

番外：矢量圖標icontont的使用

這是阿里巴巴的一個矢量圖標庫，打開官網：

點擊所有公開庫，

搜索音樂，尋找我們需要的圖標：：

在搜索你喜歡的按鈕：

總之，你想要什么圖標，直接搜索就可以了。

我隨便挑了幾個按鈕，

點擊下載至本地，然后解壓：

里面有一個demo.html頁面，里面詳細介紹了iconfont的使用方法。

1.將如圖框起來的文件拷貝到項目的css文件夾，引入css文件

 <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

2.現在我們引入這個圖標

<div id='music' class='music'>
 <div class='screen'>
 <i id='music-icon' class="iconfont"></i>
 </div>
 <div class='buttons'></div>
</div>

效果：

現在，我們還是要把這個小圖標居中顯示。

var musicIcon = dom('#music-icon');
_center(musicIcon);

咦，好像不對哦，看樣子是相對于最外面的music盒子居中定位了呢。

這是咋回事呢？通過這個小bug，可以引出一個定位的知識點。

原來，我們居中的原理是設置子元素的position為absolute，然后用top和left來實現的，如果父盒子沒有設置position,那么子元素會一直往上找，直到碰上一個有position并且不是static的元素來做定位。

在這個案例中 ,<div id='music' class='music'></div>是有定位的，所以就相對于它居中了。

了解原因之后，我們來給屏幕區域加一個position吧！

問題來了，給它設置absolute還是relative呢？

先看看加absolute的效果吧：

position: absolute;

靠，按鈕去不見了，嚇得我馬上F12打開調試模式一探究竟。

如圖，原來是擠上去了呀。其實道理也很簡單，當一個元素的position設置為absolute的時候，它就脫離文檔流，也就是說不占位置了。所以下面的div元素就會擠上來。就這么簡單。

而relative會保持之前的位置，不脫離文檔流。

position: relative;

成了，然后我們來調個色，把圖標也弄得大一點。

.music {
 width: 200px;
 height:300px;
 background:#333;
 border-radius: 5px;
 box-shadow: 3px -3px 1px #666;
 position: relative;
}
.music .screen {
 height:70%;
 width:96%;
 background: linear-gradient(#403d3d,65%,#5f5b5b);
 margin-left:2%;
 margin-top: 2%;
 position: relative;
 
}
.music .screen i {
 color:#fff;
 font-size: 88px;
}
.music .buttons {
 height:25%;
 width:96%;
 margin-left:2%;
 margin-top: 2%;
}

然后把按鈕添加上去：

css:

.music .screen i {
 color:#fff;
 font-size: 88px;
}
.music .buttons i {
 color:#fff;
 font-size: 24px;
 margin-left: 28px;
 position: relative;
 top:25px;
}
.music .buttons i:hover {
 cursor: pointer;
}

html:

<div id='music' class='music'>
 <div class='screen'>
 <i id='music-icon' class="iconfont"></i>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont"></i>
 <i id='play' class="iconfont"></i>
 <i id='next' class="iconfont"></i>
 </div>
</div>

效果圖：

這是一套純黑色系的皮膚，你也可以自己設置css樣式來自定義喜歡的皮膚哦。

F12進入調試模式，像這樣：

你想要什么顏色都可以！

紅色：

藍色：

銀色：

土豪金：

在下一節，我們嘗試把各種皮膚封裝到組件里。

時間不早了，今天只完成了一個模板，下次我們再聊吧！

勘誤：

iconfont的圖片編碼沒能正常顯示，可能是markdown編輯器不支持吧。

就是如圖所示的編碼，markdown編輯器沒有正常顯示出來，額，這個小細節就先忽略吧，嘿嘿。

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音樂</title>

    <meta charset="utf-8">

<!--embed標簽寫在<head>里面的title標簽下-->
   

<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 說明：

1、src：文件路徑。

2、hidden="true"表示隱藏音樂播放按鈕，相反使用hidden="false"表示開啟音樂播放按鈕。

3、autostart="true" 表示是打開網頁加載完后自動播放。

4、loop="true"表示 循環播放 如僅想播放一次則為：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白氣球.mp3">       

</audio>

<!-- 說明：

1、autoplay="autoplay"，則背景音樂將在音網頁打開后就自動馬上播放。

2、controls="controls"，則為了在頁面內顯示顯示控件，如播放按鈕。

3、"loop="loop"，則是為了使背景音樂重復播放。

4、preload="auto"，則音頻在頁面加載的同時進行加載，并預備播放。

5、src=""，即是在""內加入背景音樂的保存路徑，如：src=""。

注：若是想播放按鈕隱藏，則使用以下語句：

直接使用css 的display控制audio標簽的顯示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

在線咨詢

上一篇：為什么要學習HTML？HTML會過時嗎？
下一篇：前端多個 Tab 頁點擊切換時當前頁面顯示成別的頁面的數據

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 列表樣式

目錄結構

您的項目需求