有渔前端团队

组件

项目中各种通用的 UI 组件的示例

条目

主要用于结构化的信息列表。

目录

示例

该组件的结构比较万能，只要是跟信息组织有关的差不多都可以用到此结构。

2014 年 5 个最流行的前端框架

Item basic

现如今快要被各种各样的 CSS 前端框架给淹没了，真做的不错的其实也就那么几个。

本文将对比五个我认为是现在最好的框架。这些框架每一个都有自己的优缺点和适用的应用类型， 你需要根据自己的需要来选择不同的框架。例如，如果你的项目简单，就不需要使用一个复杂的框架。又或者，很多框架都是模块化的，你可以只是用你需要的模块，或者把不同框架的模块混到一起使用。

我将要介绍的这些框架的顺序与它们在 GitHub 的流行程度有关。自然，就是从最流行的 Bootstrap 说...阅读全文

寸志发表于 
<!-- HTML -->

<div class="Item">
  <div class="Item-content">
    <!-- 标题 -->
    <div class="Item-header">
      <h3 class="Item-title">...</h3>
    </div>
    <!-- 正文 -->
    <div class="Item-body">...</div>
    <!-- 额外信息 -->
    <div class="Item-footer">...</div>
  </div>
</div>

带头像的条目

欧雷的头像欧雷

开始了 American English In Mine L1 跟学辅导 的学习

本课程是 American English In Mind L1 的辅助课程，同学们在学习AEIM L1的过程中有任何问题，都可以在本课程内进行交流。

 通过 东北银
<!-- HTML -->

<div class="Item">
  <!-- 用户的头像及信息 -->
  <div class="Item-user">
    <img src="ourai.jpg" srcset="ourai@2x.jpg 2x" alt="欧雷的头像" class="Item-avatar">
    <span class="Item-name">欧雷</span>
  </div>
  <!-- 条目内容 -->
  <div class="Item-content">...</div>
</div>

信息列表

  • 林更新的微博头像

    林更新

    演员林更新，作品《步步惊心》等
  • 靜電場朔的微博头像

    靜電場朔

    静电场朔，CubeCat块猫动漫形象作者
  • 堂邦嘉真的微博头像

    堂邦嘉真

    微信号：eyestore2015 清朝平成年大不列颠人士，字剑飞，号四眼居士，改革开放后自称为多媒体全手动旅行者
<!-- HTML -->

<ul>
  <li class="Item">
    <div class="Item-user"><img src="http://tp2.sinaimg.cn/1730726637/180/5721225567/1" alt="林更新的微博头像" class="Item-avatar img-circle"></div>
    <div class="Item-content">
      <div class="Item-header">
        <h3 class="Item-title--large"><a href="http://weibo.com/u/1730726637" target="_blank">林更新</a></h3>
      </div>
      <div class="Item-body">演员林更新，作品《步步惊心》等</div>
    </div>
  </li>
  <li class="Item">...</li>
  <li class="Item">...</li>
</ul>

大小

头像

提供了三种尺寸的头像：

  • 大的为 70 * 70
  • 普通为 50 * 50
  • 小的为 30 * 30
大的头像
标准大小的头像
小的头像
<!-- HTML -->

<!-- 大的头像 -->
<div class="Item">
  <div class="Item-user"><img src="ourai.jpg" srcset="ourai@2x.jpg 2x" class="Item-avatar--large"></div>
</div>
<!-- 标准大小的头像 -->
<div class="Item">
  <div class="Item-user"><img src="ourai.jpg" srcset="ourai@2x.jpg 2x" class="Item-avatar"></div>
</div>
<!-- 小的头像 -->
<div class="Item">
  <div class="Item-user"><img src="ourai.jpg" srcset="ourai@2x.jpg 2x" class="Item-avatar--small"></div>
</div>

标题

提供了三种大小的标题：

  • 大的为正文的 1.2 倍
  • 普通的与正文相同
  • 小的为正文的 0.9 倍

条目标题

条目标题

条目标题

<!-- HTML -->

<!-- 大的标题 -->
<div class="Item">
  <div class="Item-content">
    <div class="Item-header">
      <h3 class="Item-title--large">条目标题</h3>
    </div>
  </div>
</div>
<!-- 标准大小的标题 -->
<div class="Item">
  <div class="Item-content">
    <div class="Item-header">
      <h3 class="Item-title">条目标题</h3>
    </div>
  </div>
</div>
<!-- 小的标题 -->
<div class="Item">
  <div class="Item-content">
    <div class="Item-header">
      <h3 class="Item-title--small">条目标题</h3>
    </div>
  </div>
</div>
设计师 开发者