原因：简单。

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

一，导航高亮

效果图：

代码：

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

    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:;

    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>

四，多列等高

可以使用flex布局和table布局，可以做到多列等高。

但是如果使用grid或者浮动布局等，如果每列内容不一，很可能导致每列高度不一致，解决方案：

1，给每列来一个很大的padding，在来一个很大的负margin值矫正回去。

.wrapper li {

            padding: 10px 20px;

            margin: 10px;

            border:1px solid red;

            padding-bottom: 900px;

            margin-bottom: -900px;

        }

不足：由于设置了一个很大的padding值，导致高度变的很大，底部的border可能就看不到了（取决于具体的值是否足够大）

能用HTML／CSS解决的问题，就不要用JS的更多相关文章

  1. Effective前端1：能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  2. [转]能用HTML/CSS解决的问题就不要使用JS

    原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...

  3. 能使用html/css解决的问题就不要使用JS

    为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见 ...

  4. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS？

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

  5. img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。

    <a><img/></a> 这种结构有时候在界面预览的时候会出现一段多出来的高度.这个高度,一开始我很奇怪是什么原因产生的.鼠标移动到a标签上会有高度出现,一开始我 ...

  6. DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  7. <转载>CSS解决图片过大撑破DIV的方法

    DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...

  8. 用CSS解决一个让人头疼的问题

    需求:下面的文字内容分别都写在一个a标签里,现在需要获取到每一行最后一个a标签的竖线,并删除  我首先想到的是用CSS3新增选择器—— :nth-child()来解决,比如 :nth-child(3n ...

  9. 子元素浮动父容器高度不能自适应的CSS解决方法

    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...

  10. Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法

    问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...

随机推荐

  1. zoj4110 Strings in the Pocket（manacher）

    传送:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6012 题意:给定两个串$S$和$T$,可以翻转$S$串中的任意一个子段, ...

  2. Zabbix--1

    ZABBIX 与其他监控程序比较.

  3. 机器学习技法笔记：01 Linear Support Vector Machine

    Roadmap Course Introduction Large-Margin Separating Hyperplane Standard Large-Margin Problem Support ...

  4. Go 新起点

    因项目需求 又得开始啃Go了,虽然比计划早了点,撸起袖子开始干吧~

  5. Linux中matplotlib 中文显示问题解决

    1.下载下载中文 arial unicode ms 字体到 /home 目录 2. 拷贝字体到 usr/share/fonts 下: sudo cp ~/arial\ unicode\ ms.ttf ...

  6. LDA-线性判别分析（三）推广到 Multi-classes 情形

    本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...

  7. android_安装包_NoClassDefFoundError

    说说这个问题出现的地方吧: 能够成功的打包安装包,但是在安装包安装后,准备运行时出现了这个问题. 查看了这篇文章,讲得有理有据,并没有解决我的问题. 通过谷歌查找到这个stackoverflow,解决 ...

  8. Kafka实战－KafkaOffsetMonitor

    1.概述 前面给大家介绍了Kafka的背景以及一些应用场景,并附带上演示了Kafka的简单示例.然后,在开发的过程当中,我们会发现一些问题,那就是消息的监控情况.虽然,在启动Kafka的相关服务后,我 ...

  9. 获取VirtualBox COM对象失败，Unable to start the virtual device

    一.问题 1.将Genymotion和VirtualBox安装好之后,并且已经下载完了virtual device: 2.但是在运行虚拟机的时候却弹出了错误提示:虚拟机电脑控制台——严重错误. 如图: ...

  10. leetcode — longest-common-prefix

    /** * Source : https://oj.leetcode.com/problems/longest-common-prefix/ * * Created by lverpeng on 20 ...