首页 > 代码库 > h5练手

h5练手

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>练手</title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             font-family: "Microsoft YaHei UI"
 11         }
 12 
 13         a {
 14             text-decoration: none;
 15         }
 16 
 17         h2 {
 18             font-weight: normal;
 19             font-size: 48px;
 20             color: #f46208;
 21         }
 22 
 23         p {
 24             font-size: 14px;
 25         }
 26 
 27         /*header部分*/
 28         header {
 29             width: 100%;
 30             height: 95px;
 31             background-color: #2E2E2E;
 32             position: relative;
 33         }
 34 
 35         header .logo {
 36             display: block;
 37             width: 141px;
 38             height: 31px;
 39             background-image: url("http://wx1.sinaimg.cn/large/006jnDrily1fh3ct85ai8j303x00vjr9.jpg");
 40             position: absolute;
 41             top: 0;
 42             bottom: 0;
 43             margin: auto 180px;
 44         }
 45 
 46         header nav {
 47             float: right;
 48             margin-right: 135px;
 49         }
 50 
 51         header nav a {
 52             float: right;
 53             height: 95px;
 54             line-height: 95px;
 55             padding:0 25px;
 56             color: #FFF;
 57         }
 58 
 59         header nav a:hover {
 60             background-color: #f46208;
 61             color: #2E2E2E;
 62         }
 63 
 64         /*banner部分*/
 65         section.banner {
 66             position: relative;
 67         }
 68 
 69         section.banner img {
 70             width: 100%;
 71             height: 675px;
 72         }
 73 
 74         section.banner div {
 75             position: absolute;
 76             width: 100%;
 77             top: 30%;
 78             text-align: center;
 79             color: #FFF;
 80         }
 81 
 82         section.banner div h2 {
 83             font-size: 64px;
 84             color: #FFF;
 85         }
 86 
 87         /*portfolio部分*/
 88         section.portfolio {
 89             text-align: center;
 90             margin-top: 120px;
 91         }
 92 
 93         section.portfolio p {
 94             max-width: 850px;
 95             margin: 50px auto;
 96         }
 97 
 98         section.portfolio nav a {
 99             border: 1px solid #f46208;
100             color: #f46208;
101             padding: 10px;
102             margin: 0 5px;
103         }
104 
105         section.portfolio nav a:hover {
106             background-color: #f46208;
107             color: #FFF;
108         }
109 
110         section.portfolio img {
111             display: block;
112             width: 100%;
113             height: 560px;
114             margin-top: 50px;
115         }
116 
117         /*stats部分*/
118         section.stats {
119             max-width: 850px;
120             margin: 120px auto;
121             text-align: center;
122             overflow: hidden;
123         }
124 
125         section.stats p {
126             margin: 50px auto;
127         }
128 
129         section.stats .icon div {
130             width: 25%;
131             float: left;
132         }
133 
134         section.stats .icon div p {
135             font-size: 18px;
136             margin: 10px 0;
137         }
138 
139         section.stats .icon div span {
140             font-size: 28px;
141             color: #f46208;
142         }
143 
144         /*team部分*/
145         section.team {
146             background-color: #2E2E2E;
147             text-align: center;
148             color: #FFF;
149             padding: 120px 0 100px;
150         }
151 
152         section.team > p {
153             max-width: 850px;
154             margin: 50px auto;
155         }
156 
157         section.team .teammate {
158             width: 950px;
159             overflow: hidden;
160             margin: 0 auto;
161         }
162 
163         section.team .teammate div {
164             float: left;
165             width: 33.3%;
166         }
167 
168         section.team .teammate div span {
169             display: block;
170             max-width: 240px;
171             font-size: 12px;
172             margin: 0 auto;
173         }
174 
175         /*contact us部分*/
176         section.contactus {
177             margin: 95px 0 110px;
178             text-align: center;
179         }
180 
181         section.contactus p {
182             max-width: 850px;
183             margin: 50px auto;
184         }
185 
186         section.contactus form {
187             width: 950px;
188             margin: 0 auto;
189         }
190 
191         section.contactus form input {
192             width: 460px;
193             height: 50px;
194             text-indent: 14px;
195         }
196 
197         section.contactus form .fullname {
198             margin-right: 17px;
199         }
200 
201         section.contactus form textarea {
202             width: 920px;
203             height: 242px;
204             margin: 15px 0;
205             padding: 14px;
206             resize: none;
207             line-height: 24px;
208         }
209 
210         section.contactus form .submit {
211             background-color: #f46208;
212             border: none;
213             width: 200px;
214             height: 58px;
215             color: #FFF;
216             font-size: 18px;
217             cursor: pointer;
218             text-indent: 0;
219         }
220 
221         /*footer部分*/
222         footer {
223             height: 110px;
224             background-color: #2E2E2E;
225             color: #FFF;
226             line-height: 110px;
227             text-align: center;
228         }
229     </style>
230 </head>
231 <body>
232     <!-- header部分 -->
233     <header>
234         <a href="#" class="logo"></a>
235         <nav>
236             <a href="#contactus">CONTACT US</a>
237             <a href="#team">TEAM</a>
238             <a href="#portfolio">PORTFOLIO</a>
239             <a href="#">HOME</a>
240         </nav>
241     </header>
242     
243     <!-- banner部分 -->
244     <section class="banner">
245         <div>
246             <h2>Welcome to Website</h2>
247             <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
248         </div>
249         <img src="http://wx3.sinaimg.cn/large/006jnDrily1fh3ct7pwaxj312w0im7bl.jpg" alt="banner">
250     </section>
251 
252     <!-- portfolio部分 -->
253     <section class="portfolio" id="portfolio">
254         <h2>P o r t f o l i o</h2>
255         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
256         <nav>
257             <a href="">ALL</a>
258             <a href="">WEB</a>
259             <a href="">SOFTWARE</a>
260             <a href="">WORKS</a>
261             <a href="">BRANDS</a>
262         </nav>
263         <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ct8yahjj312w0flh26.jpg" alt="图片展示">
264     </section>
265 
266     <!-- stats部分 -->
267     <section class="stats">
268         <h2>S t a t s</h2>
269         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
270         <div class="icon">
271             <div class="margins">
272                 <img src="http://wx3.sinaimg.cn/large/006jnDrily1fh3ct9a5mnj301c01gmx1.jpg" alt="margins">
273                 <p>Margins</p>
274                 <span>1 2 , 0 0 0</span>
275             </div>
276             <div class="completed">
277                 <img src="http://wx4.sinaimg.cn/large/006jnDrily1fh3ct9pv5tj301h01gt8l.jpg" alt="completed">
278                 <p>Completed</p>
279                 <span>5 , 6 8 1</span>
280             </div>
281             <div class="projects">
282                 <img src="http://wx1.sinaimg.cn/large/006jnDrily1fh3cta2vvkj301s01fq2u.jpg" alt="projects">
283                 <p>Projects</p>
284                 <span>4 3 2</span>
285             </div>
286             <div class="customers">
287                 <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ctaewbgj301w01fglh.jpg" alt="customers">
288                 <p>Customers</p>
289                 <span>8 6</span>
290             </div>
291         </div>
292     </section>
293 
294     <!-- team部分 -->
295     <section class="team" id="team">
296         <h2>T e a m</h2>
297         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
298         <div class="teammate">
299             <div class="abigail">
300                 <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ctar83yj305u05kdgh.jpg" alt="abigail">
301                 <p>Abigail</p>
302                 <span>Lorem ipsum dolor sit amet,consectetur adipisic</span>
303             </div>
304             <div class="andy">
305                 <img src="http://wx1.sinaimg.cn/large/006jnDrily1fh3ctb2y0rj305t05kq3p.jpg" alt="andy">
306                 <p>Andy</p>
307                 <span>Lorem ipsum dolor sit amet,consectetur adipisic</span>
308             </div>
309             <div class="jacqueline">
310                 <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ctbg1rmj305z05k0th.jpg" alt="jacqueline">
311                 <p>Jacqueline</p>
312                 <span>Lorem ipsum dolor sit amet,consectetur adipisic</span>
313             </div>
314         </div>
315     </section>
316 
317     <!-- contact us部分 -->
318     <section class="contactus" id="contactus">
319         <h2>C o n t a c t U s</h2>
320         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
321         <form action="">
322             <input type="text" class="fullname" placeholder="Full Name">
323             <input type="email" class="email" placeholder="Email">
324             <textarea placeholder="Message"></textarea>
325             <input type="submit" class="submit" value="Submit Message">
326         </form>
327     </section>
328     
329     <!-- footer部分 -->
330     <footer>Copyright ? 2016.company name</footer>
331 </body>
332 </html>

 

h5练手