zoukankan      html  css  js  c++  java
  • CSS:列表项的一些操作

    一、通过背景实现列表标记

    缺点:因为图像是设置在背景中的,不一定会被打印出来。

    解决方法:在打印样式表中声明正常的列表标记。或其他一些类似的方法。

    html:

    <ul class="starts">
            <li><div> The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, are staying just down the street from Levi’s Stadium, and practicing 14 miles away at Stanford’s practice fields and Stanford Stadium, if desired. They will practice Wednesday, Thursday and Friday at Stanford, and have a walk-through practice on Saturday morning, 11 a.m., at Levi’s Stadium, as is their normal custom. They’ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then be cloistered after that until Sunday.</div></li>
            <li><div> The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, are staying just down the street from Levi’s Stadium, and practicing 14 miles away at Stanford’s practice fields and Stanford Stadium, if desired. They will practice Wednesday, Thursday and Friday at Stanford, and have a walk-through practice on Saturday morning, 11 a.m., at Levi’s Stadium, as is their normal custom. They’ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then be cloistered after that until Sunday.</div></li>
            <li><div> The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, are staying just down the street from Levi’s Stadium, and practicing 14 miles away at Stanford’s practice fields and Stanford Stadium, if desired. They will practice Wednesday, Thursday and Friday at Stanford, and have a walk-through practice on Saturday morning, 11 a.m., at Levi’s Stadium, as is their normal custom. They’ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then be cloistered after that until Sunday.</div></li>
            <li><div> The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, are staying just down the street from Levi’s Stadium, and practicing 14 miles away at Stanford’s practice fields and Stanford Stadium, if desired. They will practice Wednesday, Thursday and Friday at Stanford, and have a walk-through practice on Saturday morning, 11 a.m., at Levi’s Stadium, as is their normal custom. They’ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then be cloistered after that until Sunday. Solutions</div></li>
            <li><div> The Broncos, who landed in San Jose at 4:45 p.m. PT Sunday, are staying just down the street from Levi’s Stadium, and practicing 14 miles away at Stanford’s practice fields and Stanford Stadium, if desired. They will practice Wednesday, Thursday and Friday at Stanford, and have a walk-through practice on Saturday morning, 11 a.m., at Levi’s Stadium, as is their normal custom. They’ll meet the media at their hotel on Tuesday, Wednesday and Thursday mornings, then be cloistered after that until Sunday.</div></li>
        </ul>

    CSS:

        ul.starts {
                list-style: none;
                margin-left: -10px;/*根据需要调整位置*/
            }
    
                ul.starts li {
                    background: url(image/star_16px_1163400_easyicon.net.png) 0 0.1em no-repeat;
                    padding-left: 16px; /*让文本右移一些*/
                    border-bottom: 1px solid black; /*加底线*/
                }
    
                ul.starts div {
                    color: black;
                }

    显示效果:

     二、生成列表标记

    优点:解决了上一个列表标记的缺点,会被打印出来。

      

        <style type="text/css">
            ul.starts li:before {
                content: url(star.png);
                margin-right: 8px;
            }
    
            ul.starts li {
                text-indent: -20px;
                list-style: none;
            }
        </style>
  • 相关阅读:
    离线存储
    创业公司 加入
    console 代理
    HTTP 协议中 Vary 的一些研究
    reactNative 的一些学习
    srcset 图片自适应
    一些不错的文章分享
    前端网站大全
    c# 捕捉键盘按键
    SQL 中With as 的用法
  • 原文地址:https://www.cnblogs.com/hzz521/p/5179094.html
Copyright © 2011-2022 走看看