原因：简单。

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

一，导航高亮

效果图：

代码：

<!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. 2.SlidingMenu(侧边栏效果)

    > 使用步骤库:别的程序可以用它的方法.图片. 下载的其中一个框架的例子是没有actionBar的,example_update 引入出错可能是俩个v4包冲突了,删掉工程里的一个,不要删了库里的 ...

  2. apache环境之困扰，Rewrite导致无法加载多个不同的.html文件

    又是一个项目,为访问多个纯静态html页面h5游戏页,能够做一些简单分享和跳转即可.原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoo ...

  3. 常用的评价指标：accuracy、precision、recall、F1-score、ROC-AUC、PR-AUC

  4. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  5. 必须熟练的基础linux命令

    推荐:命令大全 http://man.linuxde.net/ 重要的几个热键[Tab],[ctrl]-c, [ctrl]-d [Tab]按键---具有『命令补全』不『档案补齐』的功能 [Ctrl]- ...

  6. @pathvariable和@RequestParam的区别

    @PathVariable 获取的是请求路径url中的值: (http://xxx.xxx.com/get_10.html,侧重于请求的URL路径里面的{xx}变量 ) //获取url中某部分的值 @ ...

  7. (转)Linux内核参数之arp_ignore和arp_announce

    原文:https://blog.csdn.net/ccy19910925/article/details/79960599 一.arp_ignore和arp_announce介绍 arp_ignore ...

  8. c++为什么要面向对象？

    前言 c和c++的区别是什么?不可置否,最重要的就是c++的编程思想是面向对象,而c的编程思想是面向过程,这是它们的本质区别,如果你在使用c++编程时使用的还是面向过程的编程思想,那么还不如使用c,因 ...

  9. 213. Orchard学习 二 3、001.IOrchardHost 与Autofac

    继前篇,在Orchard Application_Start() -> HostInitialization() 里,调用 OrchardStarter.CreateHost创建IOrchard ...

  10. ConfigUtil读取配置文件工具类

    ConfigUtil package com.sso.util; import java.io.FileNotFoundException; import java.io.IOException; i ...