图片来源

HTML

fieldset

<fieldset>是一个划分内容的方便标签, 可以做出卡片的效果. 快速开发时可以代替<div>

<fieldset>
    <legend> some caption </legend>
    content ...
</fieldset>

special characters

用Unicode字符和字体设置搭配, 可以代替image来显示三角. 好处是省空间, 还可以跟着字体一起放大缩小. 缺点是有时格式不好控制.

  ► ►► ►►►
  ▶ ▷ ► ◄ ◁ ◀
  ◢ ◣ ◤ ◥
  ◸ ◹ ◺ ◿
  ✢ ✣ ✤ ✥ ✦ ✧
  ✫ ✮ ✩ ✪ ✫ ✬ ✭ ✮ ✯ ✰
  ➔ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟ ➠ 
  ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪
  ➫ ➬ ➭ ➮ ➯ ➱ ➲ ➳ ➴ ➵
  ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾
  ❢ ❣ ❤ ❥ ❦ ❧
  ✌ ✍ ✎ ✏ ✐
  ✁ ✂ ✃ ✄
  ✓ ✔ ✕ ✖ ✗ ✘
  ✉ ✆ ✈
  ✻ ✼ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❄
  ❅ ❆ ❇ ❈ ❉ ❊ ❋

Wikipedia有更多字符可以查看使用.

CSS

ID and CLASS ————-

    .class-name{} e.g. <a class="class-name">
    #id-name{} e.g. <div id="id-name">
    p.class-name{} e.g. <p class="class-name"> 这么写能避免命名冲突
    p#id-name{}

make a TOC

    div.toc{
        border: 1px outset #ffb;
        background: #3f3f3f;
        float:right;
        font-size:85%;
        margin:0 0 2em 1em;
        padding:0.5em 1em;
        position:relative;
        z-index:1; <---------- go above h1/h2 -->
    }

Centering things

centering images with CSS

#for_some_div img {display: block; margin-left:auto; margin-right:auto;}

center a table or div

table { margin: auto; } 

make the entire div clickable

Add border and shadow to div

#div_id elem
{
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
}