简化版 208作品
html代码
<html>
<head>
<style type=”text/css” title=”currentStyle” media=”screen”>
@import “1.css”/*tpa=http://www.csszengarden.com/208/208.css*/;
</style>
</head>
<body>
<div id=”container”>
<div id=”pageHeader”>
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title=”Cascading Style Sheets”>CSS</acronym> Design</span></h2>
</div>
<div id=”explanation”>
<h3><span>So What is This About?</span></h3>
<p><span>There is clearly a need for <acronym title=”Cascading Style Sheets”>CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>
<p><span><acronym title=”Cascading Style Sheets”>CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>
</div>
<div id=”linkList”>
<div id=”larchives”>
<h3><span>Archives:</span></h3>
<ul>
<li><a href=”/?cssfile=208/208.css&page=1″ title=”View next set of designs. AccessKey: n” accesskey=”n”><span>n</span>ext designs »</a></li>
<li><a href=”http://www.mezzoblue.com/zengarden/alldesigns/” title=”View every submission to the Zen Garden. AccessKey: w” accesskey=”w”>Vie<span>w</span> All Designs</a></li>
</ul>
</div>
</div>
<div style=”clear:both;”>
<div id=”footer”>
<a href=”http://validator.w3.org/check/referer” title=”Check the validity of this site’s XHTML”>xhtml</a>
<a href=”http://jigsaw.w3.org/css-validator/check/referer” title=”Check the validity of this site’s CSS”>css</a>
<a href=”http://creativecommons.org/licenses/by-nc-sa/1.0/” title=”View details of the license of this site, courtesy of Creative Commons.”>cc</a>
<a href=”http://mezzoblue.com/zengarden/faq/#s508″ title=”Read about the accessibility of this site”>508</a>
<a href=”http://www.mezzoblue.com/zengarden/faq/#aaa” title=”Read about the accessibility of this site”>aaa</a>
</div>
</div>
</body>
</html>
CSS代码
/* css Zen Garden submission ? ‘Sakura’, by Tatsuya Uchida, http://www.re-bloom.com/ */
/* css released under Creative Commons License ? http://creativecommons.org/licenses/by-nc-sa/1.0/? */
/* All associated graphics copyright 2006, Tatsuya Uchida */
/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the
designer’s written permission. However, feel free to study the CSS and use
techniques you learn from it elsewhere. */
/* /////////////// basic elements /////////////// */
body {
margin:0;
padding:0;
font:75%/1.4 verdana,Helvetica,sans-serif;
background-image:url(”body_bg.gif”/*tpa=http://www.csszengarden.com/208/body_bg.gif*/);
text-align:center;
}
h1,h2,h3 span {
display:none;
}
h3 {
height:39px;
margin:0;
padding:0;
}
p {margin:0;padding:0;}
acronym {
border:none;
}
a {
color:#D9189F;
background-color:#ffffff;
text-decoration:underline;
}
a:hover, a:hover {
color:#FC7AD5;
background-color:#ffffff;
}
/* ////////////// layout ///////////////// */
#container {
width:772px;
margin:0 auto;
padding:0 ;
position:relative;
background:url(”bg.gif”/*tpa=http://www.csszengarden.com/208/bg.gif*/) repeat-x #dfdfdf;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
color:#454545;
text-align:left;
}
#pageHeader {
width:772px;
height:179px;
background:url(”top.jpg”/*tpa=http://www.csszengarden.com/208/top.jpg*/);
color:#454545;
text-align:center;
}
#explanation{
float:right;
width:546px;
background-repeat:repeat-y;
}
#footer {
width:772px;
text-align:center;
}
#linkList {
float:left;
width:207px;
padding:0 8px;
}
#quickSummary p span, #explanation p span, #benefits p span {
padding:0 15px 10px 77px;
display:block;
}
#linkList li {
list-style:none;
padding:6px 0 10px 0;
background:url(”line.gif”/*tpa=http://www.csszengarden.com/208/line.gif*/) bottom repeat-x;
}
#linkList li a {
padding-left:7px;
background:url(”link.gif”/*tpa=http://www.csszengarden.com/208/link.gif*/) left center no-repeat;
text-decoration:none;
}
#linkList li a:hover {
text-decoration:underline;
}
#footer a{
text-decoration:none;
color:#888888;
background-color:#dfdfdf;
border:1px solid #bdbdbd;
padding:3px 3px;
margin:28px 0px;
height:100%;
}
#footer a:hover{
background-color:#ebebeb;
color:#777777;
}
/* right image */
#quickSummary p, #explanation p , #benefits p {
background:url(”right_bg.gif”/*tpa=http://www.csszengarden.com/208/right_bg.gif*/) right repeat-y;
}
#lselect, #larchives, #lresources {
background:url(”left_bg.gif”/*tpa=http://www.csszengarden.com/208/left_bg.gif*/) repeat-y;
}
#explanation {background-image:url(”img_explanation.jpg”/*tpa=http://www.csszengarden.com/208/img_explanation.jpg*/);background-position:left bottom;}
#explanation h3 {background:url(”title_explanation.gif”/*tpa=http://www.csszengarden.com/208/title_explanation.gif*/) no-repeat;}
/* bottom image */
#preamble .p3 span, #explanation .p2 span, #participation .p3 span, #benefits .p1 span, #requirements .p5{
padding-bottom:20px;
background:url(”right_bottom.gif”/*tpa=http://www.csszengarden.com/208/right_bottom.gif*/) bottom no-repeat;
}
#lselect ul, #larchives ul, #lresources ul{
margin:0;
padding:0 25px 20px 17px;
background:url(”left_bottom.gif”/*tpa=http://www.csszengarden.com/208/left_bottom.gif*/) bottom no-repeat;
}
#lselect, #larchives, #lresources {
background:url(”left_bg.gif”/*tpa=http://www.csszengarden.com/208/left_bg.gif*/) repeat-y;
}
#larchives h3 {background:url(”title_archives.gif”/*tpa=http://www.csszengarden.com/208/title_archives.gif*/) no-repeat;}
没有评论▼