當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
列表屬性
之前已經介紹過了列表標簽。主要有有序列表和無序列表，為了更好地控制這兩種列表，CSS還提供了這兩種列表的樣式設置。
- list-style（簡寫屬性，把所有列表的屬性設置寫到一個聲明中）
- list-style-image（把圖像設置為列表項標志）
- list-style-position（設置列表項標志的位置）
- list-style-type（設置列表項標志的類型）
屬性值說明：
list-style，作為縮寫，可以直接接后面所有的屬性值，也可以用none，表示去除所有列表樣式。
list-style-image，常接url引入圖片地址
list-style-position，可能的值如下：
| inside | 列表項目標記放置在文本以內，且環繞文本根據標記對齊。 |
| outside | 默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。 |
| inherit | 規定應該從父元素繼承 list-style-position 屬性的值。 |
list-style-type，可能的值很多，均為CSS中已經存在的列表標記，可以在需要時再查詢，引入圖片作為標記時，此項因為none
具體案例
我們可以寫一個具體的導航欄+列表項目的實例，話不多說，直接上代碼
語法格式：
html部分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./test.css"> </head> <body><!-- 創建最外層的一個大盒子 --><div class="box"><!-- 最上面放一個標題 --><h1>歡迎來到我的小店</h1><!-- 導航的盒子 --><div class="nav"><!-- 創建一個盒子，作為導航里的一級列表 --><div class="top"><!-- 使用無序列表 --><ul><li>家用電器</li><li>手機/運營商/數碼</li><li>電腦/辦公 </li><li>家居/家具/家裝/廚具</li><li>男裝/女裝/童裝/內衣</li><li>美妝/個護清潔/寵物</li></ul></div><!-- 創建一個盒子，存放二級列表 --><div class="bottom1"><ul><li>電視</li><li>空調</li><li>洗衣機</li><li>冰箱</li><li>廚衛大電</li></ul></div></div></div> </body> </html>css部分
*{margin: 0;padding: 0; } ul{/* 列表樣式縮寫，none表示去除所有樣式 */list-style: none; } .box{width: 100%;background-color: skyblue; } h1{width: 20%;margin: 0 auto; } .nav{margin-left: 100px;width: 1000px;height: 1000px; } .top{/* 讓一級標簽浮動,使得二級標簽能排列在旁邊 */height: 300px;float: left;background-color:rgb(219, 217, 217);line-height: 30px; } .bottom1{width: 400px;height: 300px;background-color: rgb(190, 196, 199);text-align: center;line-height: 30px; } .bottom1 li{/* 二級列表項設置圖標，用url引入地址 */list-style-image: url(./icon/car.png);/* 引入了圖標，那就不需要css中自帶的type */list-style-type: none;/* 標記放進文本內，環繞文本跟標記對齊 */list-style-position: inside; }效果圖：
這個案例 非常簡單，大家可以根據自己的需求再改樣式即可，滑動切換列表，需要配合JS操作，將暫時不需要的二級列表設置display:none;，滑動到的列表設為block，即可做到鼠標滑動顯示相應的列表了。
最后也歡迎大家到我自己的博客瞅瞅=-=小陳同學のblog
總結
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： HTML+CSS+JavaScript复