Walk by faith code, hack, curious

HTML5首尝鲜!

001 <!doctype html>
002 <html>
003     <head>
004         <meta charset=“utf8”>
005         <title>html5 test</title>
006         <!–
007         <link type=”text/css” ref=”stylesheet” href=”html5.css”>
008         –>
009 <style>
010 body{
011 background-color:#CCCCCC;
012 font-family:Geneva,Arial,Helvetica,sans-serif;
013 margin:0px auto;
014 maxwith:900px;
015 border:solid;
016 border-color:#FFFFFF;
017    
018 }
019 header
020 {
021     display:block;
022     background-color:#F47D31;
023     color:#FFFFFF;
024     text-align:center;
025 }
026
027 header h2
028 {
029     margin:0px;
030 }
031 h1
032 {
033     font-size:72px;
034     margin:0px;
035 }
036 h2
037 {
038     font-size:24px;
039     margin:0px;
040     text-align:center;
041     color:#F47D31;
042 }
043 h3{
044     font-size:18px;
045     margin:0px;
046     text-align:center;
047     color:#F47D31;
048
049 }
050
051 h4
052 {
053     color:#F47D31;
054     background-color:#fff;
055     webkitboxshadow:2px 2px 20px #888;
056     webkittransform:rotate(-10deg);
057     mozboxshadow:2px 2px 20px #888;
058     moztransform:rotate(-10deg);
059     position:absolute;
060     padding:0px 150px;
061     top:50px;
062     left:-120px;
063     text-align:center;
064
065 }
066
067
068 footer{
069     clear:both;
070     display:block;
071     background-color:#F47D31;
072     color:#FFFFFF;
073     text-align:center;
074     padding:15px;
075
076 }
077 footer h2
078 {
079     font-size:14px;
080     color:white;
081 }
082
083 section
084 {
085 display:block;
086 width:50%;
087 float:left;
088
089 }
090
091 artical
092 {
093     background-color:#eee;
094     display:block;
095     margin:10px;
096     padding:10px;
097     webkitborderradius:10px;
098     mozborderradius:10px;
099     borderradius:10px;
100     webkitboxshadow:2px 2px 20px #888;
101     webkittransform:rotate(-10deg);
102     mozboxshadow:2px 2px 20px #888;
103     moztransform:rotate(-10deg);
104 }
105
106
107 artical header
108 {
109     webkitborderradius:10px;
110     mozborderradius:10px;
111     borderradius:10px;
112     padding:5px;
113 }
114 artical footer
115 {
116     webkitborderradius:10px;
117     mozborderradius:10px;
118     borderradius:10px;
119     padding:5px;
120 }
121 artical h1
122 {
123 font-size:18px;
124 }
125
126
127 #container
128 {
129 background-color:#888;
130 }
131 nav{
132     display:block;
133     width:25%;
134     float:left;
135 }
136 nav h3
137 {
138     margin:15px;
139     color:white;
140    
141 }
142 nav a:link,nav a:visited
143 {
144     display:block;
145     border-bottom:3px solid #fff;
146     padding:10px;
147     text-decoration:none;
148     font-weight:bold;
149     margin:5px;
150 }
151
152 nav a:hover{
153     color:white;
154     background-color:#F47D31;
155 }
156
157
158 aside{
159     display:block;
160     width:25%;
161     float:left;
162
163 }
164 aside h3
165 {
166     margin:15px;
167     color:white;
168 }
169 aside p
170 {
171     margin:15px;
172     color:white;
173     font-weight:bold;
174     font-style:italic;
175 }
176
177
178 /* links */
179 a{ color:#F47D31;}
180 a:hover{ text-decoration:underline;}
181 </style>
182
183     </head>
184     <body>
185         <header>
186             <h1>header</h1>
187             <h2>subtitle</h2>
188             <h4>HTML5 Rocks!</h4>
189            
190         </header>
191         <div id=“container”>   
192             <nav>
193                 <h3>Nav</h3>
194                 <a href=“#”>Link1</a>
195                 <a href=“#”>Link2</a>
196                 <a href=“#”>Link3</a>
197             </nav>
198             <section>
199                 <artical>
200                     <header>
201                         <h1>Artical Header</h1>
202                     </header>
203                     <p>this a artical in section and artical tag.</p>
204                     <footer><h2>Artical Footer</2></footer>
205                 </artical>
206                 <artical>
207                     <header>
208                         <h1>Artical Header</h1>
209                     </header>
210                     <p>this a artical in section and artical tag.</p>
211                     <footer><h2>Artical Footer</2></footer>
212                 </artical>
213             </section>
214            
215             <aside>
216                 <h3>Aside</h3>
217                 <p>this is a aside.</p>
218             </aside>
219             <footer>Footer</footer>
220         </div>
221     </body>
222 </html>