侧边框

最新推荐文章于 2024-07-12 20:49:16 发布

zly990213

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量250

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/zly990213/article/details/107779916

版权

设置一个边框，当边框内容被选择，被点击，以及点击过后都会有不用颜色效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边框</title>
    <style>
        ul{
            list-style: none;
        }
        div{
            width: 300px;
            height: 1300px;
            margin: 1 auto;
            background-color: white;
            margin:"2";
        }
        a:hover{
            color: red;
        }
        li:hover{
            background-color: pink;
        }
        ul{
            border: 10px solid peru;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href='' class='jiayongdianqi'>家用电器</a></li>
            <li><a href='' class='shouji'>手机</a>
                <span>/</span>
            <a href='' class='yunyingshang'>运营商</a>
                <span>/</span>
            <a href='' class='shuma'>数码</a></li>
            <li><a href='' class='diannao'>电脑</a>
                <span>/</span>
            <a href='' class='bangong'>办公</a>
                <span>/</span>
            <a href='' class='dianjing'>电竞</a></li>
            
            <li><a href='' class='fangchan'>房产</a>
                <span>/</span>
            <a href='' class='qiche'>汽车</a>
                <span>/</span>
            <a href='' class='qicheyongpin'>汽车用品</a></li>
            <li><a href='' class='shipin'>食品</a>
            <span>/</span>
            <a href='' class='jiulei'>酒类</a>
            <span>/</span>
            <a href='' class='shegnxian'>生鲜</a></li>
            <li><a href='' class='tushu'>图书</a>
            <span>/</span>    
            <a href='' class='wenyv'>文娱</a>
            <span>/</span>  
            <a href='' class='dianzishu'>电子书</a></li>
            <li><a href='' class='jipiao'>机票</a>
            <span>/</span>    
            <a href='' class='lvyou'>旅游</a>
            <span>/</span>
            <a href='' class='shenghuo'>生活</a></li> 
            <li><a href='' class='jiaju'>家居</a>
            <span>/</span>
            <a href='' class='jiazhuang'>家装</a>
            <span>/</span>
            <a href='' class='chuju'>厨具</a></li>
            <li><a href='' class='1'>1</a>
            <span>/</span>
            <a href='' class='2'>2</a>
            <span>/</span>
            <a href='' class="3">3</a></li>

        </ul>
    </div>
</body>
</html>

和状态相关的伪类选择器
:hover(当鼠标悬停在某个元素上时)
:avtive（当鼠标按下时的状态）
:link（当当前元素未被点击过的状态）
:visited（被访问过之后的状态）
书写顺序：link-》visited–》hover–》active

zly990213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
侧边框

设置一个边框，当边框内容被选择，被点击，以及点击过后都会有不用颜色效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>侧边框</title> <styl
复制链接

扫一扫