HTML/CSS代码练习

要求效果图

polo360.jpg

用ps裁剪提取要用的图片

3.png

html代码

polo360练习

reset css代码

/* v2.0 | 20110126

http://meyerweb.com/eric/tools/css/reset/

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

网页css代码

body{

background: url(../img/polo360.png.png) repeat-x;

}

.clearfix:after,.clearfix:before{

content: "";

display: table;

clear: both;

}

.w{

width: 940px;

margin: 0 auto;

}

.header{

padding-top: 37px;

padding-bottom: 46px;

}

.logo{

margin-left: 15px;

}

.nav{

float: right;

margin-top: 22px;

}

.nav li{

float: left;

padding: 0 10px 8px;

border-left:1px #d6d6d6 dotted ;

}

.nav a{

font: bold 14px Georgia ;

text-decoration: none;

color: #666;

}

.nav a:hover{

color: #c3bfbf;

text-decoration: underline;

}

.nav p{

font: 11px Tahoma regular;

color: #b7b7b7;

}

.banner{

height: 356px;

background: url(../img/4.png) no-repeat bottom center;

position: relative;

}

.pointerDiv{

position: absolute;

left: 15px;

top: 314px;

}

.pointerDiv a{

float: left;

width: 17px;

height: 17px;

background: url(../img/5.png) no-repeat;

margin-left: 4px;

}

.pointerDiv .active,

.pointerDiv a:hover{

background: url(../img/6.png) no-repeat;

}

.content{

}

.content h1{

text-align: center;

font: 24px Georgia bold;

color: black;

padding: 6px 0 20px 0;

background: url(../img/7.png) no-repeat bottom;

margin-bottom:38px ;

}

.content .pl , .content .cs , .content .uc,

.contact .sc,.contact .co,.contact .nu{

float: left;

width: 300px;

}

.content .cs,.contact .co{

margin: 0px 20px;

}

.content h2{

font: 21px georgia regular;

color: #11719e;

}

.content .p1{

font: Myriad Pro regular 12px;

color:#8c8c8c;

}

.content .imgDiv{

width: 299px;

height: 190px;

background: url(../img/8.png) no-repeat;

margin: 16px 0 10px;

/*设置图片位置居中*/

text-align: center;

padding-top: 12px;

}

.content .p2{

height: 92px;

color: #3e3e3e;

font: 13px helvetica;

}

.content .lm{

display: block;

width: 163px;

height: 40px;

background: url(../img/12.png) no-repeat;

text-decoration: none;

color: #016999;

font: 12px/40px helvetica;

text-indent: 1em;

margin-bottom: 35px;

}

.contact{

background: url(../img/4.png) no-repeat top center;

}

.contact .sc,.contact .co,.contact .nu{

height: 382px;

}

.contact .txt{

width: 276px;

height: 33px;

background: url(../img/13.gif) no-repeat;

border: none;

padding: 0px 10px;

margin: 3px 0 16px;

}

.contact .tarea{

width: 276px;

height: 114px;

background: url(../img/14.png) no-repeat;

border: none;

resize: none;

padding: 10px;

margin: 0px;

}

.contact .btn{

width: 163px;

height: 32px;

background: url(../img/15.png) no-repeat;

border: none;

padding: 0px;

margin: 11px 0 23px;

color: #fff;

font: 13px georgia;

text-align: left;

text-indent: 1em;

cursor: pointer;

}

.contact .btn:hover{

color: yellow;

}

.contact h2{

color: #444444;

font: 18px/1 georgia ;

border-bottom: 1px dashed #d3d3d3;

padding: 44px 0 10px;

margin-bottom: 15px;

}

.sc .p1{

color: #444444;

font: 12px/1 helvetica;

}

.sc .icon{

font-size: 0px;

margin-top: 10px;

}

.sc .icon a{

margin-right: 2px;

}

.sc .nl{

font: 18px/1 bold "gill sans mt";

padding: 28px 0 8px;

}

.sc .txt{

margin: 18px 0 0px;

}

.nu p{

color: #444;

font:12px/1 helvetica ;

height: 58px;

border-bottom: 1px dashed #d3d3d3;

margin-bottom: 14px;

padding-bottom: 12px;

}

.nu .no-margin{

margin-bottom: 0px;

padding-bottom:9.5px ;

}

.nu img{

float:left;

margin-right: 8px;

}

.footer{

height: 173px;

background: #333;

border-top: solid 10px #4c4c4c;

}

.footer a,.footer p{

font: 11px Myriad Pro;

color: #999;

text-decoration: none;

}

.footer .w{

padding-top: 18px;

}

.footer p{

margin-left: 8px;

margin-right: 23px;

margin-bottom: 6px;

}

.footer .copy{

float: right;

}

.footer a:hover{

text-decoration: underline;

color: #cccaca;

}

结果展示：

1.png

2.png

当然光有源码是不行的，还要有剪切的图片

1.png

3.png

4.png

5.png

6.png

7.png

8.png

9.gif

10.jpg

11.jpg

12.png

13.gif

14.png

15.png

16.jpg

17.jpg

18.jpg

19.jpg

20.jpg

21.jpg

22.jpg

23.jpg

polo360.png.png

我已将该源码和图片上传至网盘中，网盘下载链接：

HTML/CSS制作网页练习