WEB前端优化--HTML/CSS优化

web前端优化系列

  • 优化1:能用HTML/CSS解决的问题就不要用JS
    • 1.1 导航高亮
    • 1.2鼠标悬浮显示
    • 1.3 自定义radio/checkbox的样式
    • 1.4需要根据个数显示不同样式
    • 其他
    • css画三角形
  • 优化2:尽可能使用伪元素
    • 例:使用伪元素画分割线
    • 使用JS无法完全获取到伪元素?
    • 优化3: JS使用策略模式

此系列文章是以《高效前端-Web高效编程与优化实践》一书进行整理、记录和扩展的.这里只记录我目前没有用到或没了解到的知识点,大家有需要还是去看下这整本书,对前端进阶还是很有帮助的。

优化1:能用HTML/CSS解决的问题就不要用JS

以几个案例来介绍

1.1 导航高亮

这个案例不是普通鼠标放上去高亮,而是根据展示的页面不同,高亮响应的元素。

正常态时
nav li { opacity:0.5 }

而在选中状态时,导航不透明读为1。
为了实验此目的,首先通过body给不同页面添加不同的类,用于标识不同页面。
li也要有class标识
这样,如果当前页面是home,则body.home nav li.home这条规则生效,home导航高亮
如果用JS控制,则在脚本加载好之前,当前页面是不会高亮的,而当脚本加载好之后会突然高亮。


<body class = "home">body>

<body class = "buy">body>

<li class="home">homeli>
<li class="buy">buyli>

body.home nav li.home,
body.buy nav li.buy{
	opacity:1
}
hover的高亮
nav li:hover{
	opacity:1
}

1.2鼠标悬浮显示

引言:
鼠标悬浮的场景的实现,一般要把隐藏的对象如子菜单、信息框作为hover目标的子元素或者相邻元素,才方便CSS控制

代码1-2-1 菜单menu紧挨着user:

<li class="user">用户li>
<li class="menu">
  <ul>
    <li>账户设置

你可能感兴趣的:(优化,css,html,html5,前端优化)