能用HTML／CSS解決的問題，就不要用JS

時間 2019-12-07

標籤 html css 解決問題不要欄目 HTML 简体版

原文原文鏈接

緣由：簡單。css

簡單就意味着更快的開發速度，更小的維護成本，同時每每具備更好的體驗。html

一，導航高亮app

效果圖：佈局

代碼：flex

<!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;
}

二，鼠標懸浮時顯示spa

實現方法：把隱藏的對象如子菜單，信息框做爲hover目標的子元素或者相鄰元素code

方法一，使用相鄰元素htm

<!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的樣式blog

<!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>

四，多列等高

能夠使用flex佈局和table佈局，能夠作到多列等高。

可是若是使用grid或者浮動佈局等，若是每列內容不一，極可能致使每列高度不一致，解決方案：

1，給每列來一個很大的padding，在來一個很大的負margin值矯正回去。

.wrapper li {
            padding: 10px 20px;
            margin: 10px;
            border:1px solid red;
            padding-bottom: 900px;
            margin-bottom: -900px;
        }