设计排行榜栏目列表样式

最新推荐文章于 2023-10-11 11:18:55 发布

漂流の少年

最新推荐文章于 2023-10-11 11:18:55 发布

阅读量404

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： css 伪类选择器

本文链接：https://blog.csdn.net/YINZHE__/article/details/118034300

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

images文件下面的两张图
bg.jpg

icon.png
大小：17px*380px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表</title>
    <style>
        #wrap {
            background: url(images/bg.jpg) no-repeat;
            width: 260px;
            height: 276px;
            padding-top: 26px;
            padding-left: 12px;
        }
        #wrap ul {
            list-style-type: none;      /*设置列表项标记为无*/
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #777;
        }
        #wrap li {
            background: url(images/icon.png) no-repeat 2px 10px;/*后面两个数据分别是图片的左边距和上边距*/
            padding: 1px 0px 0px 28px;  /*设置内边距：上 右 下 左*/
            line-height: 30px;          /*设置行高*/
        }
        #wrap a {
            text-decoration: none;      /*对文本的修饰为无，这里的效果是把下划线去掉了*/
            color: #777;
        }
        #wrap li a:hover {
            color: #F63;                 /*:hover(行为伪类)，设置鼠标悬停在该元素时的样式*/
        }
        /*结构伪类的应用*/
        #wrap li:first-child {            /*设置第一个子元素*/
            background-position: 2px 10px;/*设置背景图片的起始位置，第一个是水平位置，第二个是垂直位置*/
            font-weight: bold;            /*字体加粗*/
        }
        #wrap li:last-child {            /*设置最后一个子元素*/
            background-position: 2px -277px;
        }
        #wrap li:nth-child(7) {           /*设置第7个子元素*/
            background-position: 2px -236px;
        }
        #wrap li:nth-child(6) {           /*设置第6个子元素*/
            background-position: 2px -195px;
        }
        #wrap li:nth-child(5) {           /*设置第5个子元素*/
            background-position: 2px -154px;
        }
        #wrap li:nth-child(4) {           /*设置第4个子元素*/
            background-position: 2px -113px;
        }
        #wrap li:nth-child(3) {           /*设置第3个子元素*/
            background-position: 2px -72px;
        }
        #wrap li:nth-child(2) {           /*设置第2个子元素*/
            background-position: 2px -31px;
        }
        #wrap li:nth-child(3n+1) {         /*nth-child(公式)，表示给第1、3、7个元素字体加粗*/
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul>
        <li><a href="https://baijiahao.baidu.com/s?id=1702906307256784541&wfr=spider&for=pc">聂海胜出征前染黑了白发</a></li>
        <li><a href="https://baijiahao.baidu.com/s?id=1702903929342054863&wfr=spider&for=pc">国常会通过计划生育法修正草案</a></li>
        <li><a href="https://baijiahao.baidu.com/s?id=1702912404139777796&wfr=spider&for=pc">广东东莞新增1例本土确诊</a></li>
        <li><a href="https://baijiahao.baidu.com/s?id=1702809812748078688&wfr=spider&for=pc">聂海胜3次出征太空对比照</a></li>
        <li><a href="https://www.chinanews.com/gj/2021/06-18/9502513.shtml">古特雷斯连任联合国秘书长</a></li>
        <li><a href="https://baijiahao.baidu.com/s?id=1702909991611046687&wfr=spider&for=pc">宁波一外籍男涉嫌杀害一女子被捕</a></li>
        <li><a href="https://baijiahao.baidu.com/s?id=1702901632208768014&wfr=spider&for=pc">国足12强赛分档</a></li>
        <li><a href="https://haokan.baidu.com/v?vid=16516822936240108945&pd=bjh&fr=bjhauthor&type=video">航天员太空外卖已送达,有宫保鸡丁</a></li>
    </ul>
</div>
</body>
</html>

效果:
在这里插入图片描述
CSS伪选择器：结构伪类，主要包括以下几种

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 按正序匹配特定子元素
:nth-last-child() 按倒序匹配特定子元素
:nth-of-type() 在同类型中匹配特定子元素
:nth-last-of-type() 按倒序在同类型中匹配特定子元素
:first-of-type 第一个同类型子元素
:last-of-type 最后一个同类型子元素
:only-child 唯一子元素
:only-of-type 同类型的唯一子元素
:empty 空元素

漂流の少年

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
设计排行榜栏目列表样式

结构伪类主要包括以下几种:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 按正序匹配特定子元素:nth-last-child() 按倒序匹配特定子元素:nth-of-type() 在同类型中匹配特定子元素:nth-last-of-type() 按倒序在同类型中匹配特定子元素:first-of-type 第一个同类型子元素:last-of-type 最后一个同类型子元素:only-child 唯一子元素:only-of-type
复制链接

扫一扫