标签：family url font ril display pad com pre charset
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>
标签：family url font ril display pad com pre charset
原文地址：http://www.cnblogs.com/oliverliu/p/7101509.html
