找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发CSS3 选项卡设计

2018-06-22 20:50:16 分类：教程 阅读(75) 评论(0)

前端开发和设计的发展前途|跨平台前端开发软件|企业前端开发软件

1.上圆角精简版
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>w3c</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        #menubar ul {
            height: 29px;
            background-color: deepskyblue;
            list-style: none;
            border-top: solid 3px deepskyblue;
            padding-left: 1px;
            overflow: hidden;
        }
        #menubar ul li {
            float: left;
            margin: 0 2px;
            padding: 3px 20px;
            color: white;
            font-family: “微软雅黑”;
            font-size: 15px;
            font-weight: bold;
            line-height: 20px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        #menubar ul li:hover {
            cursor: pointer;
            background-color: white;
            color: deepskyblue;
        }
        #menubar ul li.current {
            cursor: default;
            background-color: white;
            color: deepskyblue;
            height: 21px;
            font-size: 16px;
            padding-top: 5px;
        }
    </style>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            $(“#content”).html($(“#menubar ul li.current”).text()).css({
                “padding”: “30px”,
                “font-size”: “120px”
            });
            $(“#menubar ul li”).click(function () {
                var current = $(this).siblings(“.current”);
                if ($(this) == current.eq(0)) {
                    return;
                }
                $(this).addClass(“current”);
                current.removeClass(“current”);
                $(“#content”).html($(this).text());
            });
        });
    </script>
</head>
<body>
    <div id=”menubar”>
        <ul>
            <li class=”current”>W3C</li>
            <li>html</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div id=”content”></div>
</body>
</html>

2.斜边叠加版
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>w3c</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        #menubar ul {
            height: 29px;
            background-color: deepskyblue;
            list-style: none;
            border-top: solid 3px deepskyblue;
            padding-left: 6px;
            overflow: hidden;
        }
        #menubar ul li {
            float: left;
            margin: 0 6px;
            padding: 3px 18px;
            color: white;
            font-family: “微软雅黑”;
            font-size: 15px;
            font-weight: bold;
            line-height: 20px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        #menubar ul li:hover {
            cursor: pointer;
            background-color: white;
            color: deepskyblue;
            position: relative;
        }
        #menubar ul li.current {
            cursor: default;
            background-color: white;
            color: deepskyblue;
            height: 21px;
            font-size: 16px;
            padding-top: 5px;
            position: relative;
        }
        #menubar ul li:hover:before,
        #menubar ul li:hover:after {
            content: “”;
            width: 12px;
            height: 22px;
            background-color: white;
            display: block;
            position: absolute;
            bottom: 0;
            z-index: 1;
        }
        #menubar ul li.current:before,
        #menubar ul li.current:after {
            content: “”;
            width: 12px;
            height: 27px;
            background-color: white;
            display: block;
            position: absolute;
            bottom: 0;
            z-index: 2;
        }
        #menubar ul li:hover:before,
        #menubar ul li.current:before {
            left: -8px;
            transform: skew(-24deg);
            border-left: solid 3px deepskyblue;
        }
        #menubar ul li:hover:after,
        #menubar ul li.current:after {
            right: -8px;
            transform: skew(24deg);
            border-right: solid 3px deepskyblue;
        }
    </style>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            $(“#content”).html($(“#menubar ul li.current”).text()).css({
                “padding”: “30px”,
                “font-size”: “120px”
            });
            $(“#menubar ul li”).click(function () {
                var current = $(this).siblings(“.current”);
                if ($(this) == current.eq(0)) {
                    return;
                }
                $(this).addClass(“current”);
                current.removeClass(“current”);
                $(“#content”).html($(this).text());
            });
        });
    </script>
</head>
<body>
    <div id=”menubar”>
        <ul>
            <li class=”current”>W3C</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div id=”content”></div>
</body>
</html>
前端设计和前端开发|.net前端开发设计|软件开发与前端开发区别
» 本文来自：前端开发者 » 《前端开发CSS3 选项卡设计》
» 本文链接地址：https://www.rokub.com/4021.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论