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 max–with: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 –webkit–box–shadow:2px 2px 20px #888;
056 –webkit–transform:rotate(-10deg);
057 –moz–box–shadow:2px 2px 20px #888;
058 –moz–transform: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 –webkit–border–radius:10px;
098 –moz–border–radius:10px;
099 border–radius:10px;
100 –webkit–box–shadow:2px 2px 20px #888;
101 –webkit–transform:rotate(-10deg);
102 –moz–box–shadow:2px 2px 20px #888;
103 –moz–transform:rotate(-10deg);
104 }
105
106
107 artical header
108 {
109 –webkit–border–radius:10px;
110 –moz–border–radius:10px;
111 border–radius:10px;
112 padding:5px;
113 }
114 artical footer
115 {
116 –webkit–border–radius:10px;
117 –moz–border–radius:10px;
118 border–radius: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>
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 max–with: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 –webkit–box–shadow:2px 2px 20px #888;
056 –webkit–transform:rotate(-10deg);
057 –moz–box–shadow:2px 2px 20px #888;
058 –moz–transform: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 –webkit–border–radius:10px;
098 –moz–border–radius:10px;
099 border–radius:10px;
100 –webkit–box–shadow:2px 2px 20px #888;
101 –webkit–transform:rotate(-10deg);
102 –moz–box–shadow:2px 2px 20px #888;
103 –moz–transform:rotate(-10deg);
104 }
105
106
107 artical header
108 {
109 –webkit–border–radius:10px;
110 –moz–border–radius:10px;
111 border–radius:10px;
112 padding:5px;
113 }
114 artical footer
115 {
116 –webkit–border–radius:10px;
117 –moz–border–radius:10px;
118 border–radius: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>