1、范例 1Shopping_mall效果图HTML 代码无标题文档您好，欢迎光临商城！注册登录购物车共计商品0件合计0.00信任登录 日历查看购物车|订单查询|帮助中心|优惠活动咨询热线：4006765919精品女装 时尚男装童装睡衣女士内衣用户名：密码：精品女装时尚男装童装睡衣女士内衣查看更多分类装50 元以下50-100 元100-200 元200-300 元300-400 元500 元以上12012 夏季新款时尚百搭22012 夏季新款时尚百搭32012 夏季新款时尚百搭42012 夏季新款时尚百搭52012 夏季新款时尚百搭62012 夏季新款时尚百搭72012 夏季新款时尚百搭8201
2、2 夏季新款时尚百搭92012 夏季新款时尚百搭102012 夏季新款时尚百搭123全部品牌冬款英国原单fenchurch 男零售价：168.00市场价：=英国原单正品 Fat Face男零售价：198.00市场价：=111111111111111111111111111111111888888888888888888888888888888888更多2012 夏季童装 男零售价：55.00市场价：79.002012 夏款女大童牛零售价：49.00市场价：=2012 夏装新款网纱零售价：49.00市场价：69.002012 夏季新款 男零售价：39.00市场价：49.002012 夏季 韩版零
3、售价：38.00市场价：=童装女童夏装 2012零售价：49.00市场价：=2012 春秋 女婴儿零售价：39.00市场价：=1 新款时尚韩版秋装男零售价：108.00市场价：138.00配送信息送货上门 送货范围 配送信息送货上门 送货范围 配送信息送货上门 送货范围 配送信息送货上门 送货范围 配送信息送货上门 送货范围 全国统一服务热线(免长途费)400-676-5919会员服务：010-58433881售后服务：010-61136099服务服务 7X24 小时2014gujianbo京 ICP证 052564*号CSS 代码charset “utf-8“;/* CSS Document
4、 */*margin:0px; padding:0px;spancolor:#CC0003;bodyfont:normal 12px/24px “宋体“;color:#545454;.float float:left;acolor:inherit;text-decoration:none;border-style:none; border-style:none;img border:none;ullist-style-type:none;.rborder:1px solid red;#containermargin:0px auto;width:1084px;height:1600px;.he
5、aderwidth:100%; height:170px;background:url(/images/header_mid_bg.gif) no-repeat;.header_topbackground: #F5F5F5; width:100%; height:25px; border-bottom:1px solid #CCC;.header_top ul lifloat:left; color:#656565;.header_top ul li a:hovertext-decoration:underline;.header_top_small_navigationpadding:0px
6、 10px 0px 7px;.header_top_small_navigation adisplay:block;.header_midwidth:inherit; height:89px; .header_mid pfloat:left;padding-top:16px;.header_mid formmargin-left:606px; margin-top:5px;width:422px;height:30px; background: #C30203;.header_mid form inputfloat:left; margin-top:2px;.header_mid_font f
7、ont-size:13px;font-family:“黑体“;.header_mid_font2 font-size:20px;font-weight:bold; font-family:“黑体“;.search_inputheight:23px; width:341px; margin-left:2px;padding-left:5px;.navigationwidth:inherit; height:55px; background:url(/images/header_navigation_bg.gif) repeat-x bottom;.navigation p,.navigation
8、 p ul,.navigation ul li float:left;.navigation ul licolor:white; font:bold 15px “宋体“;padding-top:16px;display:block;.navigation ul li apadding:10px 20px;.navigation_bg_borderbackground:url(/images/header_navigation_bg_border.gif) no-repeat bottom; width:3px; height:28px;.navigation_first_item,.navig
9、ation ul li a:hoverbackground:url(/images/header_navigation_bg2.gif) repeat-x;.contentwidth:990px;height:1150px; margin:0 auto;.content_top_wide_boderwidth:980px;height:20px; border:1px solid #E4E4E4; border-top-style:none; .content_top_wide_boder_bgbackground:url(/images/content_top_wide_boder_bg.g
10、if) repeat-x bottom; height:14px; width:978px;border:1px solid white; padding-top:4px;position:absolute;z-index:-1;.content_leftwidth:215px;height:90%; float:left;.content_left_loginwidth:213px; height:138px; margin-top:10px;.content_left_login img,.content_left_login divfloat:left;.content_left_log
11、in_bgbackground:url(/images/content_left_login_bg.gif) repeat-x; width:211px; height:98px; border:1px solid #DAD7AC; border-top-style:none;.content_left_login_bg form margin-left:20px; font-weight:bold;.content_left_login_bg_input width:115px; height:20px; margin-top:3px; border:1px solid #B79D7C; p
12、adding-left:5px;.content_left_login_bg_p1display:inline;padding-left:13px;.content_left_login_bg_p2margin-top:10px; margin-left:20px;.content_left_classification_of_goodswidth:inherit; height:235px; background: url(/images/classification_of_goods.jpg) no-repeat; margin-top:10px;.content_left_classif
13、ication_of_goods ulpadding-top:36px; padding-left:8px;.content_left_classification_of_goods ul abackground:url(/images/classification_select_bg.gif) no-repeat 0px 0px; width:197px; height:30px; display:block; padding-left:10px; margin-top:2px; font:bold 15px/30px “宋体“;.content_left_classification_of
14、_goods ul a:hoverbackground-position:0px -30px;.content_left_suitable_pricewidth:inherit; height:129px; background: url(/images/suitable_price.jpg) no-repeat; margin-top:10px;.content_left_suitable_price ul width:200px;padding-top:28px; padding-left:10px;.content_left_suitable_price ul lifloat:left;
15、width:89px; height:24px;margin-top:5px; margin-left:5px; color:#974607;.content_left_suitable_price ul abackground:url(/images/suitable_price_select.gif) no-repeat 0px 0px; width:89px; height:24px;padding-left:21px; margin-top:2px; display:block;font:bold 12px/24px “宋体“;.content_left_suitable_price
16、ul a:hoverbackground-position:0px -24px;.content_left_hot_salewidth:210px;height:230px; border:1px solid #DBDBDB;padding:1px;.content_left_hot_sale_border2background:#F1F1F1;width:208px; height:228px;padding:1px;.content_left_hot_sale_border3background:white;height:inherit;.content_left_hot_sale_bor
17、der3 ulpadding-left:2px;.content_left_hot_sale_border3 ul a:hover font-weight:bold;.content_left_hot_sale_border3 ul li font-size:11px;float:left;line-height:13px; margin-top:9px; margin-left:5px;overflow:hidden;.content_left_hot_sale_redgif,.content_left_hot_sale_orangegifbackground-repeat:no-repea
18、t; width:13px; height:13px; text-align:center; font:bold 8px/13px “宋体“;color:white;.content_left_hot_sale_redgif background-image:url(/images/hot_sale_redgif.gif);.content_left_hot_sale_orangegif background-image:url(/images/hot_sale_orangegif.gif);.conten_MidAndRightwidth:760px;height:1115px;float:
19、left; margin-left:10px; padding-top:10px;.gray_borderborder:1px solid #CCC;.content_midwidth:540px;.content_mid_midheight:88px;padding:1px;.content_mid_mid_topwidth:537px; height:26px;background:url(/images/content_mid_mid_bg.gif) repeat-x;.content_mid_mid_bottomtext-align:center;.content_mid_mid_bo
20、ttom imgmargin-top:15px;.content_mid_bottomwidth:538px; height:160px; margin-top:10px; border-top:none;.content_mid_bottom ul lifloat:left;height:28px;.content_mid_bottom ul li a background-image:url(/images/changeable_imagges/conten_mid_classification.jpg);height:28px;display:block;.content_mid_bot
21、tom_classification1 abackground-position:0px 0px;width:178px;.content_mid_bottom_classification11 abackground-position:0px -28px;width:178px;.content_mid_bottom_classification2 abackground-position:-178px 0px;width:183px;.content_mid_bottom_classification22 abackground-position:-178px -28px;width:18
22、3px;.content_mid_bottom_classification2 a:hoverbackground-position:-178px -28px;.content_mid_bottom_classification3 abackground-position:-360px 0px;width:177px;.content_mid_bottom_classification33 abackground-position:-360px -28px;width:177px;.content_mid_bottom_classification3 a:hoverbackground-pos
23、ition:-360px -28px;.orange_borderborder-bottom:2px solid #FBB601; height:28px;.dotted_borderborder-right:2px dotted #999999;.content_mid_bottom_classification_div1width:245px; height:105px; margin:10px 0px 0px 15px;.content_mid_bottom_classification_div1 ulpadding-left:8px;.content_mid_bottom_classi
24、fication_div1 ul lifloat:left;height:18px; line-height:12px;.content_rightwidth:204px; margin-left:13px;.content_right_MallInformationbackground:url(/images/myPicture.jpg) no-repeat; width:204px; height:213px;.content_right_MallInformation ptext-align:right; width:185px; padding-top:10px;.content_ri
25、ght_MallInformation a:hover text-decoration:underline;.content_right_MallInformation ullist-style: inside;padding-top:20px; padding-left:15px;.content_bottomwidth:756px;min-height:530px; border-top:none; padding-bottom:10px;.content_bottom_pcolor:white;text-align:right;padding:3px 15px 0px 0px;.cont
26、ent_bottom_p a:hovertext-decoration:underline;.content_bottom_line_heightline-height:8px;.content_bottom_line_height2line-height:18px;.content_bottom_hot_goodswidth:162px;height:216px; margin-left:20px; margin-top:23px;.footerwidth:981px;height:175px;border-top:2px solid #B80405;.massegewidth:670px;
27、height:150px;padding-left:20px; padding-top:13px;.massege_sonheight:70px;padding-left:49px;padding-right:60px;.massege_son h4font-size:13px; padding-bottom:3px; color:#A72026;.massege_son pline-height:21px; color:#747474;.massege_son p a:hovertext-decoration:underline;.informationbackground:url(/ima
28、ges/footer_information.gif) no-repeat;width:235px;height:139px;margin-left:7px;padding-top:13px;padding-left:34px;.information pline-height:20px;.information_p_type1font:bold 15px “宋体“;color:#6A6A6A;.information_p_type2font:bold 20px “宋体“;color: #A72128;.footer_imgwidth:981px;height:60px; border:1px
29、 solid #EBEBEB; margin-top:10px;.footer_img imgfloat:left; margin-left:31px; margin-top:6px;#changeable_img position:absolute; z-index:1;#changeable_boxmargin:255px 0px 0px 412px; position:absolute;list-style-type:none;z-index:2;#changeable_box li float:left; width:18px; height:18px; background-colo
30、r:black; color:white; text-align:center; margin-left:5px; font:bold 12px/18px “宋体“; border:1px solid white;范例 2Student_assistant_principal效果图HTML 代码学校校长助理留言板首页签写留言查看留言联系我们文理在线校内新闻关于我们这是一个公告的示范这是一个公告的示范这是一个公告的示范现代教育技术中心2014-5-14Css 代码charset “utf-8“;/* CSS Document */* margin:0px; padding:0px;.r bord
31、er:1px solid red;ullist-style-type:none;a text-decoration:none;.containnerwidth:789px; margin:0px auto;height:1050px;.containner ul height:30px;.containner ul li float:left;width:110px; font: bolder 17px “黑体“; padding-top:6px;.containner ul li acolor: #0C69A0;.containner ul li a:hover color: #09F;.z
32、-index_position:absolute; z-index:-1;.div_contentwidth:550px;height:640px; margin:0px auto; padding:15px;.div_content ul liwidth:550px;.div_content ul li a font-weight:normal;color: #06C;.div_content ul li a:hoverfont-weight:bold;color: #69F;.footer margin-top:0px; background-image:url(/images/main_
33、06.png);width:100%;height:100%; background-repeat:repeat-x; height:85px; text-align:center; font:bold 26px/36px “楷体“; padding-top:20px; color: #10539C;范例 3Xiamen_University2效果图HTML 代码厦门大学厦门大学主页厦大概览机构设置人才培养学术科研社会服务大学文化合作交流招生就业English厦大新闻2014 年度教师招聘计划发布【改革微聚集】慢慢来，才能走得更远杨振斌书记出席首届“ 大江论坛“暨两岸关.教育部社科司副司长徐艳
34、国谈思政理论教育现代化校党委中心组学习 李未柠解读社会化媒体.交行直属机构主要负责人在我校研修流行病毒专家 Nelson 教授做客南强学术讲座美国郭氏家族基金会董事局主席郭忠信来访我校杨振斌书记与机关青年干部座谈徐雅芬教授入选教育部 “高校思政理论课教.上海富吉医疗器械有限公司捐赠 100 万元.焦点要闻郑南峰、傅钢等合作研究成果发表于科学贵金属催化剂广泛应用于能源、环保、食品加工等重要化工领域。如何提升贵金属利用率，同时维持高的催化剂活性、选择性和长的使用寿命一直是贵金属催化剂研制的.详细“改”出一片新天地厦门大学研究生培养质量大幅提升（资料图片） 光明日报 （2014 年 04 月30 日
35、 06 版） 近日，厦门大学 5 篇论文获全国优秀博士论文，2 篇论文获全国优秀博士论文提名，入选数位居.详细焦点要闻官方微博易班厦大厦大网址导航数字图书馆校友服务教育基金会嘉庚学院国际学院汉推南方基地网上展馆信息公开招聘信息On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity:
36、 An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】O
37、n Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08 16:30思明校区经济楼 N303 室【讲座】On Blame and Reciprocity: An Experimental Study2014-05-08
38、16:30思明校区经济楼 N303 室【讲座】厦门大学厦大总机：0592-2180000 闽 ICP 备 05005471 号地址：福建省厦门市思明区思明南路 422 号 邮政编码：361005 爱厦大|反馈|旧版主页2013 厦门大学 版权所有Css 代码body,ul,li,p,dlmargin:0px;padding:0px;atext-decoration:none;color:black;.bgimagebackground-image:url(/images/title5.png);width:100%;height:400px;background-position:0px 0p
39、x;background-repeat:repeat-x;position:absolute;z-index:-2;#container1width:1400px;margin:0px auto;.bgimage2background-image:url(/images/title6.png);width:1400px;height:400px;background-position:0px 0px;background-repeat:no-repeat;position:absolute;z-index:-1;text-aligh:center;.navigationmargin-left:
40、210px;.navigation ullist-style-type:none;.navigation lifloat:left;width:100px;margin-top:116px;.navigation li atext-decoration:none;color:white;font:bold 15px “宋体“;.navigation li a:hovercolor:#FFC781;.image1margin-left:222px;margin-top:120px;.div1-1width:320px;margin-left:222px;float:left;margin-top
41、:8px;.div_top_borderborder-style:none;border-top:solid red 1px;.title_iconfloat:left;margin-top:5px;.ico_fontfloat:left;font:bold 14px/30px “宋体“;.title_icon2float:right;margin-top:1px;.div1-1_clear:both;border-top:2px solid #FFD306;.div1-1_iconfloat:left;padding-top:20px;margin-right:2px;.float_floa
42、t:left;.div1-1_icon2float:left;.div1-1_wordmargin-top:10px;font:normal 13px/18px “黑体“;.div1-2width:486px;margin-left:20px;float:left;margin-top:8px;float:left;.div1-2_clear:both;border-top:2px solid #FFD306;.div1-2_1-1width:282px;margin-top:23px;font:bold 12px “宋体“;float:left;margin-left:10px;.div1-
43、2_1-1 pfont:normal 12px/30px “黑体“;text-indent:2em;line-height:20px;margin-top:15px;.div1-2_1-1 acolor:#003D79;.div1-2_1-2margin-top:12px;.div1-2_2-1margin-top:32px;float:left;.div1-3width:140px;height:340px;margin-left:15px;margin-top:8px;float:left;.div1-3_border-top:2px solid #FFD306;margin-top:32
44、px;.bgchartbackground-image:url(/images/chart3.jpg);width:140px;height:300px;position:absolute;z-index:-1;background-repeat:no-repeat;.div1-3_wordfont:normal 13px/23px “黑体“;margin-top:6px;margin-left:32px;.div_tableclear:both;margin-left:220px;margin-top:360px;.div_table tablewidth:980px;height:280p
45、x;border:1px solid #F0F0F0;border-top:2px solid #FFD306;word-break:break-all;word-wrap:break-all;font:normal 13px/20px “黑体“;.div_table tdborder:1px solid #F0F0F0;height:140px;width:196px;.a_change_color acolor:gray;.a_change_color a:hovercolor:black;.footerheight:130px;margin-top:20px;font:normal 13
46、px/20px “宋体“;color:white;.footer_imagemargin-left:215px;margin-top:13px;width:60px;height:60px;float:left;.footer_word1float:left;margin-left:0px;margin-top:13px;.footer_word2width:150px;float:left;margin-left:430px;margin-top:20px;.footer_word3;margin-left:1050px;margin-top:85px;.footer_image2float
47、:left;.footer acolor:white;.bgimage3background-image:url(/images/title7.jpg);width:100%;height:137px;background-position:0px 0px;background-repeat:repeat-x;position:absolute;z-index:-3;margin-top:1220px;范例 4your_condos效果图HTML 代码201358234104_辜建波YOURCONDOS User LoginTium eros donec lacinia corbistaAen
48、ean metus quam,aliquam nec,scelerisque id,malesuada nec,mi,inconguedio non nunc.Aenean metus quam,aliquam nec,scelerisque id,malesuada nec,mi,inconguedio non nunc. Nulla a orci sit amet massa convallis piaceratMauris accumsan lorem eleifend urnaCurabitur quits est non torem bibendumLocation:Nam molestie dapibus,sapienCodes:PTY00514Rooms:6Kitchen:2Bathrooms:2Square Feet:1642
