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

这次的小作品选用了百合花图片作为文档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文档中只保留纯文本

CSS设计美丽之百合花（小作品）相关推荐

HTML5期末大作业：网购商城网站设计——服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载个人商城网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:网购商城网站设计--服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载个人商城网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计 ...
HTML5期末大作业：鲜花网页设计——美丽鲜花6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:鲜花网页设计--美丽鲜花6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
《CSS设计禅机（the Zen of CSS Design）》译者序（草稿）
"CSS禅意花园"网站(www.csszengarden.com)的超常创意就已经足够让我们唏嘘不已--一张亘古不变的HTML,仅靠着数百个不同的CSS样式表,就成就了数百个风格迥 ...
html之CSS设计（文本、边框、列表标签、display设置、内外边距）
文章目录一.文本属性二.边框属性三.列表标签四.display设置五.内外边距本篇文章主要介绍CSS设计中的文本属性.边框边距.列表标签.display的几种用法,还有一个最容易被忽视的点 ...
CSS设计指南(第3版)
<CSS设计指南(第3版)> 基本信息原书名:Stylin'with CSS:a designer's guide 作者: (英)Charles Wyke-Smith 译者: 李松峰丛 ...
初学stm32单片机可以做什么简单的小作品？
已从事单片机开发十几年,刚开始接触单片机时,感觉挺有意思. 可以用自己的思维写程序,控制硬件去实现一些智能化的操作. 刚点亮第一个LED,就开始幻想以后能做任何自己想要的产品,那感觉多爽! 但是你会发 ...
Web网页基于html、CSS设计——“爱家居”素材
Hello!大家好,今天给大家分享一下关于"爱家居"网页设计的整体思路和流程. 目录一.实现效果: 二.设计思路: 1.网页header设计: 2.网页content设计: 3. ...
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...
CSS禅意花园——CSS设计的绝美境界
CSS禅意花园,早有耳闻,一直没太注意,原来,这是个世界上都非常著名的网站,这个网站,主页只有一个,样式表却有成百上千个,选择不同的样式表,装载到这个页面,就会为我们呈现成百.上千种不同的视觉效果. ...

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

CSS设计美丽之百合花（小作品）相关推荐

最新文章

热门文章