码迷,mamicode.com
首页 > Web开发 > 详细

能用HTML/CSS解决的问题,就不要用JS

时间:2018-05-09 20:49:52      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:title   check   opacity   link   utf-8   维护成本   nbsp   style   透明   

原因:简单。

简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验。

一,导航高亮

效果图:

技术分享图片

代码:

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

<head>
    <meta charset="UTF-8">
    <title>home</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body class="home">
    <ul>
        <li class="home"><a href="home.html">home</a></li>
        <li class="buy"><a href="buy.html">buy</a></li>
        <li class="sell"><a href="sell.html">sell</a></li>
    </ul>
</body>

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

<head>
    <meta charset="UTF-8">
    <title>buy</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body class="buy">
    <ul>
        <li class="home"><a href="home.html">home</a></li>
        <li class="buy"><a href="buy.html">buy</a></li>
        <li class="sell"><a href="sell.html">sell</a></li>
    </ul>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sell</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body class="sell">
    <ul>
        <li class="home"><a href="home.html">home</a></li>
        <li class="buy"><a href="buy.html">buy</a></li>
        <li class="sell"><a href="sell.html">sell</a></li>
    </ul>
</body>
</html>
ul {
    list-style: none;
}

ul li {
    float: left;
    margin-right: 30px;
}

a {
    color: #000;
    text-decoration: none;
}

/*正常态时,每个导航的默认样式*/
ul li a {
    opacity: 0.5;
}

/*hover高亮实现*/
ul li a:hover {
    opacity: 1;
    border-bottom: 1px solid red;
}

/*选中当前页面时,导航不透明度为1,另外加上下边框*/
body.home ul li.home a,
body.buy ul li.buy a,
body.sell ul li.sell a {
    opacity: 1;
    border-bottom: 1px solid red;
}

二,鼠标悬浮时显示

实现方法:把隐藏的对象如子菜单,信息框作为hover目标的子元素或者相邻元素

方法一,使用相邻元素

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

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
    /*menu正常状态下是隐藏的*/
    .menu {
        display: none;
    }

    /*导航hover时,显示menu*/
    .user:hover+.menu {
        display: list-item;
    }

    /*menu hover的时候,继续显示*/
    .menu:hover {
        display: list-item;
    }
    
    /*如果menu和user之间有空隙,可以使用伪元素填充这个空隙,是menu hover的时候,依旧显示*/
    .menu:before {
        content: ‘‘;
        position: absolute;
        left: 0;
        top: -10px;
        width: 100%;
        height: 10px;
    }
    </style>
</head>

<body>
    <li class="user">用户</li>
    <li class="menu">
        <ul>
            <li>账户设置</li>
            <li>登出</li>
        </ul>
    </li>
</body>

</html>

方法二,使用子元素

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container .menu {
        display: none;
    }
    
    .container:hover .menu {
        display: list-item;
    }
    </style>
</head>

<body>
    <ul class="container">
        <li class="user">用户</li>
        <li class="menu">
            <ul>
                <li>账户设置</li>
                <li>登出</li>
            </ul>
        </li>
    </ul>
</body>

</html>

 

三,自定义radio/checkbox的样式

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

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
    /*原生的选择框隐藏*/
    input[type=checkbox] {
        display: none;
    }
    
    /*未选中的checkbox的样式*/
    .checkbox {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #000;
    }
    
    /*利用:checked伪类实现自定义选中状态样式*/
    input[type=checkbox]:checked+.checkbox {
        border: 1px solid red;
        background-color: yellow;
    }
    </style>
</head>

<body>
    <label for="check">
        <input type="checkbox" id="check">
        <span class="checkbox"></span>
    </label>
</body>

</html>

 

能用HTML/CSS解决的问题,就不要用JS

标签:title   check   opacity   link   utf-8   维护成本   nbsp   style   透明   

原文地址:https://www.cnblogs.com/iceflorence/p/9015664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!