CSS3选项卡

最新推荐文章于 2024-06-02 16:43:03 发布

我本浪人--游吟世间

最新推荐文章于 2024-06-02 16:43:03 发布

阅读量267

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_41760521/article/details/96441055

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

选项卡demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        .wrapper {
            position: relative;
            width: 200px;
            height: 200px;
            background: pink;
            text-align: center;
        }
        
        .wrapper div {
            display: none;
            position: absolute;
            top: 75px;
            left: 75px;
        }
        
        input:checked+div {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input type="radio" name="meimei" checked>
        <div>好妹妹</div>
        <input type="radio" name="meimei">
        <div>小熊</div>
        <input type="radio" name="meimei">
        <div>小椰汁</div>
    </div>
</body>

</html>

效果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3选项卡</title>
    <style>
        body,
        ul,
        li,
        a {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        
        .wrapper {
            width: 600px;
            margin: 0 auto;
            font-size: 0;
        }
        
        .title ul li {
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            background-color: rgb(160, 158, 158, 0.2);
        }
        
        .title ul li label {
            display: inline-block;
            width: 200px;
            height: 50px;
            line-height: 50px;
        }
        
        .main {
            background-color: #f7f7f7;
        }
        
        .main ul {
            padding: 20px 0;
            display: none;
        }
        
        .main ul li {
            margin: 10px 50px;
        }
        
        .main ul li a {
            font-size: 14px;
            color: #666;
        }
        
        #hot:checked~.main .hot-news,
        #home:checked~.main .home-news,
        #international:checked~.main .international-news {
            display: block;
        }
        
        #hot:checked~.title .hot,
        #home:checked~.title .home,
        #international:checked~.title .international {
            background-color: #f7f7f7;
        }
        
        .wrapper input {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input type="radio" name="tab" id="hot" checked>
        <input type="radio" name="tab" id="home">
        <input type="radio" name="tab" id="international">
        <nav class="title">
            <ul>
                <li class="hot"><label for="hot">热门新闻</label></li>
                <li class="home"><label for="home">国内新闻</label></li>
                <li class="international"><label for="international">国际新闻</label></li>
            </ul>
        </nav>
        <div class="main">
            <ul class="hot-news">
                <li>
                    <a href="javascript:;">如果方向一致，两个命中注定要结伴同行的过客是不会擦肩而过的。</a>
                </li>
                <li>
                    <a href="javascript:;">爱旅行就去旅行，大不了有多少钱就走多远的路</a>
                </li>
                <li>
                    <a href="javascript:;">每个硬着骨头敢拼敢搏的人都有个柔软的理由。</a>
                </li>
                <li><a href="javascript:;">真的喜欢，就别抗拒遗憾。</a></li>
            </ul>
            <ul class="home-news">
                <li>
                    <a href="javascript:;">我可是你手中那一朵鲜花</a>
                </li>
                <li>
                    <a href="javascript:;">我说今晚月光那么美，你说是的</a>
                </li>
                <li>
                    <a href="javascript:;">送你一朵山茶花</a>
                </li>
                <li><a href="javascript:;">请在春天回来好吗</a></li>
            </ul>
            <ul class="international-news">
                <li>
                    <a href="javascript:;">我的山坡开满了花</a>
                </li>
                <li>
                    <a href="javascript:;">我会亲手为你摘下</a>
                </li>
                <li>
                    <a href="javascript:;">请你带回你风中的家</a>
                </li>
                <li><a href="javascript:;">你好妹妹</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

效果图：

我本浪人--游吟世间

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3选项卡

选项卡demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> .wrapper { position: rel...
复制链接

扫一扫

专栏目录