[ 基础系列 ] - CSS 小测 10

初心Yearth
398 阅读5分钟

系列文章

说在前面

本篇是张鑫旭老师的 CSS 基础测试10 的阅后笔记。(首先感谢 XboxYan 同学终于坐下了，给了别的同学一个展示自我的机会，其中 liyongleihf2006 同学实现小图标定位的手段非常巧妙)

题目

先来看看题目：

img-00

需求：

  • HTML 选择合理
  • 视觉还原良好
  • 代码友好

分析

两栏自适应布局在之前提过很多次了，这里就不再赘述，主要从题目需求入手分析一下，首先是 HTML 选择合理，显然，这里出题人是希望我们能够选择语义合适的 HTML 标签。card 容器当然可以选择 div，但是这里使用 section 显然语义上更加合适。

<section class="movie-card"></section>

这个 card 分为 header 和 content，可能有的同学会想到使用 <header> 和 <article>，但是这两个标签放在这里是不合适的， <header> 和 <article> 的级别非常高，其中 <header> 一般用在整个页面的头部或者整个 content 块的头部，而 <article> 一般用于非常大段的文章。其实题目中已经有了提示，告诉我们这里的 <header> 应该使用标题标签，即 <h1>~<h6>。<h1> 建议作为整个页面的主标题，整个页面只有一个即可，如果页面中存在很多 <h1>，搜索引擎可能认为网页在恶意刷优先度，从而把网页的优先度降到很低。像题中这样的标题，通常使用的是 <h3>、<h4>，其中 <h4> 用得比较多一些，那么 HTML 结构又出来一部分：

<section class="movie-card">
    <h4 class="movie-title"></h4>
</section>

接下来是一个列表，常用的 HTML 列表有三种：

  • ul>li
  • ol>li
  • dl>dt+dd

由于这里是无序列表，所以排除 ol>li，而 dl>dt+dd 是定义标题对应描述的列表（最合适的比如 API 借口文档），所以也不适合。最终选择 ul>li，那么 HTML 结构如下：

<section class="movie-card">
    <h4 class="movie-title">
      <ul class="movie-list">
          <li class="movie-item"></li>
          <li class="movie-item"></li>
          <li class="movie-item"></li>
          <li class="movie-item"></li>
      </ul>
    </h4>
</section>

到这里有的同学可能认为已经结束了，不过还有一点细节值得一提：题目中明确指出列表内容是链接形式，所以这里应该有 <a> 标签，但是这个 <a> 放在 <li> 里还是外面呢？

事实上，随着移动端的兴起，为了让移动端体验更好，通常我们遇到链接的时候，都希望能够点击一块区域就可以跳转，而不是必须精确的点击到文字链接（胡萝卜粗般的手指：我觉得你在刁难我），所以这里应该用 <a> 将 <li> 给包裹起来，这样只要点击到列中的任意区域，都能实现跳转，那么最终 HTML 结构选择如下：

<section class="movie-card">
  <h4 class="movie-title">
    <ul class="movie-list">
      <a href class="movie-item-wrap">
        <li class="movie-item">
          <i class="icon"></i>
          <p class="moive-desc"></p>
        </li>
      </a>
      <a href class="movie-item-wrap">
        <li class="movie-item">
          <i class="icon"></i>
          <p class="moive-desc"></p>
        </li>
      </a>
      <a href class="movie-item-wrap">
        <li class="movie-item">
          <i class="icon"></i>
          <p class="moive-desc"></p>
        </li>
      </a>
      <a href class="movie-item-wrap">
        <li class="movie-item">
          <i class="icon"></i>
          <p class="moive-desc"></p>
        </li>
      </a>
    </ul>
  </h4>
</section>

接下来我们来还原视觉效果：

/* reset css */
body,
h4,
ul,
p {
    margin: 0;
    padding: 0;
}

/* set style */
body {
    padding: 30px;
}

.movie-card {
    width: 300px;
    border: 1px solid #e6dfc6;
    font-size: 12px;
}

.movie-title {
    line-height: 40px;
    font-size: inherit;
    color: #737063;
    padding: 0 1.2em;
    background: #f7f1d5;
    font-weight: 700;
}

.movie-list {
    list-style: none;
    background: #fff8dc;
}

.movie-item-wrap {
    text-decoration: none;
}

.movie-item{
    border-top:1px solid #ede7cd; 
    padding: 1em 1.2em;
    line-height: 1.4;
    color: #0077cc;
}

效果如下：

img-01

接下来就是小图标的问题了，这里使用 background-image:url() 即可。

.icon {
    float: left;
    width: 16px;
    height: 16px;
}

.moive-desc{
    overflow: hidden;
    margin-left: 2em;
}

[icon-type="chat"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAl0lEQVQ4T2NkoBAwUqifAWJA98UFDAwM8SQatpChVD8BYkDXxQMMjP8FGBiYC4gz5O8Ehv+MHxjK9B0QBoB0luk7EGUAyEKo+lEDBl8gMjAuYGD8R0yCMmD4z3gRNR0wMtiD4/Y/w0Gi0gIjUwNDqe4BpHTw34DhP1MCQ7neBqIMgCqCGTCB4e+/CQyVhg9I0QxSS3FuBAA5vk8RLCfKNgAAAABJRU5ErkJggg==);
}


[icon-type="exp"]{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABg0lEQVQ4T42TwW3bUAyGP0q+u50gHkGdIMkEcSeIE6t3Vm7PSc6B7Jdz5cLZwJmg6QRVJ2g3aAaQxIIWHAgRZPgdJDxB/Ej+Pykccb5oemZwU1N9DGHz0g2RI+L5qp+SBvtl2GYZ1ldHAzK9nsXE5X34VmaaqsDKaK6W4ftmDzlYQabps8DpPijTdAt2GhOdO9QhBwGqs3cxcQC5NAgN1Z1XBPIvD8WHQcBC51OEcb5aP/pPmaa3AjeuQYQ8GvwwuFuGwr/3z0LnmzarvYB45oeIaCpEAfhjNA8NzdYdGWxBdTaJiW+7IMF+G6LLUJwNiuie18LYrPrpGTqgKTCuqd53Z6FXgSstcOEZDPsrUBpSmlBGZpKH9bY3Bwude2/kYa3+9sGpqRNBEkMSt7IF8jlGnhtslYfi/NUF99sv3lvbgthbaSOapLb6acRo4i7kodhVv3t0AQtNe8EdwXZZDwK8gqH9qKjKEaNkAGAnIK8zPrxkNhFk1mthL9Qx29kK3mrwH3BYvxEz8UN0AAAAAElFTkSuQmCC);
}

效果如下：

img-02

接下来是题目中的最后一个要求：最多两行显示。

如果是最多单行显示，可以使用：

.style {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

的固定组合实现，而允许换行，但是行数固定的话，使用的方案如下：

.style {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

效果如下：

img-03

有兴趣的同学可以看看最终的 在线 demo

结束语

这里可以简单聊聊体验优化，其实这个小便签能优化的地方不多，从以下两点入手：

  • 键盘访问
  • 触摸效果

由于并不是在 form 中，所以其实并不需要加上 tabindex，所以在优化的时候只要同时添加 :hover 和 :focus 伪类即可。

avatar
文章
阅读
粉丝