原因：简单。

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

一，导航高亮

效果图：

代码：

<!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. 关于Linux MongoDB的安装

    前一篇博文讲解了如何安装与配置MongoDB的windows版,本篇博文接着上一篇讲解如何在Linux系统中安装与配置MongoDB,为了演示,我问同事要了它的云服务器用于演示,当然我自己也有,但是已 ...

  2. libRTMP 整体说明

    函数结构 (libRTMP)的整体的函数调用结构图如下图所示: 原图地址:http://img.my.csdn.net/uploads/201602/10/1455087168_7199.png 基本 ...

  3. 第二十五节：Java语言基础-面向对象基础

    面向对象 面向过程的代表主要是C语言,面向对象是相对面向过程而言,Java是面向对象的编程语言,面向过程是通过函数体现,面向过程主要是功能行为. 而对于面向对象而言,将功能封装到对象,所以面向对象是基 ...

  4. 关于如何使`(a === 1 && a === 2 && a === 3)`返回`true`问题的思考

    看见这个面试题目,第一反应就是在变量a取值时进行了一些改变,那就要用getter,关于存取器的介绍可以看这里 var temp = 1; Object.defineProperty(window, ' ...

  5. Java程序员如何运用所掌握的技术构建一个完整的业务架构

    1.通用架构概述 创业之初,我们往往会为了快速迭代出产品,而选择最简单的技术架构,比如LAMP架构,SSH三层架构.这些架构可以适应初期业务的快速发展,但是,随着业务变得越来越复杂,我们会发现这些架构 ...

  6. linux中变量的一些操作方法

    常见的一般有如下操作,可以对字符串进行简单操作: echo ${#var}打印变量var长度 echo "$var:3:8" 打印变量var第4个字符开始的8个字符echo ${v ...

  7. app测试自动化之定位元素

    app中元素定位是通过uiautomatorviewer来查看,这个是android sdk中自带的一个工具,可以在sdk家目录的tools下找到: 双击打开之后,点击第二个按钮即可把手机当前界面的元 ...

  8. MLlib之LR算法源码学习

    /** * :: DeveloperApi :: * GeneralizedLinearModel (GLM) represents a model trained using * Generaliz ...

  9. EL表达式报错：  According to TLD or attribute directive in tag file, attribute value does not accept any expressions

    EL表达式报错: According to TLD or attribute directive in tag file, attribute value does not accept any ex ...

  10. jsp页面简单的验证码实现

    前段时间赶着结束毕业设计任务,现在完成了.回来补一下设计毕业设计的过程中遇到的问题和解决方案. 为了使小系统更有模有样,这里尝试在登录页面实现验证码功能.现描述一下我的解决方案. 首先看一下实现后的界 ...