1. 程式人生 > >前端學習筆記(四)--CSS控制UL LI 的樣式詳解(推薦)及純CSS製作各種各樣的網頁圖示(三角形、暫停按鈕、下載箭頭、加號等)

前端學習筆記(四)--CSS控制UL LI 的樣式詳解(推薦)及純CSS製作各種各樣的網頁圖示(三角形、暫停按鈕、下載箭頭、加號等)

DIV+CSS裡,我們用得最多的就是ul li來顯示資料,如新聞按鈕等。下面給大家一個css ul li的例子供學習

<div id="menu"> 
<ul> 
<li><a href="#">首頁</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">部落格</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">設計</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">相簿</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">論壇</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">關於</a></li> 
</ul> 
</div> 

CSS:

#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;} 
解釋一下:

#menu ul {list-style:none;margin:0px;}
list-style:none,這一句是取消列表前點,因為我們不需要這些點。
margin:0px,這一句是刪除UL的縮排,這樣做可以使所有的列表內容都不縮排。

#menu ul li {float:left;}

這裡的 float:left 的左右是讓內容都在同一行顯示,因此使用了浮動屬性(float)。 

CSS中的ul與li樣式詳解

ul和li列表是使用CSS佈局頁面時常用的元素。在CSS中,有專門控制列表表現的屬性,常用的有list-style-type屬性、list-style-image屬性、list-style-position屬性和list-style屬性。

  一、list-style-type屬性

  list-style-type屬性是用來定義li列表的專案符號的,即列表前面的修飾。list-style-type屬性是一個可繼承的屬性。其語法結構如下:(列舉一些常用的屬性值)

  list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

  list-style-type屬性的屬性值有很多,在這裡我們只是列舉了比較常用的幾個。

none:不使用專案符號。 disc:實心圓。 circle:空心圓。 square:實心方塊。 demical:阿拉伯數字。 lower-alpha:小寫英文字母。 upper-alpha:大寫英文字母。 lower-roman:小寫羅馬數字。 upper-roman:大寫羅馬數字。

  使用list-style-type屬性的示例程式碼如下:

li{
list-style-type:square;}

<ul>
<li>這裡是列表內容</li>
<li>這裡是列表內容</li>
<li>這裡是列表內容</li>
</ul>

該樣式應用到頁面的效果如下圖所示:


二、list-style-image屬性

  list-style-image屬性用來定義使用圖片代替專案符號。它也是一個可繼承屬性,其語法結構如下:

  list-style-image:none/url

  list-style-image屬性可以取兩個值:

none:沒有替換的圖片。 url:要替換圖片的路徑。

  來看一段程式碼:

li{
list-style-image:url(images/photo1.gif);}

<ul>
<li>這裡是列表內容</li>
<li>這裡是列表內容</li>
<li>這裡是列表內容</li>
</ul>

  效果如下圖。

三、list-style-position屬性

  list-style-position屬性,是用來定義專案符號在列表中顯示位置的屬性。它同樣是一個可繼承的屬性,語法結構如下:

  list-style-position:inside/outside

inside:專案符號放置在文字以內。 outside:專案符號放置在文字以外。

  使用list-style-position屬性的示例如下:

li{
list-style-type:square;
list-style-position:outside;}

<ul>
<li>這裡是使用list-style-position屬性值為outside的示例。請注意換行以後專案符號的位置。</li>
<li>這裡是列表內容</li>
<li>這裡是列表內容</li>
</ul>

  效果如下圖所示。


再來看一下屬性值為inside的樣式。

li{
list-style-type:square;
list-style-position:inside;}

<ul>
<li>這裡是使用list-style-position屬性值為inside的示例。請注意換行以後專案符號的位置。</li>
<li>這裡是列表內容</li>
<li>這裡是列表內容</li>
</ul>

四、list-style屬性

  list-style屬性是綜合設定li樣式的屬性,也是一個可以繼承的屬性,語法結構如下:

  li-style:list-style-type/list-style-image/list-style-position

  各個值的位置可以交換。比如:

li{
list-style:url(images/bg03.gif) inside;}

<ul>
<li>這裡是使用list-style屬性的示例。請注意換行以後專案符號的位置。</li>
<li>這裡是列表內容</li>
</ul>

  可以看一下應用到頁面的效果。

以下開始主要介紹了純CSS製作各種各樣的網頁圖示(三角形、暫停按鈕、下載箭頭、加號等)的相關資料:

三角形

<div class="box"></div>
<style>
.box{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid red;
}
</style>

平行四邊形圖示

<div class="box"></div>
<style>
 .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            background-color: red;
            transform: skew(-25deg);
        }
</style>

漢堡按鈕

<div class="box"></div>
<style>
    .box{
        width: 50px;
        height: 0px;
        margin: 100px auto;
        box-shadow: 36px 10px 0 3px red,
        36px 0 0 3px red,
        36px 20px 0 3px red;
    }
</style>

單選按鈕

因為box-shadow會按比例縮放,因此將第一個值設定為白色,然後將第二個值設定的比第一個值大就可以了

<div class="box"></div>
<style>
    .box{
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
    }
</style>

圓圈中帶個十字

<div class="box"></div>
<style>
    .box {
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
        outline: 36px solid #fff;
        outline-offset: -50px;
    }
</style>

需要在Chrome瀏覽器中開啟,因為其他瀏覽器或許不支援

田型圖示

<div class="box"></div>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        border: 3px solid red;
        outline: 6px dotted red;
        outline-offset: 6px;
    }
</style>

下載箭頭

使用border製作三角形,使用box-shadow製作正方形,主要用了偏移:

<div class="box"></div>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        color: red;
        border: 8px solid transparent;
        border-top: 8px solid red;
        box-shadow: 0 -12px 0 -4px;
    }
</style>

書籤

實現這種效果的原理就是講三角形設定成背景色,這樣空心的三角形就出現了:

<div class="box"></div>
<style>
    .box {
        width: 0;
        height: 8px;
        background-color:orange;
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }
</style>

兩個半圓圖示

這個比較簡單,就是通過漸變函式來實現,然後來個圓角邊框:

<div class="box"></div>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        background-image: linear-gradient(to right,#ccc 50%,#000 50%);
    }
</style>

禁用圖示

外圈利用圓角邊框,裡面的豎線用漸變來做,然後再用旋轉屬性即可:

<div class="box"></div>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        border:2px solid #000;
        background: linear-gradient(to right,#fff  45%,#000 45%,#000 45%,#fff 55%);
        transform: rotate(40deg);
    }
</style>

左右箭頭圖示

既然能做出一個三角形,那麼就可以做出兩個三角形。

<div class="box"></div>
<style>
    .box {
        width: 0;
        height: 0;
        margin: 100px auto;
        border: 10px solid transparent;
        border-left: 10px solid red;
        -webkit-box-reflect: left 5px;
        box-reflect:left 5px;
    }
</style>

需要在Chrome瀏覽器中開啟,因為其他瀏覽器或許不支援

鷹嘴圖示

<div class="box"></div>
<style>
    .box {
       width: 32px;
        margin: 100px auto;
        border-top: 50px solid transparent;
        border-right: 22px solid #096;
        border-bottom-right-radius: 100%;;
    }
</style>

需要在Chrome瀏覽器中開啟,因為其他瀏覽器或許不支援

暫停按鈕

<div class="box"></div>
    <style>
        .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            color: #000;
            border: 1px solid;
            border-radius: 50%;
            outline: 10px solid;
            outline-offset: -26px;
        }
    </style>

加號

<div class="box"></div>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
    }
</style>
如果再將其旋轉,就變成了一個關閉按鈕

關閉按鈕

<div class="box"></div>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
        transform: rotate(45deg);
    }

以上就是本文的全部內容,希望對大家的學習有所幫助。