領會CSS，實際中的研究 - pssp－IT工程師數位筆記本

文章出處

雖懂卻不會，真是可怕，自認懂卻了無。

善用CSS屬性選擇器

在用于區別和唯一的情況下完全可以使用屬性選擇器，而沒有必要使用class或id

p[city="http://www.css.com/"]{
　　color:red;
}

<p city="http://www.css.com/">www.css.com</p>

first-line首行段落

利用:after和:before生成內容，可以減少你的標簽。

根據你要做的事來選擇合適的標簽而不是表現。

超越css-64頁

常用代碼庫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>M tools module</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  --1
  <!-- 左邊固定寬度，右邊自適應 -->
  <section id="test_1">
    <p>左邊：<span>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻從小嘻嘻嘻嘻嘻嘻下</span></p>
  </section>
  --2
  <!-- 左邊固定寬度，右邊自適應并且可以編輯內容 -->
  <section id="test_2">
    <p>左邊：<span  contenteditable="true">嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下</span></p>
  </section>
  --3
  <!-- 商品列表 -->
  <section id="test_3" class="clearfix">
    <a href="javascript:;">
      <span>圖片</span>
      <dl>
        <dt>商品標題商品標題商品標題商品標題商品標題商品標題商品標題</dt>
        <dd>這是一段內容內容內容內容內容</dd>
        <dd>這是一段內容內容內容內容內容</dd>
      </dl>
      <p>底部</p>
    </a>
  </section>
  --4
  <!-- 文字寬度平分 -->
  <section id="test_4">
    <p>文字啊</p>
  </section>
  --5
  <!-- 特效 -->
  <section id="test_5">
    <h3>顯示</h3>
    <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
  </section>
</body>
</html>

/* reset */
div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,p{
  margin:0;
  padding:0;
}

/* clearfix */
.clearfix{
  overflow:auto;
  zoom:1;
}

/* test_1 */
#test_1 span{
  display:inline-block;
  width:80%;
  vertical-align:top;
}
/* test_2 */
#test_2 span{
  display:inline-block;
  width:80%;
  vertical-align:top;
  min-height: 50px;
  outline: none;
  border: 1px solid #fff;
  padding:3px;
}
#test_2 span:hover{
  border: 1px solid #a0b3d6;
}

/* test_3 */
#test_3 span{
  float:left;
  height:120px;
  margin-right:12px;
}
#test_3 dl{
  min-height:100px;
  max-height:100px;
}
#test_3 dt{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#test_3 dd{
  padding:5px 0;
}


/* test_4 */
#test_4 p{
  width: 60px;
  text-align: justify;
}
#test_4 p:after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
}

/* 特效 */
#test_5:hover p{
  opacity:1;
  border:1px solid #ccc;
  padding:10px 0;
}
#test_5 p{
  opacity:0;
  transition:all 0.5s;
}