原因：简单。

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

一，导航高亮

效果图：

代码：

<!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. 「LOJ2000~2023」各省省选题选做

    「LOJ2000~2023」各省省选题选做 「SDOI2017」数字表格 莫比乌斯反演. 「SDOI2017」树点涂色 咕咕咕. 「SDOI2017」序列计数 多项式快速幂. 我们将超过 \(p\) ...

  2. 写一个shell 快速启动停止你的微服务吧

    在这个微服务盛行的时代,docker获得了巨大的成功,因为我们需要在一台服务器装上N个服务. 本文不是想讨论如何使用docker,而是,在一台服务器安装了多个服务后,怎样启动方便的启动服务呢? 一.在 ...

  3. Dispatch Queue 之内存中常驻的几个结构

    _dispatch_main_q 也就是主要主队列,一定运行在主线程里. // 6618342 Contact the team that owns the Instrument DTrace pro ...

  4. linux下的shell脚本的使用

    什么是shell? Shell是一个命令解释器,它在操作系统的最外层,负责直接与用户进行对话,把用户的输入解释给操作系统,并处理各种各样的操作系统的输出结果,输出到屏幕反馈给用户.这种对话方式可是交互 ...

  5. Spring Boot Runner启动器

    Runner启动器 如果你想在Spring Boot启动的时候运行一些特定的代码,你可以实现接口ApplicationRunner或者CommandLineRunner,这两个接口实现方式一样,它们都 ...

  6. Hybrid App 原理解析

    目录 一.现有混合方案 二.Hybrid技术原理 三.Native 通知 H5 (Native 调用 JS) 3.1 Android 调 H5 3.2 iOS 调 H5 四.H5 通知 Native( ...

  7. MariaDB 数据库

    1. MariaDB 介绍 MariaDB数据库管理系统是 MySQL 的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成 ...

  8. C#7.0--引用返回值和引用局部变量

    一.在C#7.0以上版本中,方法的返回值可以通过关键字ref指定为返回变量的引用(而不是值)给调用方,这称为引用返回值(Reference Return Value,或ref returns): 1. ...

  9. 实现text-detection-ctpn一路的坎坎坷坷

    小编在学习文字检测,因为作者提供的caffe实现没有训练代码(不过训练代码可以参考faster-rcnn的训练代码),所以我打算先使用tensorflow实现,主要是复现前辈的代码,主要是对文字检测模 ...

  10. 【学习笔记】JS设计模式总结

    前言:这段时间都在学习Vue的知识,虽然手边放着一本js高程,但确实好久没有好好复习了.温故而知新,因此特意把JS常见的设计模式总结,希望对大家有所帮助... 1. 工厂模式 释义:像工厂一样流水线般 ...