1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div id="box-aaa"> <A id=feature-trigger><SPAN class=first> <H4 class=c_blue>成功故事</H4> <P>帮助客户实现商业成功，才是我们真正的成功。分享华为与全球客户合作双赢的成功故事。</P> </SPAN><img src="images/hw_103177.jpg"> </A> <div id="feature-popup"> <div class="maskContainer"> <div class="mask"> <div class="caseContainer"> <div class=case> <div class=item> <div class=pic><img src="images/hw_103167.jpg"></div> <div class=detail> <A href="#">Telenor：LTE北上极地</A> Telenor在世界最北端的城市朗伊尔城部署LTE网络，为Telenor的百年华诞送上了一份珍贵的贺礼。 </div> </div> <div class=item> <div class=pic><img src="images/hw_103168.jpg"></div> <div class=detail> <A href="#">上海电信IPTV成功之路</A> 上海电信在上海拥有400万宽带用户，超过三分之一的用户选择了IPTV业务。成绩令人瞩目。 </div> </div> <div class=item> <div class=pic><img src="images/hw_103195.jpg"></div> <div class=detail> <A href="#">罗马尼亚电信建高效FTTx</A> 通过利用现有资源，选择适合自己的FTTx建网模式，罗马尼亚电信成功打开通向超宽带的大门。 </div> </div> <div class=item> <div class=pic><img src="images/hw_103170.jpg"></div> <div class=detail> <A href="#">卡塔尔电信：“光”彩夺目</A> 覆盖全境的国家宽带项目作为卡塔尔国家发展战略的关键举措，对提升国家形象起着举足轻重的作用。 </div> </div> <div class=item> <div class=pic><img src="images/hw_103171.jpg"></div> <div class=detail> <A href="#">智利Movistar深挖带宽潜力</A> 智利Movistar基于现有网络资源，最大化提升带宽能力，为用户提供更多丰富多彩的超宽带业务。 </div> </div> <div class=item> <div class=pic><img src="images/hw_103172.jpg"></div> <div class=detail> <A href="#">瑞士电信光铜并进</A> 瑞士电信光铜并进，为城市和乡村提供宽带，使瑞士成为“人人都能享有宽带接入”的先行国家之一。 </div> </div> <div class="close"> <a href="#">更多成功故事</a> </div> </div> </div> </div> </div> </div></div>
4、书写css代码。#{ margin: 0; padding: 0; border: 0; }ul, ol, li { list-style: none; }input, button { margin: 0; font-size: 12px; vertical-align: middle; }body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: center; margin: 0 auto; }table { border-collapse: collapse; border-spacing: 0; }a { color: #333; text-decoration: none; }a:hover { color: #ef9b11; text-decoration: underline; }em { font-style: normal; }#box-aaa { text-align: left; border: 1px solid #ccc; padding-left: 80px; padding-top: 350px; height: 270px; width: 900px; margin: 20px auto; }.caseContainer { width: 664px; height: 405px; position: relative; overflow: hidden; }.maskContainer { width: 664px; height: 405px; position: relative; bottom: 2px; left: -3px; overflow: hidden; }#feature-trigger { background: url(../images/hw_089235.png) repeat-x scroll 0 0 transparent; cursor: pointer; display: inline-block; float: left; height: 137px; margin: 12px 12px 0 0; padding: 0; width: 316px; }#feature-trigger span.first { background: url(../images/hw_089243.png) no-repeat left bottom; }#box-aaa a span { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 15px; OVERFLOW: hidden; WIDTH: 185px; PADDING-TOP: 13px; HEIGHT: 107px }#box-aaa a IMG { FLOAT: right; WIDTH: 110px; HEIGHT: 137px }#box-aaa a SPAN H4 { FONT-WEIGHT: 400; FONT-SIZE: 16px; MARGIN-BOTTOM: 8px; LINE-HEIGHT: 22px; FONT-FAMILY: microsoft yahei }#box-aaa a SPAN P { FONT-SIZE: 12px; COLOR: #646464; LINE-HEIGHT: 18px }#feature-popup { DISPLAY: none; Z-INDEX: 100; POSITION: absolute }.mask { WIDTH: 654px; POSITION: absolute; HEIGHT: 375px }.case { Z-INDEX: 100; WIDTH: 654px; POSITION: absolute; HEIGHT: 375px; border: 1px solid #ccc; background: #f5f5f5; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 15px; }.close { CLEAR: both; PADDING-RIGHT: 23px; HEIGHT: 24px; TEXT-ALIGN: right }.close A { PADDING-RIGHT: 0px; PADDING-LEFT: 20px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #0033cc; PADDING-TOP: 2px; TEXT-DECORATION: none }.item { FLOAT: left; MARGIN: 0px 10px 16px 15px; WIDTH: 272px; HEIGHT: 93px; overflow: hidden; }.pic { BORDER-RIGHT: #b1b3b5 1px solid; BORDER-TOP: #b1b3b5 1px solid; FLOAT: left; BORDER-LEFT: #b1b3b5 1px solid; WIDTH: 88px; MARGIN-RIGHT: 10px; BORDER-BOTTOM: #b1b3b5 1px solid; HEIGHT: 88px }.item .pic img { WIDTH: 88px; HEIGHT: 88px }.item .detail { LINE-HEIGHT: 18px }.item .detail span { FONT-SIZE: 16px; COLOR: #b60005 }.item .detail a { DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 12px; MARGIN-BOTTOM: 5px; COLOR: #ed9203 }.item .detail img { DISPLAY: block; MARGIN: 3px 0px 5px }
5、书写并添加js代码。<SCRIPT src="js/jquery.js"></SCRIPT><SCRIPT>$(function(){featurePopup.ini();});var indexSlides={};</SCRIPT>
6、代码整体结构。
7、查看效果。
