准备好需要用到的图标。

书写hmtl代码。

书写css代码。*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0 }table { border-collapse: collapse; border-spacing: 0 }fieldset, img { border: 0; }address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal }ol, ul, li { list-style: none }caption, th { text-align: left }h1, h2, h3, h4, h5, h6 { font-weight: normal; }q:before, q:after { content: '' }strong { font-weight: bold }em { font-style: italic }.aligncenter { display: block; margin: 0 auto }.alignleft { float: left }.alignright { float: right }div { position: relative }html { -webkit-font-smoothing: antialiased; }body { background: #f5f5f5 url('../images/bkg-pat.png') repeat scroll 0 0; font: 12px/1.5em Arial, Helvetica, sans-serif, 'Arial Narrow'; color: #a5a5a5; }a { color: #65a42d; text-decoration: none; }a:hover { color: #65a42d; text-decoration: underline; }.column-clear { clear: both; }.wrapper { margin: 0px auto; padding: 0px; width: 1080px; }.portfolio-content, .portfolio-area { width: 1080px; }.title-page { font-size: 40px; margin: 50px 0px 60px 0px; color: #151515; }.goto { float: right; width: 130px; margin: -80px 30px 0px 0px; }.portfolio-categ { margin-bottom: 30px; }.portfolio-categ li { display: inline; margin-right: 10px; }.image-block { display: block; position: relative; }.image-block img { border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px; background: #FFFFFF; padding: 10px; }.image-block img:hover { border: 1px solid #A9CF54; box-shadow: 0 0 5px #A9CF54; }.portfolio-area li { float: left; margin: 0 12px 20px 0; overflow: hidden; width: 245px; padding: 5px; }.home-portfolio-text { margin-top: 10px; }li.active a { text-decoration: underline; }div.light_rounded .pp_top .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat; }div.light_rounded .pp_top .pp_middle { background: #fff; }div.light_rounded .pp_top .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat; }div.light_rounded .pp_content .ppt { color: #000; }div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right { background: #fff; }div.light_rounded .pp_content { background-color: #fff; }div.light_rounded .pp_next:hover { background: url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; }div.light_rounded .pp_previous:hover { background: url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; }div.light_rounded .pp_expand { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; }div.light_rounded .pp_expand:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; }div.light_rounded .pp_contract { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; }div.light_rounded .pp_contract:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; }div.light_rounded .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; }div.light_rounded #pp_full_res .pp_inline { color: #000; }div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next { margin-top: 12px !important; }div.light_rounded .pp_nav .pp_play { background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; }div.light_rounded .pp_nav .pp_pause { background: url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; }div.light_rounded .pp_arrow_previous { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat; }div.light_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; }div.light_rounded .pp_arrow_next { background: url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat; }div.light_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; }

代码整体结构。

查看效果。