zoukankan      html  css  js  c++  java
  • 选项卡css另外一种做法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .content{
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    top: 50px;
                    left: 10px;
                    border: 1px solid #000;
                    display: none;
                }
                a{
                    text-decoration: none;
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #000;
                    margin-left: -1px;
                    padding: 0 10px;
                    float: left;
                    color: #000;
                    text-align: center;
                }
                .content:target{
                    display: block;
                }
                .content:target+a{
                    background: #000;
                    color: #fff;
                }
            </style>
        </head>
        <body>
            <div class="wrap">
                <div id="div1" class="content">网站首页内容</div>
                <a href="#div1">网站首页</a>
                <div id="div2" class="content">公司简介内容</div>
                <a href="#div2">公司简介</a>
                <div id="div3" class="content">联系我们内容</div>
                <a href="#div3">联系我们</a>
                <div id="div4" class="content">下载客户端内容</div>
                <a href="#div4">下载客户端</a>
            </div>
        </body>
    </html>
  • 相关阅读:
    Css进阶
    Css布局
    遇到的小问题
    MySQL 8.017连接Navicat中出现的问题
    ConcurrentHashMap图文源码解析
    HashMap图文源码解析
    接口和抽象类
    dependencies 和 devDependencies
    2020.7.7第二天
    2020.7.6第一天
  • 原文地址:https://www.cnblogs.com/gxywb/p/10319582.html
Copyright © 2011-2022 走看看