原因：简单。

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

一，导航高亮

效果图：

代码：

<!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. 「ZJOI2018」胖（ST表+二分）

    「ZJOI2018」胖(ST表+二分) 不开 \(O_2\) 又没卡过去是种怎么体验... 这可能是 \(ZJOI2018\) 最简单的一题了...我都能 \(A\)... 首先我们发现这个奇怪的图每 ...

  2. NLP常用术语解析

    分词(Segment):中英文都存在分词的问题,不过相对来说,英文单词与单词之间本来就有空格进行分割,所以处理起来相对方便.但是中文书写是没有分隔符的,所以分词的问题就比较突出.分词常用的手段可以是基 ...

  3. 用redux-thunk异步获取数据

    概述 最近学习redux,打算用redux-thunk给todo添加异步获取数据组件.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 在todo下方,我异步获取我的react博客的标题,点击 ...

  4. Spring boot 配置 log4j2.xml

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  5. Django--分页器（paginator）

    1 Django的分页器(paginator)简介 在页面显示分页数据,需要用到Django分页器组件 from django.core.paginator import Paginator Pagi ...

  6. 博客维护停止，需要的伙伴们移步http://blog.csdn.net/panhouye

    两个博客的维护着实费心,方便大家共同学习.督促.进步.感兴趣的伙伴们移步CSDN博客:http://blog.csdn.net/panhouye,博客目录如下: 1.Android中通过实现线程更新P ...

  7. 以ActiveMQ为例JAVA消息中间件学习【4】——消息中间件实际应用场景

    前言 当前真正学习消息中间件,当前已经走到了,可以简单的使用,网上有很多那种复杂的高可用的架构,但是那些都是对于一些比较大型的项目来说的. 对于一些小型的项目可能用不到那么大的架构,于是我们需要从最简 ...

  8. 获取C#中方法的执行时间及其代码注入

    在优化C#代码或对比某些API的效率时,通常需要测试某个方法的运行时间,可以通过DateTime来统计指定方法的执行时间,也可以使用命名空间System.Diagnostics中封装了高精度计时器Qu ...

  9. 面试：C++工厂模式实现

    #include <iostream> enum CTYPE {PRODUCTA,PRODUCTB}; class Product{ public: ; virtual ~Product( ...

  10. win10 HTTP 错误 500.21 - Internal Server Error

    错误描述: HTTP 错误 500.21 - Internal Server Error 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错 ...