CSS设置列表样式以及列表项目的版式

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS设置列表样式以及列表项目的版式

CSS设置列表项目符号

CSS使用list-style-type属性来设置无序列表的样式,属性值可以有以下几种:

  • none,取消项目符号。
  • disc,实心圆(默认值)。
  • circle,空心圆。
  • square,正方形。

CSS使用list-style-type属性来设置有序列表的样式,属性值比较多:

  • decimal:数字(1,2,3,4等)。
  • lower-roman:小写罗马数字(i,ii,iii,iv,v等)。
  • upper-roman:大写罗马数字(I,II,III,IV,V等)。
  • lower-alpha:小写英文字母(a,b,c,d等)。
  • upper-alpha:大写英文字母(A,B,C,D等)。
  • armenian:传统的亚美尼亚编号方式、
  • Katakana:日文片假名(A,I,U,E,O,KA,KI等)。

CSS设置列表项目的版式

默认列表是竖排显示,如果想让列表并排显示,可以在li标签里面添加float:left样式或者display:inline-block样式,就可以使列表并排显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>列表项目的版式</title>
    <style type="text/css">
     body{
        background-color: #CCCCCC;
        margin: 0;
        padding: 0;
     }
     a{
        text-decoration: none;
     }
    .content ul li{
        background-color: #F8F8F8;
        padding: 4px;
        border: solid 1px #666666; 
        list-style-type: none;
        display: inline-block;
    }
    </style>
</head>
<body>
<div class="content">
    <ul >
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">首页</a></li>
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">新闻导航</a></li>
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">娱乐文章</a></li>
        <li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">美文欣赏</a></li>   
    </ul>
</div>
</body>
</html>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS设置列表样式以及列表项目的版式》 发布于2020-04-09

分享到:
赞(2) 赏杯咖啡

评论 抢沙发

1 + 2 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册