CSS设计美丽之百合花（小作品）

来源：互联网发布：淘宝专利侵权编辑：程序博客网时间：2024/04/30 16:38

这次的小作品选用了百合花图片作为文档top的背景图。

本作品完整代码：点击查看本作品完整代码

作品效果：

代码框架结构：

<!DOCTYPE html><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><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><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样式部分：

/* basic elements */body, html, div {  padding: 0;  margin: 0;}body {  font: 8pt/16pt 仿宋, geneva, arial, sans serif;  color: #000;  background: url("../images/1bg.gif") repeat-y;}ul li {  list-style: none;}a:visited {  color: #672;}a:hover {  color: #ABBC47;}a {  color: #230;}/* page-wrapper div*/.page-wrapper {  width: 760px;  padding: 0;  margin: 0;  border-top: 1px solid #230;  border-right: 1px solid #230;  background: transparent url("../images/topbg.gif") repeat-x;}/* intro div *//*----------------------------*/.intro {  width: 760px;  margin-top: 20px;  background: transparent url("../images/lsh.gif") no-repeat 687px 231px;}/* header div */header {  position: absolute;  left: 0;  width: 355px;  height: 201px;}header h1 {  float: left;  width: 355px;  height: 201px;  margin-top: 0;  text-indent: 100%;  overflow: hidden;  white-space: nowrap;   background: transparent url("../images/centerpiece.jpg") no-repeat;}header h2 {  display: none;}/* summary div */.summary {  width: 332px;  height: 200px;  border-right: 1px solid #ABBC47;  border-top: 1px solid #ABBC47;  margin: 0 0 0 355px;  background: #ABBC47 url("../images/quicksumbg.gif");}/* footer of summary*/footer {  position: absolute;  left: 0;  top: 230px;  width: 340px;  margin: 0 30px 0 400px;  font-size: 10px;  text-align: right;}.summary  p:last-child a, footer a {  color: #fff;}.summary p:first-child {  padding: 100px 30px 2px 30px;  font: bold 11px/14px 仿宋;  color: #fff;  }.summary p:last-child {  position: absolute;  left: 0;  top: 230px;  margin: 0 30px;  font-size: 10px;  color: #fff;}/* preamble div */.preamble {  width: 344px;  padding: 40px 30px 30px 30px;  border-right: 1px solid #ddd;  margin: 30px 0 0 355px;  text-align: left;  background: transparent url("../images/endsection.gif") no-repeat bottom;}.preamble p:nth-child(2) {  width: 270px;}.preamble h3 {  width: 270px;  height: 36px;  border-bottom: 1px solid #ddd;  text-indent: 100%;  overflow: hidden;  white-space: nowrap;  background: transparent url("../images/h3preamble.gif") no-repeat bottom;}/* supporting css */.supporting {  width: 344px;  padding: 50px 30px 30px 30px;  border-right: 1px solid #ddd;  margin: 0 0 0 355px;  text-align: left;}.explanation, .benefits, .participation, .requirements {  padding: 0 0 20px 0;  margin-bottom: 20px;  text-align: left;  background: transparent url("../images/endsection.gif") no-repeat bottom;}.supporting h3 {  width: 343px;  height: 36px;  border-bottom: 1px solid #ddd;  text-indent: 100%;  overflow: hidden;  white-space: nowrap;}.explanation h3 {  background: transparent url("../images/h3explanation.gif") no-repeat left bottom;} .benefits h3 {  background: transparent url("../images/h3benefits.gif") no-repeat left bottom;   }  .participation h3 {  background: transparent url("../images/h3participation.gif") no-repeat left bottom;   }   .requirements h3 {  background: transparent url("../images/h3requirements.gif") no-repeat left bottom;   }/* sidebar css */.sidebar {  position: absolute;  left: 0;  top: 252px;  width: 195px;  padding: 50px 30px 0 130px;  border-right: 1px solid #ddd;  background: transparent url("../images/lsh.gif") no-repeat;}.sidebar .wrapper {  padding: 0;  overflow: hidden;}.sidebar h3 {  width: 200px;  height: 36px;  border-bottom: 1px solid #ddd;    margin: 0;  text-indent: 100%;  overflow: hidden;  white-space: nowrap;}h3.select {  background: transparent url("../images/h3select.gif") no-repeat left bottom;  }h3.archives {  background: transparent url("../images/h3archives.gif") no-repeat left bottom;  }h3.resources {  background: transparent url("../images/h3resources.gif") no-repeat left bottom;  }.design-selection ul {  padding: 10px;  margin: 10px 0 0 0;}.design-selection ul li {  display: block;  min-height: 40px;  padding: 5px 0 5px 25px;  margin: 5px 0;  border-bottom: 1px solid #eee;  background: transparent url("../images/bullet.gif") no-repeat 0 7px;}.design-selection li a {  display: block;  font-weight: bold;  white-space: nowrap;}.design-selection li a.designer-name {  display: inline;  text-decoration: none;  font-weight: normal;}.design-archives ul,.zen-resources ul {  padding: 10px;  margin: 0 0 0 10px;}.design-archives ul li,.zen-resources ul li {  display: block;  padding: 0 0 0 25px;  margin: 0;  background: transparent url("../images/bullet2.gif") no-repeat 2px 7px;}

隐藏标题，并用背景图片代替标题：

width: 150px;height: 10px;text-indexnt: 100%;overflow: hidden;white-space: nowrap;background: transparent url("") no-repeat left bottom;

在实际开发中，为了使HTML文档能适应更多的CSS样式表，建议将图片等放置于CSS样式表中。HTML文档中只保留纯文本

阅读全文

0 0