css module

css模块化概念

by weiming le

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSS森林" />
<meta name="Keywords" content="CSS,样式表,标准,web,Blog,博客,XHTML,CSSForest,CSS森林" />
<title>模块化的核心思想──页面重构中的模块化设计（四） - CSS森林</title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>模块化的核心思想──页面重构中的模块化设计（四）</h1>
<p>一个消息类的Demo，“基类”包括了一个模块中最基本的内容，包括各种状态。</p>
<div class="demo">
	<h2>基类</h2>
	<!-- S 操作提示 -->
	<div class="mode_hint">
		<p>提示条基类</p>
		<div class="op"><a href="##">Close</a></div>
	</div>
	<!-- E 操作提示 -->
	<h2>扩展类</h2>
	<!-- S 操作提示 -->
	<div class="mode_hint op_hint">
		<p>扩展了的提示条。</p>
		<div class="op"><a href="##">Close</a></div>
	</div>
	<!-- E 操作提示 -->
	<!-- S 操作提示 -->
	<div class="mode_hint hint_02">
		<p>扩展了的提示条。</p>
		<div class="op"><a href="##">Close</a></div>
	</div>
	<!-- E 操作提示 -->
	<!-- S 操作提示 -->
	<div class="mode_hint op_hint hint_01">
		<p>扩展了的提示条。</p>
		<div class="op"><a href="##">Close</a></div>
	</div>
	<!-- E 操作提示 -->
</div>
<p>返回《<a href="#">模块化的核心思想──页面重构中的模块化设计（四）</a>》</p>

<div class="copyright">
  <div class="vcard">
    <div class="logodiv"><img class="logo" src="http://en.gravatar.com/userimage/1302628/cdbb1702e02bbc3cb14ff0cae4c573d1.jpg" alt="LOGO" /></div>
    <div class="info">
      <p class="fn n"><strong class="given-name">Ghost</strong> <strong class="family-name">Zhang</strong></p>
      <p><strong>Email:</strong><a href="mailto:[email protected]" class="email">[email protected]</a></p>
      <p class="qq"><strong>QQ:</strong><a href="tencent://message/?uin=22168741&amp;Site=webrebuild.org&amp;Menu=yes"...

CSS

body{line-height:1;}
.copyright{position:absolute;right:20px;top:10px;height:200px;line-height:10px;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}

.none{display:none;}

.demo{width:400px;padding:10px;font-size:12px;}
.demo p{margin:0;padding:0;}
/* S 提示条 基类 */
.mode_hint{position:relative;margin:3px 0;padding:5px;border:1px solid #F0EFB2;background-color:#FFFEAB;color:#000000;_zoom:1;}
.mode_hint .op{position:absolute;right:8px;top:5px;}
.mode_hint .op a{color:#000000;}
/* E 提示条 基类 */
/* S 提示条 扩展类 */
.op_hint{border-color:#7B0006;background-color:#A00008;color:#FFFFFF;}
.op_hint .op a{color:#FFFFFF;}
/* E 提示条 扩展类 */
/* S 提示条 单独定义 */
.hint_01{position:absolute;bottom:0;left:0;width:99%;}
.hint_02{position:absolute;top:45%;left:50%;width:400px;margin-left:-200px;}
/* E 提示条 单独定义 */