HTML5与CSS3实践-优快云博客

003 <head>

004 <meta charset="utf-8" />

005 <title>Smashing HTML5!</title>

006

007 <link rel="stylesheet" href="css/main.css" type="text/css" />

008

009 <!--[if IE]>

010 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

011 <!--[if lte IE 7]>

012 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->

013

014 <!--[if lt IE 7]>

015 <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->

016 </head>

017

018 <body id="index" class="home">

019

020 <header id="banner" class="body">

021 <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>

022

023 <nav><ul>

024 <li class="active"><a href="#">home</a></li>

025 <li><a href="#">portfolio</a></li>

026

027 <li><a href="#">blog</a></li>

028 <li><a href="#">contact</a></li>

029 </ul></nav>

030

031 </header>

032

033 <aside id="featured" class="body"><article>

034 <figure>

035 <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />

036 </figure>

037 <hgroup>

038

039 <h2>Featured Article</h2>

040 <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>

041 </hgroup>

042 <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>

043

044 </article></aside>

045

046 <section id="content" class="body">

047 <ol id="posts-list" class="hfeed">

048 <li><article class="hentry">

049 <header>

050 <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>

051

052 </header>

053

054 <footer class="post-info">

055 <abbr class="published" title="2005-10-10T14:07:00-07:00">

056 10th October 2005

057 </abbr>

058

059 <address class="vcard author">

060

061 By <a class="url fn" href="#">Enrique Ramírez</a>

062 </address>

063 </footer>

064

065 <div class="entry-content">

066

067 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>

068 </div>

069 </article></li>

070

071 <li><article class="hentry">

072 ...

073 </article></li>

074

075 <li><article class="hentry">

076 ...

077 </article></li>

078

079 </ol>

080 </section>

081

082 <section id="extras" class="body">

083 <div class="blogroll">

084 <h2>blogroll</h2>

085

086 <ul>

087 <li><a href="#" rel="external">HTML5 Doctor</a></li>

088 <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

089

090 <li><a href="#" rel="external">Smashing Magazine</a></li>

091 <li><a href="#" rel="external">W3C</a></li>

092 <li><a href="#" rel="external">Wordpress</a></li>

093

094 <li><a href="#" rel="external">Wikipedia</a></li>

095 <li><a href="#" rel="external">HTML5 Doctor</a></li>

096 <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

097

098 <li><a href="#" rel="external">Smashing Magazine</a></li>

099 <li><a href="#" rel="external">W3C</a></li>

100 <li><a href="#" rel="external">Wordpress</a></li>

101

102 <li><a href="#" rel="external">Wikipedia</a></li>

103 <li><a href="#" rel="external">HTML5 Doctor</a></li>

104 <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

105

106 <li><a href="#" rel="external">Smashing Magazine</a></li>

107 <li><a href="#" rel="external">W3C</a></li>

108 <li><a href="#" rel="external">Wordpress</a></li>

109

110 <li><a href="#" rel="external">Wikipedia</a></li>

111 </ul>

112 </div>

113

114 <div class="social">

115

116 <h2>social</h2>

117 <ul>

118 <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>

119 <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>

120

121 <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>

122 <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>

123 <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>

124

125 <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>

126 </ul>

127 </div>

128 </section>

129

130 <footer id="contentinfo" class="body">

131 <address id="about" class="vcard body">

132 <span class="primary">

133 <strong><a href="#" class="fn url">Smashing Magazine</a></strong>

134

135 <span class="role">Amazing Magazine</span>

136 </span>

137

138 <img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />

139 <span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>

140

141 </address>

142 <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>

143 </footer>

144

145 </body>

146

</html>

The CSS

001 /*

002 Name: Smashing HTML5

003 Date: July 2009

004 Description: Sample layout for HTML5 and CSS3 goodness.

005 Version: 1.0

006 Author: Enrique Ramírez

007 Autor URI: http://enrique-ramirez.com

008 */

009

010 /* Imports */

011 @import url("reset.css");

012 @import url("global-forms.css");

013

014 /***** Global *****/

015 /* Body */

016 body {

017 background: #F5F4EF url('../images/bg.png');

018 color: #000305;

019 font-size: 87.5%; /* Base font size: 14px */

020 font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

021 line-height: 1.429;

022 margin: 0;

023 padding: 0;

024 text-align: left;

025 }

026

027 /* Headings */

028 h2 {font-size: 1.571em} /* 22px */

029 h3 {font-size: 1.429em} /* 20px */

030 h4 {font-size: 1.286em} /* 18px */

031 h5 {font-size: 1.143em} /* 16px */

032 h6 {font-size: 1em} /* 14px */

033

034 h2, h3, h4, h5, h6 {

035 font-weight: 400;

036 line-height: 1.1;

037 margin-bottom: .8em;

038 }

039

040 /* Anchors */

041 a {outline: 0;}

042 a img {border: 0px; text-decoration: none;}

043 a:link, a:visited {

044 color: #C74350;

045 padding: 0 1px;

046 text-decoration: underline;

047 }

048 a:hover, a:active {

049 background-color: #C74350;

050 color: #fff;

051 text-decoration: none;

052 text-shadow: 1px 1px 1px #333;

053 }

054

055 /* Paragraphs */

056 p {margin-bottom: 1.143em;}

057 * p:last-child {margin-bottom: 0;}

058

059 strong, b {font-weight: bold;}

060 em, i {font-style: italic;}

061

062 ::-moz-selection {background: #F6CF74; color: #fff;}

063 ::selection {background: #F6CF74; color: #fff;}

064

065 /* Lists */

066 ul {

067 list-style: outside disc;

068 margin: 1em 0 1.5em 1.5em;

069 }

070

071 ol {

072 list-style: outside decimal;

073 margin: 1em 0 1.5em 1.5em;

074 }

075

076 dl {margin: 0 0 1.5em 0;}

077 dt {font-weight: bold;}

078 dd {margin-left: 1.5em;}

079

080 /* Quotes */

081 blockquote {font-style: italic;}

082 cite {}

083

084 q {}

085

086 /* Tables */

087 table {margin: .5em auto 1.5em auto; width: 98%;}

088

089 /* Thead */

090 thead th {padding: .5em .4em; text-align: left;}

091 thead td {}

092

093 /* Tbody */

094 tbody td {padding: .5em .4em;}

095 tbody th {}

096

097 tbody .alt td {}

098 tbody .alt th {}

099

100 /* Tfoot */

101 tfoot th {}

102 tfoot td {}

转载于:https://www.cnblogs.com/wqj0405/archive/2010/09/15/1826861.html

html5实战

The CSS