能用 HTML/CSS 解决的问题就不要用 JS

导航高亮

可以用 class 来标识菜单是否选中,选中的 class 增加特殊样式,:hover 选择器可以用来表示鼠标悬浮的样式

鼠标悬浮时显示

使用 :hover 选择器实现

自定义 radio/checkbox 的样式

input 始终隐藏,通过设置 span.checkbox 的样式来实现自定义样式,通过 :checked 伪类更改选中状态的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
input[type=checkbox]{
display: none;
}
/* 未选中的 checkbox 的样式 */
.checkbox{
/* 具体实现 */
}
input[type=checkbox]:checked + .checkbox{
/* 具体实现 */
}
</style>
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>

多列等高

htmlyouhua1

  1. 借助 margin/padding 实现
    通过设置很大的 padding 值,使得高度变的很大,不可取。

  2. 借助 table 自适应特性
    代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    .columns {
    display: table;
    }
    .columns > div {
    padding: 16px;
    margin-left: 16px;
    display: table-cell;
    background: #ccc;
    border: 1px solid #000000;
    vertical-align: top;
    }
    </style>
    <div class="columns">
    <div>column 1<br>column 1<br>column 1<br>column 1<br>column 1<br>column 1<br></div>
    <div>column 2<br>column 2<br></div>
    <div>column 3</div>
    <div>column 4</div>
    </div>

    效果:
    htmlyouhua2

  3. 使用 flex 布局实现
    代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    .columns {
    display: flex;
    align-items: stretch;
    }
    .columns > div {
    padding: 16px;
    margin-left: 16px;
    background: #ccc;
    border: 1px solid #000000;
    vertical-align: top;
    }
    </style>
    <div class="columns">
    <div>column 1<br>column 1<br>column 1<br>column 1<br>column 1<br>column 1<br></div>
    <div>column 2<br>column 2<br></div>
    <div>column 3</div>
    <div>column 4</div>
    </div>

    效果:
    htmlyouhua3

根据个数显示不同样式

例如有 1-3 个 item 在同一行,但 item 但个数不一定,如果只有 1 个,则占宽 100%,有 2 个时占宽 50%,3 个时每个占宽 33%。可以使用 css3 解决(~ 表示兄弟选择器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
li{
width: 100%;
}

li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li{
width: 50%;
}

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li{
width: 33%;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

hover 时候显示提示信息

使用 title 属性觉得效果太差,可以使用 :hover::before 来做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
span[data-title]{
position: relative;
}
span[data-title]:hover::before{
position: absolute;
content: attr(data-title);
top: -200%;
left: 50%;
transform: translateX(-50%);
height: 32px;
line-height: 32px;
white-space: nowrap;
background: #26a2ff;
color: #fff;
padding: 0 8px;
border-radius: 4px;
}
span[data-title]:hover::after{
position: absolute;
content: '';
top: calc(-200% + 32px);
left: 50%;
transform: translateX(-50%);
border-top: 10px solid #26a2ff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
</style>
<p>hello,<span data-title="我是提示信息!">请把鼠标放到我身上!</span></p>

效果:
htmlyouhua4

优化 HTML 标签

选用合适的标签

  1. 文字
    如果它是一段文字,就用 p 标签,如果是一个标题,就用 h1~h6 标签。这样可以让标签多样化,写样式时候用标签选择器,就不用嵌套很多 class 了,并且有利于 SEO。

  2. 表单
    如果是一个表单,尽量使用 form。

  3. HTML5 input
    浏览器会根据不同的 input 做出相应的优化,例如在 iPhone 上,使用不同的 input 会弹出不同的键盘。

使用 HTML5 语义化标签

传统的 HTML 结构

1
2
3
4
5
6
7
8
9
<ul>
<li></li>
</ul>
<div class="header"></div>
<div class="main">
<div class="section"></div>
<div class="section"></div>
</div>
<div class="footer"></div>

使用 HTML5 语义化标签

1
2
3
4
5
6
7
<nav></nav>
<header></header>
<main>
<section></section>
<section></section>
</main>
<footer></footer>

这样有利于 SEO,屏幕阅读器也会先获取大纲。
上面的标签和 div 的区别:

  • div:作为一个普通的容器使用;
  • section:作为一个普通的章节;
  • article:适用于独立性较强的内容,如网页文章的主体;
  • nav:适用于导航内容;
  • aside:可用作和页面主题相关的容器,像侧边栏、评论等辅助的元素。

css 画三角形

  1. 设置一个有 border 的容器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     <style>
    .triangle {
    border-top: 50px solid #000;
    border-right: 50px solid #333;
    border-bottom: 50px solid #666;
    border-left: 50px solid #999;
    width: 100px;
    height: 100px;
    }
    </style>
    <div class="triangle"></div>

    htmlyouhua5

  2. 去掉宽度和高度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    .triangle {
    border-top: 50px solid #000;
    border-right: 50px solid #333;
    border-bottom: 50px solid #666;
    border-left: 50px solid #999;
    width: 0;
    height: 0;
    }
    </style>
    <div class="triangle"></div>

    htmlyouhua6

  3. 再把 border-top 去掉

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    .triangle {
    border-right: 50px solid #333;
    border-bottom: 50px solid #666;
    border-left: 50px solid #999;
    width: 0;
    height: 0;
    }
    </style>
    <div class="triangle"></div>

    htmlyouhua7

  4. 把左右两边的 border 颜色设置成透明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    .triangle {
    border-right: 50px solid transparent;
    border-bottom: 50px solid #666;
    border-left: 50px solid transparent;
    width: 0;
    height: 0;
    }
    </style>
    <div class="triangle"></div>

    htmlyouhua8

  5. 添加阴影
    可以使用 filter 添加阴影

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    .triangle {
    border-right: 50px solid transparent;
    border-bottom: 50px solid #666;
    border-left: 50px solid transparent;
    width: 0;
    height: 0;
    filter: drop-shadow(0 0 2px #999);
    }
    </style>
    <div class="triangle"></div>

    htmlyouhua9

  6. 更多的 css 形状见 css-tricks

尽可能的使用伪元素

  1. 使用伪元素画分割线
    htmlyouhua10

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     <style>
    .line {
    position: relative;
    width: 500px;
    text-align: center;
    }

    .line:before,
    .line:after {
    content: '';
    position: absolute;
    top: 12px;
    height: 1px;
    background: #ccc;
    width: 200px;
    }

    .line:before {
    left: 0;
    }

    .line:after {
    right: 0;
    }
    </style>
    <div class="line">line</div>
  2. 清除浮动

    1
    2
    3
    4
    5
    6
    7
    <style>
    .clearfix:after{
    content: '';
    display: table;
    clear: both;
    }
    </style>