CSS设计的美丽之居中、：before（）、：after（）的使⽤
（⼩作品）
关于HTML与CSS的⼩作品之⼆：
本作品完整代码：
作品效果如下所⽰：
准备⼯作：
1、开发软件Notepad++
2、Photoshop（切图）
3、浏览器
⾸先，拿到此图后，观察发现，这个作品的主要内容是在屏幕中居中显⽰的，先⽤画图软件画⼀下如何进⾏布局，在⼼中有⼀个⼤概的了解：
接着可以⽤代码写出⼤概的框架：
<body>
<div class="page-wrapper">
<section class="intro">
<header></header>
<div class="summary"></div>
<div class="preamble"></div>
</section>
<div class="supporting">
<div class="expanation"></div>
<div class="participaton"></div>
<div class="benefits"></div>
<div class="requirements"></div>
<footer></footer>
</div>
<div class="sidebar">
<div class="wrapper">
<div class="design-section"></div>
<div class="design-archives"></div>
<div class="design-resources"></div>
</div>
</div>
</div>
<body>
最后完善⼀下细节，如：
<!DOCTYPE html>
<html lang="zh-en">
<html lang="zh-en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS Zen Garden: CSS設計之美</title>
<link rel="stylesheet" media="screen" href="029/029.css">
<meta name="author" content="Changjiu Huang">
<meta name="description" content="展⽰CSS设计的美丽。">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="page-wrapper">
<section class="intro" id="zen-intro">
<header role="banner">
<h1>CSS Zen Garden</h1>html span 居中
<h2><abbr title="Cascading Style Sheets">CSS</abbr>設計之美</h2>  </header>
<div class="summary" id="zen-summary" role="article">
<p></p>
<p></p>
</div>
<div class="preamble" id="zen-preamble" role="article">
<h3>開悟之路</h3>
<p> </p>
<p></p>
<p></p>
</div>
</section>
<div class="main supporting" id="zen-supporting" role="main">
<div class="explanation" id="zen-explanation" role="article">
<h3>這是關於什麼？</h3>
<p></p>
<p></p>
</div>
<div class="participation" id="zen-participation" role="article">
<h3>參與</h3>
<p> </p>
<p></p>
<p></p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>益處</h3>
<p></p>
</div>
<div class="requirements" id="zen-requirements" role="article">
<h3>必要件</h3>
<p></p>
<p> </p>
<p></p>
<p></p>
<p></p>
</div>
<footer>
<footer>
<a href="javascript:void(0);" title="檢查網站的HTML是否合乎標準" class="zen-validate-html">HTML</a>
<a href="javascript:void(0);" title="檢查網站的CSS是否合乎標準" class="zen-validate-css">CSS</a>
<a href="javascript:void(0);" title="檢視本網站的創⽤CC版權聲明：姓名標⽰-⾮商業性-相同⽅式分享" class="zen-license">CC</a>  <a href="javascript:void(0);" title="閱讀關於本網站的親和⼒說明" class="zen-accessibility">A11y</a>
<a href="javascript:void(0);" title="在GitHub建⽴本網站的分⽀" class="zen-github">GH</a>
</footer>
</div>
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">選擇⼀項設計：</h3>
<nav role="navigation">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
<div class="design-archives" id="design-archives">
<h3 class="archives">資料彙整：</h3>
<nav role="navigation">
<ul>
<li class="next">
<a href="javascript:void(0);">
下⼀個設計 <span class="indicator">›</span>
</a>
</li>
<li class="viewall">
<a href="javascript:void(0);" title="瀏覽所有設計。">
瀏覽所有設計      </a>
</li>
</ul>
</nav>
</div>
<div class="zen-resources" id="zen-resources">
<h3 class="resources">資源：</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</aside>
</div>
</body>
</html>
CSS代码部分：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。