【重要】颜色设置属于功能性元素,可以附加在已有的样式之上,它作用于其设定的 DOM 结构位置。

  1. 初始外观

    文字 链接文字
    文字
    <a href="#nogo">链接文字</a>
    
  2. 设置后外观

    1. 红色

      基本强调文字请以醒目红色为基调,在不同场景下它的色彩有着不同含义,主要包括:强调、错误、失败、火爆、上升等。

      文字 链接文字
      <span class="e_red">文字</span>
      <a class="e_red" href="#nogo">链接文字</a>
      
    2. 绿色

      区别与红色的强调,绿色不要求格外突出,同时在不同场景下它的色彩有着不同含义,主要包括:强调、正确、成功、环保、下降等。

      文字 链接文字
      <span class="e_green">文字</span>
      <a class="e_green" href="#nogo">链接文字</a>
      
    3. 灰色

      灰色的文字一般用于对复杂实体对象解释说明,弱化次要的界面元素。

      文字 链接文字
      <span class="e_gray">文字</span>
      <a class="e_gray" href="#nogo">链接文字</a>
      
    4. 蓝色

      文字 链接文字
      <span class="e_blue">文字</span>
      <a class="e_blue" href="#nogo">链接文字</a>
      
    5. 橙色

      文字 链接文字
      <span class="e_orange">文字</span>
      <a class="e_orange" href="#nogo">链接文字</a>
      
  3. 应用外观

    1. 小范围作用

      因系统升级,2012年7月12日(星期四)晚22:00——7月13日(星期五)晨8:00,中国移动集团门户网站(www.10086.cn)将不能正常访问,可直接访问各省公司网站。感谢您一直以来对我们的支持,如给您带来不便,敬请谅解,谢谢。
      <div class="c_tip">
      	因系统升级,<span class="e_red">2012年7月12日(星期四)晚22:00——7月13日(星期五)晨8:00</span>,中国移动集团门户网站...
      </div>
      
    2. 中等范围作用

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_table">
      	<table>
      		<thead>
      			<tr>
      				<th>表头</th>
      			</tr>
      		</thead>
      		<tbody>
      			<tr class="e_red">
      				<td>单元格</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      
    3. 大面积作用

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_table e_red">
      	<table>
      		<thead>
      			<tr>
      				<th>表头</th>
      			</tr>
      		</thead>
      		<tbody>
      			<tr>
      				<td>单元格</td>
      			</tr>
      		</tbody>
      	</table>
      </div>