能用HTML/CSS解决的问题,就不要用JS
原因:简单。
简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验。
一,导航高亮
效果图:
代码:
<!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的更多相关文章
- Effective前端1:能使用html/css解决的问题就不要使用JS
div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...
- [转]能用HTML/CSS解决的问题就不要使用JS
原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...
- 能使用html/css解决的问题就不要使用JS
为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见 ...
- 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS?
优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...
- img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。
<a><img/></a> 这种结构有时候在界面预览的时候会出现一段多出来的高度.这个高度,一开始我很奇怪是什么原因产生的.鼠标移动到a标签上会有高度出现,一开始我 ...
- 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 ...
- <转载>CSS解决图片过大撑破DIV的方法
DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...
- 用CSS解决一个让人头疼的问题
需求:下面的文字内容分别都写在一个a标签里,现在需要获取到每一行最后一个a标签的竖线,并删除 我首先想到的是用CSS3新增选择器—— :nth-child()来解决,比如 :nth-child(3n ...
- 子元素浮动父容器高度不能自适应的CSS解决方法
百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...
- Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法
问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...
随机推荐
- 「ZJOI2018」胖(ST表+二分)
「ZJOI2018」胖(ST表+二分) 不开 \(O_2\) 又没卡过去是种怎么体验... 这可能是 \(ZJOI2018\) 最简单的一题了...我都能 \(A\)... 首先我们发现这个奇怪的图每 ...
- NLP常用术语解析
分词(Segment):中英文都存在分词的问题,不过相对来说,英文单词与单词之间本来就有空格进行分割,所以处理起来相对方便.但是中文书写是没有分隔符的,所以分词的问题就比较突出.分词常用的手段可以是基 ...
- 用redux-thunk异步获取数据
概述 最近学习redux,打算用redux-thunk给todo添加异步获取数据组件.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 在todo下方,我异步获取我的react博客的标题,点击 ...
- Spring boot 配置 log4j2.xml
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- Django--分页器(paginator)
1 Django的分页器(paginator)简介 在页面显示分页数据,需要用到Django分页器组件 from django.core.paginator import Paginator Pagi ...
- 博客维护停止,需要的伙伴们移步http://blog.csdn.net/panhouye
两个博客的维护着实费心,方便大家共同学习.督促.进步.感兴趣的伙伴们移步CSDN博客:http://blog.csdn.net/panhouye,博客目录如下: 1.Android中通过实现线程更新P ...
- 以ActiveMQ为例JAVA消息中间件学习【4】——消息中间件实际应用场景
前言 当前真正学习消息中间件,当前已经走到了,可以简单的使用,网上有很多那种复杂的高可用的架构,但是那些都是对于一些比较大型的项目来说的. 对于一些小型的项目可能用不到那么大的架构,于是我们需要从最简 ...
- 获取C#中方法的执行时间及其代码注入
在优化C#代码或对比某些API的效率时,通常需要测试某个方法的运行时间,可以通过DateTime来统计指定方法的执行时间,也可以使用命名空间System.Diagnostics中封装了高精度计时器Qu ...
- 面试:C++工厂模式实现
#include <iostream> enum CTYPE {PRODUCTA,PRODUCTB}; class Product{ public: ; virtual ~Product( ...
- win10 HTTP 错误 500.21 - Internal Server Error
错误描述: HTTP 错误 500.21 - Internal Server Error 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错 ...