HTML代码4种范例——网页设计

范例 1 Shopping mall 效果图 HTML 代码 无标题文档 您好 欢迎光临商城 注册 登录 购物车共计商品 0件合计0 00 信任登录 日历 查看购物车 订 单查询 帮助中心 优惠活动 咨询热线 4006765919 精品女装 时尚男装 童装 睡衣 女士内衣 用户名 密码 精品女装 时尚男装 童装 睡衣 女士内衣 查看更多分类装 50 元以下 50 100 元 100 200 元 200 300 元 300 400 元 500 元以上 1 2012 夏季新款时尚百搭 2 2012 夏季新款时尚百搭 3 2012 夏季新款时尚百搭 4 2012 夏季新款时尚百搭 5 2012 夏季新款时尚百搭 6 2012 夏季新款时尚百搭 7 2012 夏季新款时尚百搭 8 2012 夏季新款时尚百搭 9 2012 夏季新款时尚百搭 10 2012 夏季新款时尚百搭 1 2 3 全部品牌 冬款英国原单 fenchurch 男 零售价 168 00 市场价 英国原单正品 Fat Face 男 零售价 198 00 市场价 111111111111111111111111111111111 888888888888888888888888888888888 更多 2012 夏季童 装 男 零售价 55 00 市场价 79 00 2012 夏款女 大童牛 零售价 49 00 市场价 2012 夏装新 款网纱 零售价 49 00 市场价 69 00 2012 夏季新 款 男 零售价 39 00 市场价 49 00 2012 夏季 韩版 零售价 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 margin 0px padding 0px span color CC0003 body font normal 12px 24px 宋体 color 545454 float float left a color inherit text decoration none border style none border style none img border none ul list style type none r border 1px solid red container margin 0px auto width 1084px height 1600px header width 100 height 170px background url images header mid bg gif no repeat header top background F5F5F5 width 100 height 25px border bottom 1px solid CCC header top ul li float left color 656565 header top ul li a hover text decoration underline header top small navigation padding 0px 10px 0px 7px header top small navigation a display block header mid width inherit height 89px header mid p float left padding top 16px header mid form margin left 606px margin top 5px width 422px height 30px background C30203 header mid form input float left margin top 2px header mid font font size 13px font family 黑体 header mid font2 font size 20px font weight bold font family 黑体 search input height 23px width 341px margin left 2px padding left 5px navigation width inherit height 55px background url images header navigation bg gif repeat x bottom navigation p navigation p ul navigation ul li float left navigation ul li color white font bold 15px 宋体 padding top 16px display block navigation ul li a padding 10px 20px navigation bg border background url images header navigation bg border gif no repeat bottom width 3px height 28px navigation first item navigation ul li a hover background url images header navigation bg2 gif repeat x content width 990px height 1150px margin 0 auto content top wide boder width 980px height 20px border 1px solid E4E4E4 border top style none content top wide boder bg background url images content top wide boder bg gif repeat x bottom height 14px width 978px border 1px solid white padding top 4px position absolute z index 1 content left width 215px height 90 float left content left login width 213px height 138px margin top 10px content left login img content left login div float left content left login bg background 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 padding left 5px content left login bg p1 display inline padding left 13px content left login bg p2 margin top 10px margin left 20px content left classification of goods width inherit height 235px background url images classification of goods jpg no repeat margin top 10px content left classification of goods ul padding top 36px padding left 8px content left classification of goods ul a background 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 goods ul a hover background position 0px 30px content left suitable price width 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 li float left width 89px height 24px margin top 5px margin left 5px color 974607 content left suitable price ul a background 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 ul a hover background position 0px 24px content left hot sale width 210px height 230px border 1px solid DBDBDB padding 1px content left hot sale border2 background F1F1F1 width 208px height 228px padding 1px content left hot sale border3 background white height inherit content left hot sale border3 ul padding 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 orangegif background repeat no repeat 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 MidAndRight width 760px height 1115px float left margin left 10px padding top 10px gray border border 1px solid CCC content mid width 540px content mid mid height 88px padding 1px content mid mid top width 537px height 26px background url images content mid mid bg gif repeat x content mid mid bottom text align center content mid mid bottom img margin top 15px content mid bottom width 538px height 160px margin top 10px border top none content mid bottom ul li float left height 28px content mid bottom ul li a background image url images changeable imagges conten mid classification jpg height 28px display blo ck content mid bottom classification1 a background position 0px 0px width 178px content mid bottom classification11 a background position 0px 28px width 178px content mid bottom classification2 a background position 178px 0px width 183px content mid bottom classification22 a background position 178px 28px width 183px content mid bottom classification2 a hover background position 178px 28px content mid bottom classification3 a background position 360px 0px width 177px content mid bottom classification33 a background position 360px 28px width 177px content mid bottom classification3 a hover background position 360px 28px orange border border bottom 2px solid FBB601 height 28px dotted border border right 2px dotted 999999 content mid bottom classification div1 width 245px height 105px margin 10px 0px 0px 15px content mid bottom classification div1 ul padding left 8px content mid bottom classification div1 ul li float left height 18px line height 12px content right width 204px margin left 13px content right MallInformation background url images myPicture jpg no repeat width 204px height 213px content right MallInformation p text align right width 185px padding top 10px content right MallInformation a hover text decoration underline content right MallInformation ul list style inside padding top 20px padding left 15px content bottom width 756px min height 530px border top none padding bottom 10px content bottom p color white text align right padding 3px 15px 0px 0px content bottom p a hover text decoration underline content bottom line height line height 8px content bottom line height2 line height 18px content bottom hot goods width 162px height 216px margin left 20px margin top 23px footer width 981px height 175px border top 2px solid B80405 massege width 670px height 150px padding left 20px padding top 13px massege son height 70px padding left 49px padding right 60px massege son h4 font size 13px padding bottom 3px color A72026 massege son p line height 21px color 747474 massege son p a hover text decoration underline information background url images footer information gif no repeat width 235px height 139px margin left 7px padding top 13px padding left 34px information p line height 20px information p type1 font bold 15px 宋体 color 6A6A6A information p type2 font bold 20px 宋体 color A72128 footer img width 981px height 60px border 1px solid EBEBEB margin top 10px footer img img float left margin left 31px margin top 6px changeable img position absolute z index 1 changeable box margin 255px 0px 0px 412px position absolute list style type none z index 2 changeable box li float left width 18px height 18px background color black color white text align center margin left 5px font bold 12px 18px 宋体 border 1px solid white 范例 2 Student assistant principal 效果图 HTML 代码 学校校长助理留言板 首页 签写留言 查看留言 联系我们 文理在线 校内新闻 关于我们 这是一个公告的示范 这是一个公告的示范 这是一个公告的示范 现代教育技术中心 2014 5 14 Css 代码 charset utf 8 CSS Document margin 0px padding 0px r border 1px solid red ul list style type none a text decoration none containner width 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 a color 0C69A0 containner ul li a hover color 09F z index position absolute z index 1 div content width 550px height 640px margin 0px auto padding 15px div content ul li width 550px div content ul li a font weight normal color 06C div content ul li a hover font weight bold color 69F footer margin top 0px background image url images main 06 png width 100 height 100 background repeat repeat x height 85px text align center font bold 26px 36px 楷体 padding top 20px color 10539C 范例 3 Xiamen University2 效果图 HTML 代码 厦门大学 厦门大学 主页 厦大概览 机构设置 人才培养 学术科研 社会服务 大学文化 合作交流 招生就业 English 厦大新闻 2014 年度教师招聘计划发布 改革微聚集 慢慢来 才能 走得更远 杨振斌书记出席首届 大江论 坛 暨两岸关 教育部社科司副司长徐艳国谈 思政理论教育现代化 校党委中心组学习 李未柠解 读社会化媒体 交行直属机构主要负责人在我 校研修 流行病毒专家 Nelson 教授做 客南强学术讲座 美国郭氏家族基金会董事局主 席郭忠信来访我校 杨振斌书记与机关青年干部座 谈 徐雅芬教授入选教育部 高校 思政理论课教 上海富吉医疗器械有限公司捐 赠 100 万元 焦点要闻 郑南峰 傅钢等合作研究成果发表于 科学 贵金属催化剂广泛应用于能源 环保 食品加 工等重要化工领域 如何提升贵金属利用率 同时维持高的催化剂活性 选择性和长的使 用寿命一直是贵金属催化剂研制的 详细 改 出一片新天地 厦门大学研究生培养质 量大幅提升 资料图片 光明日报 2014 年 04 月 30 日 06 版 近日 厦门大学 5 篇论文获全国优秀博士论文 2 篇论文获全国优秀博 士论文提名 入选数位居 详细 焦点要闻 官方微博 易班厦大 厦大网址导航 数字图书馆 校友服务 教育基金会 嘉庚学院 国际学院 汉推南方基地 网上展馆 信息公开 招聘信息 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 On Blame and Reciprocity An Experimental Study 2014 05 08 16 30 思明校区经济楼 N303 室 讲座 厦门大学厦大总机 0592 2180000 闽 ICP 备 05005471 号地址 福建省厦门市思明区思明南路 422 号 邮政 编码 361005 爱厦大 反馈 旧版主页 2013 厦门大学 版权所有 Css 代码 body ul li p dl margin 0px padding 0px a text decoration none color black bgimage background image url images title5 png width 100 height 400px background position 0px 0px background repeat repeat x position absolute z index 2 container1 width 1400px margin 0px auto bgimage2 background 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 navigation margin left 210px navigation ul list style type none navigation li float left width 100px margin top 116px navigation li a text decoration none color white font bold 15px 宋体 navigation li a hover color FFC781 image1 margin left 222px margin top 120px div1 1 width 320px margin left 222px float left margin top 8px div top border border style none border top solid red 1px title icon float left margin top 5px ico font float left font bold 14px 30px 宋体 title icon2 float right margin top 1px div1 1 clear both border top 2px solid FFD306 div1 1 icon float left padding top 20px margin right 2px float float left div1 1 icon2 float left div1 1 word margin top 10px font normal 13px 18px 黑体 div1 2 width 486px margin left 20px float left margin top 8px float left div1 2 clear both border top 2px solid FFD306 div1 2 1 1 width 282px margin top 23px font bold 12px 宋体 float left margin left 10px div1 2 1 1 p font normal 12px 30px 黑体 text indent 2em line height 20px margin top 15px div1 2 1 1 a color 003D79 div1 2 1 2 margin top 12px div1 2 2 1 margin top 32px float left div1 3 width 140px height 340px margin left 15px margin top 8px float left div1 3 border top 2px solid FFD306 margin top 32px bgchart background image url images chart3 jpg width 140px height 300px position absolute z index 1 background repeat no repeat div1 3 word font normal 13px 23px 黑体 margin top 6px margin left 32px div table clear both margin left 220px margin top 360px div table table width 980px height 280px border 1px solid F0F0F0 border top 2px solid FFD306 word break break all word wrap break all font normal 13px 20px 黑体 div table td border 1px solid F0F0F0 height 140px width 196px a change color a color gray a change color a hover color black footer height 130px margin top 20px font normal 13px 20px 宋体 color white footer image margin left 215px margin top 13px width 60px height 60px float left footer word1 float left margin left 0px margin top 13px footer word2 width 150px float left margin left 430px margin top 20px footer word3 margin left 1050px margin top 85px footer image2 float left footer a color white bgimage3 background 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 范例 4 your condos 效果图 HTML 代码 201358234104 辜建波 YOUR CONDOS User Login Tium eros donec lacinia corbista Aenean 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 piacerat Mauris accumsan lorem eleifend urna Curabitur quits est non torem bibendum Location Nam molestie dapibus sapien Codes PTY00514 Rooms 6 Kitchen 2 Bathrooms 2 Square Feet 1642 Transation Type BuyMortgage Property Type Residential PropertyCommercial propertyOther property City Select City New YorkLos AngelesChicagoHoustonPhiladelphiaAny Where Budget 50 000 100 000 300 000 1000 000 1000 000Not lack money Bedroom 234 4 Featured Projects Vivamus molestie nulla nec bibendum tincidunt dolor erat commodo totor eget sodales magna tellus ac neque Praesent ac lacus ac Vivamus molestie nulla nec bibendum tincidunt dolor erat commodo totor eget sodales magna tellus ac neque Praesent ac lacus ac Vivamus molestie nulla nec bibendum tincidunt dolor erat commodo totor eget sodales magna tellus ac neque Praesent ac lacus ac Recent Sales information Cras a tortor ac augue posuere 369 000 Duis turpis phasellus ornare 125 000 Dignissim urna sem tincidunt 245 000 Justo arcu nec tortor Morbi ac 550 000 Morbi at Massa lacinia enim 330 000 Mauris nec libero 190 000 Recent Sales information Home About Statitics News And Events Projects User Login FAQ Contact Copyright infomation Goes Here All Rights Reserved Css 代码 charset utf 8 CSS Document margin 0px padding 0px ul list style none a text decoration none body font family 微软雅黑 background image url images body bg gif r border 1px solid red float left float left end float clear both a hover font weight bold container margin 0px auto width 934px padding left 10px height 1010px background color white navigation background image url images vagination bg gif width 924px height 100 position absolute background repeat repeat x navigation left title color FEF9B7 margin 20px 23px navigation left title p1 font normal 22px 20px 华文宋体 navigation left title p2 font bold 28px 20px 微软雅黑 navigation ul li float left navigation ul li a background image url images navigation gifs gif display block height 66px navigation gif1 a navigation gif2 a width 75px navigation gif1 a link background position 0px 69px navigation gif1 a hover background position 0px 69px navigation gif2 a link background position 77px 0px navigation gif2 a hover background position 77px 69px navigation gif3 a navigation gif5 a navigation gif6 a width 95px navigation gif3 a link background position 155px 0px navigation gif3 a hover background position 155px 69px word break navigation gif4 a width 126px navigation gif4 a link background position 250px 0px navigation gif4 a hover background position 250px 69px navigation gif5 a link background position 377px 0px navigation gif5 a hover background position 377px 69px navigation gif6 a link background position 473px 0px navigation gif6 a hover background position 473px 69px navigation gif7 a width 63px navigation gif7 a link background position 569px 0px navigation gif7 a hover background position 569px 69px navigation gif8 a width 88px navigation gif8 a link background position 634px 0px navigation gif8 a hover background position 634px 69px content head height 255px padding top 90px padding bottom 10px content head left background image url images content head left bg gif width 429px height 100 position absolute background repeat repeat x height 255px content head left img padding 33px 22px content head left form padding 15px 13px line height 30px content head left form h3 font normal 18px 微软雅黑 content head left form p input font lighter 10px 微软雅 黑 width 232px height 18px padding left 8px content head left buttom margin top 5px margin right 5px content head left h2 text align center color 932605 content head left bottom p padding left 20px margin right 10px color 570F12 font normal 13px 15px Tihoma word break break all width 390px content head right margin left 439px position absolute content mid width 924px height 212px background image url images content mid bg gif background repeat repeat x position absolute font bold 11px 18px 微软雅黑 padding top 10px content mid left width 576px height 223px content mid left img padding left 12px content mid left bottom p width 285px font weight normal text align right line height 13px word wrap content mid left type4 color 87A34E font size 10px margin top 5px content mid left type5 color 838385 font size 9px content mid left ul padding left 28px padding top 35px line height 15px content mid left ul li a text decoration underline color B5BB4D line height 20px content mid left ul li a hover color B77A48 content mid left ul li float left content mid left ul li type0 width 260px content mid left ul li type1 color 87A34E width 68px content mid left ul li type2 color 87A34E width 10px content mid left ul li type3 color 838385 font weight normal width 190 xp content mid mid img padding left 10px content mid right background color 736B23 width 278px height 202px margin left 1px content mid right form padding top 15px padding right 34px content mid right form p color B1A865 font weight normal line height 30px text align right content mid right form p select width 120px height 18px font normal 10px 24px 微软雅黑 content mid right search buttom padding right 75px padding top 3px content foot background image url images content foot bg gif width 900px height 348px position absolute margin top 222px padding 12px background repeat repeat x content foot left width 560px height 320px content foot left title background image url images content foot title bg gif width 540px height 41px position absolute font bold 23px 36px 微软雅黑 padding left 20px color FBFFB2 content foot sign width 155px height 253px background image url images conternt sign gif background repeat no repeat position absolute margin left 18px margin top 60px padding left 15px padding top 14px color 577901 content foot sign h6 margin top 6px overflow hidden font size 10px width 130px height 20px content foot sign