您的位置：首页 > 其它

list

2015-09-20 01:59 218 查看
1. 无序列表和有序列表 unordered lists & ordered lists

无序列表即列表项前没有用数字索引

有序列表即列表项前用数字索引

2. unordered lists 用<ul>开头，列表项用<li>写

eg. <ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

3. 无序列表索引样式

<ul style="list-style-type:disc"> 小黑点

<ul style=list-style-type:circle"> 小黑圈

<ul style=list-style-type:square"> 小黑块

<ul style=list-style-type:none"> 什么都没有

4. ordered lists 用<ol>开头，列表项用<li>写

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

5. 有序列表索引样式

<ol type="1"> 数字

<ol type="A"> 大写字母

<ol type="a"> 小写字母

<ol type="I"> 大写罗马数字

<ol type="i"> 小写罗马数字

6. 描述性列表

<dl>开头，<dt>定义项目名字，<dd>项目解释

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

7. 列表嵌套

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

    <li>Black tea</li>

    <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

8. 水平列表

#在head中定义，id在body中引出

eg. <head>

<style>

ul#menu li {

    display:inline;

}

</style>

</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

  <li>PHP</li>

</ul>  

</body>

9. 菜单列表

eg. <head>

<style>

ul#menu {

    padding: 0;

}

ul#menu li {

    display: inline;

}

ul#menu li a {

    background-color: black;

    color: white;

    padding: 10px 20px;

    text-decoration: none;

    border-radius: 4px 4px 0 0;

}

ul#menu li a:hover {

    background-color: orange;

}

</style>

</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">

  <li><a href="/html/default.asp">HTML</a></li>

  <li><a href="/css/default.asp">CSS</a></li>

  <li><a href="/js/default.asp">JavaScript</a></li>

  <li><a href="/php/default.asp">PHP</a></li>

</ul>  

</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航