js中简易选项卡的实现（3种方法实现样式的封装）

ruirui_1996

于 2017-09-29 10:43:21 发布

阅读量4.6k

点赞数

分类专栏：前端-JS基础

本文链接：https://blog.csdn.net/ruirui_1996/article/details/78131614

版权

清除浮动的三种方式

1.overflow: hidden; 清除子元素的浮动对父元素的影响
2.clear: both; 清除哥哥元素的浮动对弟弟元素的影响
3.:after{ display: block; content: “”; clear: both; }

基本样式代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            -webkit-user-select: none;
        }

        ul, li {
            list-style: none;
        }

        .box {
            width: 500px;
            margin: 10px auto;
        }

        .box ul {
            /*overflow: hidden; !*清除子元素的浮动对父元素的影响*!*/
            position: relative;
            top: 1px;
        }

        .box ul:after {
            display: block;
            content: "";
            clear: both;
        }

        .box ul li {
            float: left;
            margin-right: 15px;
            width: 100px;
            height: 30px;
            border: 1px solid #337ab7;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .box ul li.select {
            background: #5bc0de;
            border-bottom-color: #5bc0de;
        }

        .box div {
            display: none;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background:

最低0.47元/天解锁文章

ruirui_1996

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js中简易选项卡的实现（3种方法实现样式的封装）

清除浮动的三种方式1.overflow: hidden; 清除子元素的浮动对父元素的影响 2.clear: both; 清除哥哥元素的浮动对弟弟元素的影响 3.:after{ display: block; content: “”; clear: both; }基本样式代码<!doctype html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫

专栏目录