100度小例子

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>精灵图</title>

<link rel="stylesheet" href="css/reset.css">

<style>

.father{

width: 980px;

margin: 0 auto;

}

p{

padding:0;

margin: 0;

}

.top{

background: url('img/hbg.png'

no-repeat 0 0;

width: 960px;

height: 26px;

margin: 0 16px;

overflow: hidden;

margin-top: 10px;

}

.top a{

margin: 0 11px;

font-size: 12px;

word-spacing: 17px;

color:gray;

}

.top span:hover{

color:red;

}

.t_left{

float:left;

}

.t_right{

float:right;

font-size: 12px;

}

.t_right span:hover{

color:red;

}

.option{

display: inline-block;

width: 68px;

height: 100px;

text-align: center;

font-size: 13px;

color:black;

}

.option:hover{

color:red;

}

a{

text-decoration: none;

}

.option div{

margin: 0 auto;

}

.meishi{

background: url('img/jingling.png'

no-repeat 0 0;

width: 47px;

height: 47px;

}

.meishi:hover{

background: url('img/jingling.png')

no-repeat 0 -51px;

width: 48px;

height: 49px;

}

.yedian{

background: url('img/jingling.png'

no-repeat -66px 0;

width: 47px;

height: 47px;

}

.yedian:hover{

background: url('img/jingling.png'

no-repeat -66px -51px;

width: 48px;

height: 49px;

}

.gouwu{

background: url('img/jingling.png'

no-repeat -132px 0;

width: 47px;

height: 47px;

}

.gouwu:hover{

background: url('img/jingling.png'

no-repeat -132px -51px;

width: 48px;

height: 49px;

}

.wenhua{

background: url('img/jingling.png'

no-repeat -198px 0;

width: 47px;

height: 47px;

}

.wenhua:hover{

background: url('img/jingling.png'

no-repeat -198px -51px;

width: 48px;

height: 49px;

}

.option1{

display: inline-block;

}

.logo{

margin: 0 15px;

}

.xiuxian{

background: url('img/jingling.png'

no-repeat -264px 0;

width: 47px;

height: 47px;

}

.xiuxian:hover{

background: url('img/jingling.png'

no-repeat -264px -51px;

width: 48px;

height: 49px;

}

.kongjian{

background: url('img/jingling.png'

no-repeat -319px 0;

width: 47px;

height: 47px;

}

.kongjian:hover{

background: url('img/jingling.png'

no-repeat -319px -51px;

width: 48px;

height: 49px;

}

.zhidao{

background: url('img/jingling.png'

no-repeat -385px 0;

width: 47px;

height: 47px;

}

.zhidao:hover{

background: url('img/jingling.png'

no-repeat -385px -51px;

width: 48px;

height: 49px;

}

.baina{

background: url('img/jingling.png'

no-repeat -451px 0;

width: 47px;

height: 47px;

}

.baina:hover{

background: url('img/jingling.png'

no-repeat -451px -51px;

width: 48px;

height: 49px;

}

.luntan{

background: url('img/jingling.png'

no-repeat -517px 0;

width: 47px;

height: 47px;

}

.luntan:hover{

background: url('img/jingling.png'

no-repeat -517px -51px;

width: 48px;

height: 49px;

}

.julebu{

background: url('img/jingling.png'

no-repeat -583px 0;

width: 47px;

height: 47px;

}

.julebu:hover{

background: url('img/jingling.png'

no-repeat -583px -51px;

width: 47px;

height: 49px;

}

.c_left{

display: inline-block;

margin-top: 42px;

margin-left: 150px;

}

.c_right{

display: inline-block;

font-size: 13px;

color: white;

margin: 42px 20px;

}

.c_right a{

color: white;

}

.text{

color:#F8757C;

margin-left: 100px;

margin-right: 12px;

width: 305px;

height: 22px;

border-radius: 5px;

padding: 3px 8px;

vertical-align: bottom;

}

.c_r{

display: inline-block;

}

.bottom{

width: 980px;

height: 140px;

margin-top: -10px;

}

.b_top{

margin: 0 auto;

word-spacing: 20px;

padding: 2px 5px;

text-align: center;

}

.b_top span{

border-left:2px solid #FFCEC0

border-top:2px solid #FFCEC0

border-right:2px solid #FFCEC0

border-radius: 8px 8px 0 0;

text-align: center;

padding: 10px 30px;

font-size: 15px;

color: black;

margin: -11.5px;

background-color: white;

}

.b_top span:hover{

color:white;

background-color: #E21C01;

}

.b_center{

background: url('img/bg2.jpg'

no-repeat 0 0;

width: 960px;

height: 134px;

margin-top: -20px;

}

.b_footer{

text-align: center;

margin-top: -25px;

}

.b_footer span{

font-size: 14px;

}

.b_footer img{

margin-left: 25px;

margin-right: 10px;

}

.xx{

color:red;

}

.fz{

color:#989898;

}

.content_left{

width: 712px;

float:left;

}

.left1_left{

border: 1px solid #F1F1F1;

width: 350px;

height: 420px;

border-radius: 5px;

margin-top: 12px;

float:left;

}

.left_t{

margin: 10px 10px;

word-spacing: 15px;

}

.left_t img{

vertical-align: middle;

}

.left_c{

margin-left:15px

}

.left_1{

display: inline-block;

margin-top: 2px;

}

.left_2{

display: inline-block;

font-size: 14px;

color: #4D4D4D;

}

.left_2 p{

margin-top: 6px;

}

.dian{

color: red;

}

.left1_right{

border: 1px solid #F1F1F1;

width: 350px;

height: 420px;

border-radius: 5px;

margin-top: 12px;

float:right;

}

.right1{

margin-left: 2px;

background-image: url("img/down.png");

background-repeat: no-repeat;

position: relative;

}

.right1_l{

display: inline-block;

font-size: 16px;

padding: 12px 18px;

font-weight: 500;

}

.right1_l img{

position:absolute;

top:14px;

left: 152px

z-index: 2;

}

.right1_l:hover .shop{

color: red;

}

.right1_l:hover img{

z-index: -1;

}

.right1_r{

display: inline-block;

font-size: 16px;

padding: 12px 18px;

font-weight: 500;

}

.right1_r:hover .shop{

color: red;

}

.right1_r img{

position:absolute;

top:14px;

left: 325px

z-index: -1;

}

.right1_r:hover img{

z-index: 2;

}

.down1{

margin-left: 10px;

background-color: #F9F9F9;

height: 100px;

margin-top: 10px;

}

.down_l{

display: inline-block;

vertical-align: middle;

margin-right: 10px;

}

.down1_b{

margin-left: -43px;

margin-bottom: -9px;

}

.down_c{

display: inline-block;

vertical-align: middle;

font-size: 13px;

}

.down_c a{

font-size: 13px;


}

.down_c p{

margin-top: 5px;

font-size: 12px;

color: #818181;

}

.yuzhou{

color: red;

margin-bottom: 10px;

}

.down_r{

display: inline-block;

}

.more{

margin-top: 30px;

text-align: right;

}

.left3_l{

border: 1px solid #F1F1F1;

width: 350px;

height: 420px;

border-radius: 5px;

margin-top: 12px;

float:left;

background-image: url("img/yejiao.png");

background-repeat: no-repeat;

}

.div1{

display: inline-block;

margin-left: 10px;

margin-top: 10px;

}

.lucky{

color:#FB0C37;

font-size: 14px;

}

.huodong{

font-size: 25px;

color: #333333;

}

.div2{

display: inline-block;

margin-left: 10px;

}

.riqi{

color:#FB0C37;

font-size: 35px;

}

.l1{

margin-left: 15px;

margin-top: 10px;

display: inline-block;

vertical-align: middle;

}

.l2{

display: inline-block;

vertical-align: middle;

margin-left: 5px;

margin-top: 8px;

}

.date{

color: #E80D2A;

border: 1px solid #D5D5D5;

padding: 5px;

font-size: 15px;

border-radius: 8px;

}

.zhuti{

font-size: 14px;

font-weight: 500;

vertical-align: middle;

}

.rongyu{

font-size: 13px;

margin-top: 8px;

color: #999999;

}

.div_bottom{

width: 300px;

height: 300px;

margin-top: 15px;

margin-left: 15px;

}

table{

width: 320px;

height: 250px;

border-color:white; 

border: none;

}

th{

width: 40px;

height: 33px;

text-align: center;

background-color: #FCFCFC;

font-size: 13px;

}

tr{

width: 40px;

height: 33px;

text-align: center;

background-color: #EDEDED;

font-size: 12px;

color: #6F6F6F;

}

.qian{

background-color: #F8F8F8;

color: #D5D5D5;

}

td{

border: 2px solid white;

}

.ps0{

position: relative;

}

.ps1{

position: absolute;

top: -34px;

left:47px

/*opacity: 0;*/

display: none;

}

.ps0:hover .ps1{

/*opacity: 1;*/

display: block;

}

.left3_right{

border: 1px solid #F1F1F1;

width: 350px;

height: 420px;

border-radius: 5px;

margin-top: 12px;

float:right;

}

.recommend{

color:#FB0C37;

font-size: 14px;

vertical-align: top;

}

.tuijian{

font-size: 25px;

color: #333333;

vertical-align: top;

}

.div3{

display: inline-block;

margin-left: 15px;

}

.div4{

display: inline-block;


}

.div4 img{

height: 45px;

}

.div5{

display: inline-block;

}

.best{

color:#EDEDED;

margin-left: 5px;

font-size: 40px;

vertical-align: top;

}

.div_middle1{

background-color: #F8F8F8;

border: 1px solid #F8F8F8;

width: 330px;

height: 160px;

margin-left: 10px;

border-radius: 5px;

}

.div6{

margin-left: 10px;

display: inline-block;

font-size: 14px;

}

.div7{

display: inline-block;

vertical-align: bottom;

}

.div7 img{

margin-left: 10px;

vertical-align: bottom;

margin-bottom: 15px;

}

.div_bottom1{

margin-top: 15px;

font-size: 12px;

}

.div_bottom1 img{

margin-left: 15px;

margin-top: 10px

}

.word{

margin-left: 10px;

color: #454545;

}

.shuzi{

margin-left: 29px;

color: #999999;

}

.shuzi1{

margin-left: 39px;

color: #999999;

}

.shuzi2{

margin-left: 52px;

color: #999999;

}

.left4_left{

border: 1px solid #F1F1F1;

width: 350px;

height: 340px;

border-radius: 5px;

margin-top: 12px;

float:left;

}

.left4_left{

margin-left: 2px;

background-image: url("img/down.png");

background-repeat: no-repeat;

position: relative;

}

.left4_l{

display: inline-block;

font-size: 16px;

padding: 12px 18px;

font-weight: 500;

}

.left4_l img{

position:absolute;

top:14px;

left: 152px

z-index: 2;

}

.left4_l:hover .shop{

color: red;

}

.left4_l:hover img{

z-index: -1;

}

.left4_r{

display: inline-block;

font-size: 16px;

padding: 12px 18px;

font-weight: 500;

}

.left4_r:hover .shop{

color: red;

}

.left4_r img{

position:absolute;

top:14px;

left: 325px

z-index: -1;

}

.left4_r:hover img{

z-index: 2;

}

.body{

margin-top: 20px;

}

.footer{

margin-top: 20px;

margin-left: 25px;

}

.red{

border: 2px solid #ED0014;

border-radius: 5px;

margin: 0 5px;

padding: 5px 7px;

font-size: 12px;

display: inline-block;

}

.red:hover {

background-color: #ED0014;

color: white;

}

.blue{

border: 2px solid #003894;

border-radius: 5px;

margin: 0 5px;

padding:  5px 7px;

font-size: 12px;

display: inline-block;

}

.blue:hover{

background-color: #003894;

color: white;

}

.yellow{

border: 2px solid #FF9330;

border-radius: 5px;

margin: 0 5px;

padding: 5px 7px;

font-size: 12px;

display: inline-block;

}

.yellow:hover{

background-color: #FF9330;

color: white;

}

.orange{

border: 2px solid #ED0014;

border-radius: 5px;

margin: 0 5px;

padding: 5px 7px;

font-size: 12px;

display: inline-block;

}

.orange:hover{

background-color: #ED0014;

color: white;

}

.purple{

border: 2px solid #992D74;

border-radius: 5px;

margin: 0 5px;

padding: 5px 7px;

font-size: 12px;

display: inline-block;

}

.purple:hover{

background-color: #992D74;

color: white;

}

.r{

color:#ED0014;

}

.red:hover .r{

color: white;

}

.b{

color:#003894;

}

.blue:hover .b{

color: white;

}

.y{

color:#FF9330;

}

.yellow:hover .y{

color: white;

}

.o{

color:#ED0014;

}

.orange:hover .o{

color: white;

}

.p{

color:#992D74;

}

.purple:hover .p{

color: white;

}

.div4_right{

border: 1px solid #F1F1F1;

width: 350px;

height: 340px;

border-radius: 5px;

margin-top: 12px;

float:right;

}

.bbs{

color: #DC001D;

}

.head1_l{

margin-left: 15px;

margin-top: 10px;

display: inline-block;

}

.head1_r{

margin-left: 215px;

margin-top: 10px;

display: inline-block;

}

.body1{

margin-left: 15px;

margin-top: 10px;

}

.footer1{

margin-top: 8px;

margin-left: 15px;

}

.xinyu{

background-color: #F1F1F1;

width: 310px;

height: 20px;

padding: 3px 5px;

border-radius: 5px;

margin:9px 0;

}

.bianhao{

font-size: 14px;

margin-left: 10px;

color: #E90013;

}

.guguai{

font-size: 14px;

margin-left: 20px;

color: #333333;

}

.shishuo{

font-size: 13px;

margin-left: 55px;

color: #666666;

}

.div7_left{

border: 1px solid #F1F1F1;

width: 330px;

height: 280px;

border-radius: 5px;

margin-top: 12px;

float:left;

padding: 10px;

}

.advice{

font-size: 12px;

color: #DC001D;

margin-left:5px;

display: inline-block;

}

.zd{

font-size: 12px;

font-weight: 500;

display: inline-block;

}

.more1{

margin-left: 100px;

}

.question_top{

margin-top: 10px;

}

.question_top a{

text-decoration: none;

width: 70px;

height: 10px;

text-align: center;

border: 1px solid #DADADA;

padding: 8px 10px 7px 20px;

font-size: 12px;

color: #666;

float: left;

border-radius: 5px 5px 0px 0px;

}

.question_xia{

background: url("img/down1.png");

float: right;

background-repeat: no-repeat;

width: 7px;

height: 4px;

margin-top: 4px;

}

.question_top a:hover{

color: #454545;

border-bottom: none;

font-weight: bold;

}

.question_top a:hover .question_xia{

background: url("img/down2.png");

background-repeat: no-repeat;

}

.div7_right{

border: 1px solid #F1F1F1;

width: 330px;

height: 280px;

border-radius: 5px;

margin-top: 12px;

float:right;

padding: 10px;

}

.hot{

font-size: 15px;

color: #DC001D;

margin-left:15px;

display: inline-block;

}

.hongren{

font-size: 15px;

font-weight: 500;

display: inline-block;

margin-right: 190px;

}

.more11{

margin-left: -10px;

}

.body3{

margin-top: 20px;

}

.body4{

margin-top: 46px;

border-bottom: 1px dashed #CBCBCA;

padding-bottom: 10px;

}

.span1{

font-size: 13px;

color: #999999;

margin-left: 120px;

letter-spacing: 20px;


}

.span2{

font-size: 13px;

color: #999999;

margin-left: 80px;

}

.biaoti{

font-size: 12px;

color: #454545;

letter-spacing: 2px;

margin-top: 5px;

border-bottom: 1px dashed #CBCBCA;

padding-bottom: 8px;

margin-top: 8px;

}

.dian1{

font-size: 12px;

color: #D35862;

}

.biaoti img{

margin-left: 18px;

}

.biaoti1{

font-size: 12px;

color: #454545;

letter-spacing: 2px;

margin-top: 5px;

border-bottom: 1px dashed #CBCBCA;

padding-bottom: 8px;

margin-top: 8px;

}

.biaoti1 img{

margin-left: 33px;

}

.img{

position: relative;

top:8px;

left:20px;

}

.sousou{

font-size: 12px;

color: #595959;

margin-left: 15px;

}

.key{

font-size: 12px;

padding: 2px;

color: #9C9C9C;

width: 155px;

}

.left8_left{

border: 1px solid #F1F1F1;

width: 350px;

height: 240px;

border-radius: 5px;

margin-top: 12px;

float:left;

}

.help{

margin: 15px 10px;

}

.help1{

color: #DC001D;

font-size: 14px;

}

.help2{

font-size: 14px;

}

.problem{

text-indent: 2em;

font-size: 13px;

line-height: 20px;

margin-left: 12px;

}

.phone0{

margin-top: 10px;

}

.phone{

margin-left: 15px;

vertical-align: middle;

}

.phone1{

color: #DC001D;

vertical-align: middle;

font-size: 15px;

}

.ren{

margin-left: 50px;

}

.ren1{

font-size: 12px;

}

.what0{

margin-left: 15px;

margin-top: 10px;

}

.what1{

display: inline-block;

font-size: 12px;

line-height: 20px;

color: #292929;


}

.what1 h4{

font-weight: 500;

}

.dian3{

color: #C20014;

}

.what2{

display: inline-block;

font-size: 12px;

margin-left: 50px;

line-height: 20px;

color: #292929;

}

.what2 h4{

font-weight: 500;

}

.left8_right{

border: 1px solid #F1F1F1;

width: 350px;

height: 240px;

border-radius: 5px;

margin-top: 12px;

float:right;

}

.left8_top{

margin-top: 15px;

margin-left: 10px;

}

.media{

color: #DC001D;

font-size: 13px;

}

.voice{

font-size: 13px;

font-weight: 500;

}

.left8_top img{

margin-left: 100px;

}

.left8_content{

margin-top: 15px;

margin-left: 10px;

}

.left8_c2{

display: inline-block;

}

.left8_c3{

display: inline-block;

font-size: 12px;

vertical-align: top;

line-height: 15px;

color: #292929;

}

.left8_c4{

margin-top: 15px;

}

.left8_c5{

margin-top: 15px;

}

.left8_c6{

margin-top: 15px;

}

.content_right{

width: 240px;

float:right;

}

.content_right1{

border: 1px solid #F1F1F1;

width: 230px;

height: 140px;

border-radius: 8px;

margin-top: 12px;

margin-left: -10px;

}

.load{

width: 230px;

height: 20px;

background-color: #F8F8F8;

padding: 10px 15px;

}

.load1{

color: #DC001D;

font-size: 13px;

}

.load2{

font-size: 13px;

margin-left: 5px;

}

.register{

margin-top: 5px;

margin-left: 15px;

font-size: 12px;

color: #595959;

line-height: 30px;

}

#n{

width: 100px;

background: #F7F7F7;

}

#p{

width: 100px;

background: #F7F7F7;

}

.load3{

background-color: #FF0017;

color: white;

padding: 3px 8px;

border: 1px solid #FF0017;

border-radius: 10px;

}

.new1{

display: inline-block;

margin-top: 5px;

}

.dian5{

color: #FF0017;

}

.new2{

display: inline-block;

margin-left: 15px;

}

.content_right2{

margin-top: 5px;

margin-left: -10px;

}

.content_right3{

margin-top: 5px;

margin-left: -10px;

}

.content_right4{

border: 1px solid #F1F1F1;

width: 230px;

height: 210px;

border-radius: 8px;

margin-top: 12px;

margin-left: -10px;

}

.right_t1{

margin-top: 8px;

margin-left: 10px;

}

.coupons{

font-size: 13px;

color: #DC001D;

}

.qiang{

font-size: 13px;

}

.right_t1 img{

margin-left: 54px;

}

.right_t2{

margin-top: 8px;

}

.right_t2 a{

text-decoration: none;

width: 43px;

height: 10px;

text-align: center;

border: 1px solid #DADADA;

padding: 8px 10px 7px 20px;

font-size: 12px;

color: #666;

float: left;

border-radius: 5px 5px 0px 0px;

}

.know{

background: url("img/down1.png");

float: right;

background-repeat: no-repeat;

width: 7px;

height: 4px;

margin-top: 4px;

}

.right_t2 a:hover{

color: #454545;

border-bottom: none;

font-weight: bold;

}

.right_t2 a:hover .know{

background: url("img/down2.png");

background-repeat: no-repeat;

}

.jieshao{

margin-top: 50px;

font-size: 12px;

}

.span3{

color: #999999;

margin-left: 50px;

}

.span4{

color: #999999;

margin-left: 60px;

}

.span5{

color: #999999;

margin-left: 20px;

}

.jianjie{

margin-top: 10px;

margin-left: 10px;

font-size: 12px;

}

.percent{

color: #FF0017;

margin-left: 35px;

}

.number{

color: #999999;

}

.number{

margin-left: 15px;

}

.cow{

color: #333333;

}

.content_right5{

border: 1px solid #F1F1F1;

width: 230px;

height: 380px;

border-radius: 8px;

margin-top: 12px;

margin-left: 20px;

display: inline-block;

}

.right_top02{

margin-left: 10px;

margin-top: 10px;

font-size: 13px;

}

.shangdian{

color: #DB001D;

}

.today{

margin-left: 4px;

}

.right_top02 img{

margin-left: 80px;

}

.jitui{

margin-left: 10px;

}

.sheng1{

margin-left: -47px;

}

.right02{

display: inline-block;

}

.right03{

display: inline-block;

font-size: 12px;

vertical-align: top;

}

.baihui{

color: #C6000F;

}

.right03 p{

line-height: 20px;

}

.right01{

margin-top: 5px;

border-bottom: 1px dashed #CBCBCA;

padding-bottom:5px

}

.content_right6{

border: 1px solid #F1F1F1;

width: 230px;

height: 170px;

border-radius: 8px;

margin-top: 20px;

}

.right_top03{

margin-top: 8px;

margin-left: 8px;

}

.du{

color: #DF001D;

font-size: 13px;

}

.all{

font-size: 13px;

}

.right_top03 img{

margin-left: 40px;

}

.jiudian{

margin-top: 8px;

margin-left: 8px;

}

.apple{

font-size: 14px;

margin-top: 3px;

}

.content_right7{

border: 1px solid #F1F1F1;

width: 230px;

height: 350px;

border-radius: 8px;

margin-top: 20px;

}

.fuhao{

color: #C3C3C3;

}

.you{

margin-left: 10px;

}

.content_right8{

border: 1px solid #F1F1F1;

width: 230px;

height: 360px;

border-radius: 8px;

margin-top: 5px;

}

.zhongcan{

margin-top: 5px;

margin-left: 10px;

border-bottom: 1px dashed #CBCBCA;

padding-bottom:10px

}

.jitui2{

display: inline-block;

line-height: 20px;

}

.pisa{

display: inline-block;

line-height: 20px;

}

.baihui1{

color: #C6000F;

font-size: 13px;

}

.zhongcan1{

font-size: 12px;

}

.div_bottoms{

width: 964px;

height: 80px;

border: 1px solid #D6D6D6;

background-color: #F9F9F9;

margin-top: 25px;

margin-left: -1px;

border-radius: 8px;

}

.bottom01{

text-align: center;

font-size: 13px;

margin-top: 20px;

}

.bottom01 span{

border-left: 1px solid #919191;

padding-left:10px

padding-right: 10px;

color: #454545;

}

.bottom02{

text-align: center;

font-size: 13px;

margin-top: 20px;

}

.bottom01 .about{

border-left: none;

}

.banquan{

color: #767676;

font-size: 12px;

word-spacing: 10px;

}

.hao{

color: #767676;

margin-left: 15px;

}

</style>

</head>

<body>

<div class="father">

<div class="head">

<div class="top">

<div class="t_left">

<span>切换城市:</span>

<a href="#">

<span>北京</span>

<span>上海</span>

<span>福州</span>  

<span>广州</span

<span>青岛</span

</a>

</div>

<div class="t_right">

<a href="">

<img src="img/jm.png" alt="">

<span>加盟100度</span>

<img src="img/jm1.png" alt="">

<span>店铺管理</span>

</a>

</div>

</div>

<div class="center">

<a class="option" href="#">

<div class="meishi"></div>

<p>美食</p>

</a>

<a class="option" href="#">

<div class="yedian"></div>

<p>夜店</p>

</a>

<a class="option" href="#">

<div class="gouwu"></div>

<p>购物</p>

</a>

<a class="option" href="#">

<div class="wenhua"></div>

<p>文化</p>

</a>

<a class="option" href="#">

<div class="xiuxian"></div>

<p>休闲</p>

</a>

<a class="option1" href="#">

<div class="logo">

<img src="img/logo.png" alt="">

</div>

</a>

<a class="option" href="#">

<div class="kongjian"></div>

<p>烧客空间</p>

</a>

<a class="option" href="#">

<div class="zhidao"></div>

<p>知道分子</p>

</a>

<a class="option" href="#">

<div class="baina"></div>

<p>白吃白拿</p>

</a>

<a class="option" href="#">

<div class="luntan"></div>

<p>烧客论坛</p>

</a>

<a class="option" href="#">

<div class="julebu"></div>

<p>企业俱乐部</p>

</a>

</div>

<div class="bottom">

<div class="b_top">

<a href="#">

  <span>搜店</span>

<span>地址</span>

<span>优惠券</span>

<span>全文</span>

<span>视频</span>

</a>

</div>

<div class="b_center">

<div class="c_left">

<input type="text"  class="text" placeholder="例如:荷棠鱼坊烤鱼 或 樱花日本料理">

<div class="c_r"

<img src="img/ss.png" alt="" >

</div>

</div>

<div class="c_right">

<a href="">

<p>金钱豹、大江南、湘水之珠、德瑀楼</p>

<p>荷棠鱼坊烤鱼、SOHO尚都、湘味楼...</p>

</a>

</div>

</div>

<div class="b_footer">

<img src="img/up.png" alt="">

<span class="xx">萱萱</span>

<span class="fz">5分钟前</span>

<span>写了一篇新文章:那些灿烂华美的瞬间...</span>

<img src="img/ud.png" alt="">

</div>

</div>

</div>

<div class="content_left">

<div class="content_left1">

<div class="left1_left">

<div class="left_t">

<img src="img/what.png" alt="">

<img src="img/xtb.png" alt="">

</div>

<div class="left_c">

<img src="img/dog.png" alt="">

</div>

<div>

<div class="left_1">

<img src="img/fct.png" alt="">

</div>

<div class="left_2">

<p>

<span class="dian">·</span>

<span>现场实录:杭州机场国航系统的崩溃</span>

</p>

<p>

<span class="dian">·</span>

<span>网友自拍国航航班晚点后的遭遇</span>

</p>

<p>

<span class="dian">·</span>

<span>【拍客】绝对最奢侈的航班 注意第41秒</span>

</p>

</div>

</div>

</div>

<div class="left1_right">

<div class="right1">

<p class="right1_l">

<span class="shop">HOT SHOP</span>

<span>红店铺</span>

<img src="img/down1.png" alt="">

</p>

<p class="right1_r">

<span class="shop">EW SHOP</span>

<span>新开张</span>

<img src="img/down2.png" alt="">

</p>

<div class="down">

<div class="down1">

<div class="down_l">

<img src="img/food.png" alt="" class="down1_t">

<img src="img/省.png" alt="" class="down1_b">

</div>

<div class="down_c">

<p>

<a href="#" class="yuzhou">御舟和涵珍园国际酒店</a>

</p>

<p>区域:朝阳/CBD</p>

<p>人均:180元</p>

<p>人气:12321</p>

</div>

<div class="down_r">

<img src="img/hot.png" alt="">

</div>

</div>

<div class="down1">

<div class="down_l">

<img src="img/food.png" alt="" class="down1_t">

</div>

<div class="down_c">

<p>

<a href="#" class="yuzhou">御舟和涵珍园国际酒店</a>

</p>

<p>区域:朝阳/CBD</p>

<p>人均:180元</p>

<p>人气:12321</p>

</div>

<div class="down_r">

<img src="img/hot.png" alt="">

</div>

</div>

<div class="down1">

<div class="down_l">

<img src="img/food.png" alt="" class="down1_t">

</div>

<div class="down_c">

<p>

<a href="#" class="yuzhou">御舟和涵珍园国际酒店</a>

</p>

<p>区域:朝阳/CBD</p>

<p>人均:180元</p>

<p>人气:12321</p>

</div>

<div class="down_r">

<img src="img/hot.png" alt="">

</div>

</div>

<div class="more">

<img src="img/more.png" alt="">

</div>

</div>

</div>

</div>

</div>

<div class="content_left2">

<img src="img/lan.png" alt="">

</div>

<div class="content_left3">

<div class="left3_l">

<div class="div_top">

<div class="div1">

<p class="lucky">LUCKY YODAY</p>

<p class="huodong">每日活动</p>

</div>

<div class="div2"

<p class="riqi">2014.2</p>

</div>

</div>

<div class="div_middle">

<div class="l1">

<img src="img/鞋.png" alt="">

</div>

<div class="l2">

<p>

<span class="date">07</span>

<span class="date">21</span>

<span class="zhuti">本日主题xxxxxxxx</span>

</p>

<p class="rongyu">迟到的荣誉——维米尔的写实主义风俗</p>

<p class="rongyu">画迟到的荣誉维米尔画迟到的荣誉维</p>

<p class="rongyu">米尔米尔米尔</p>

</div>

</div>

<div class="div_bottom">

<table border="1" cellspacing="30" cellpadding="20">

<tr>

<th>MON</th>

<th>TUE</th>

<th>WED</th>

<th>THU</th>

<th>FRI</th>

<th>SAT</th>

<th>SUN</th>

</tr>

<tr>

<td class="qian">29</td>

<td class="qian">30</td>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<td>6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td>13</td>

<td>14</td>

<td>15</td>

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

</tr>

<tr>

<td>20</td>

<td><img src="img/小鞋.png" alt=""></td>

<td>22</td>

<td>23</td>

<td class="ps0">

<img src="img/披萨.png" alt="" class="ps">

<img src="img/pisa2.png" alt="" class="ps1"></td>

<td>25</td>

<td>26</td>

</tr>

<tr>

<td>27</td>

<td>28</td>

<td>29</td>

<td>30</td>

<td>31</td>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td class="qian">3</td>

<td class="qian">4</td>

<td class="qian">5</td>

<td class="qian">6</td>

<td class="qian">7</td>

<td class="qian">8</td>

<td class="qian">9</td>

</tr>

</table>

</div>

</div>

<div class="left3_right">

<div class="div_top1">

<div class="div3">

<p class="recommend">RECOMMEND</p>

<p class="tuijian">精彩推荐</p>

</div>

<div class="div4">

<img src="img/new.png" alt="">

</div>

<div class="div5"

<p class="best">BEST</p>

</div>

</div>

<div class="div_middle1">

<div class="div6">

<img src="img/nvren1.png" alt="">

<p class="quna">爸爸去哪儿~</p>

</div>

<div class="div7">

<div>

<img src="img/马赛克1.png" alt="">

</div>

<div>

<img src="img/马赛克2.png" alt="">

</div>

<div>

<img src="img/马赛克3.png" alt="">

</div>

</div>

</div>

<div class="div_bottom1">

<p>

<a href="">

<span>

<img src="img/购物车.png" alt="">

</span>

<span class="word">老店换新颜,丰泽园野田重张亮相...</span>

<span class="shuzi">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/文件.png" alt="">

</span>

<span class="word">生活中哪些商品的包装有缺陷野田</span>

<span class="shuzi1">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/购物车.png" alt="">

</span>

<span class="word">老店换新颜,丰泽园野田重张亮相...</span>

<span class="shuzi">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/文件.png" alt="">

</span>

<span class="word">生活中哪些商品的包装有缺陷野田</span>

<span class="shuzi1">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/购物车.png" alt="">

</span>

<span class="word">老店换新颜,丰泽园野田重张亮相...</span>

<span class="shuzi">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/文件.png" alt="">

</span>

<span class="word">生活中哪些商品的包装有缺陷野田</span>

<span class="shuzi1">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/购物车.png" alt="">

</span>

<span class="word">性感红唇妆 模特明星野田都爱...</span>

<span class="shuzi2">08/07/22</span>

</a>

</p>

<p>

<a href="">

<span>

<img src="img/购物车.png" alt="">

</span>

<span class="word">野田风野田 日本全能时尚设计美...</span>

<span class="shuzi1">08/07/22</span>

</a>

</p>

</div>

</div>

</div>

<div class="content_left4">

<div class="left4_left">

<div class="head">

<p class="left4_l">

<span class="shop">SUBWAY</span>

<span>地铁交通</span>

<img src="img/down1.png" alt="">

</p>

<p class="left4_r">

<span class="shop">MAP</span>

<span>生活圈</span>

<img src="img/down2.png" alt="">

</p>

</div>

<div class="body">

<img src="img/路线.png" alt="">

</div>

<div class="footer">

<div class="red"><span class="r">1</span>号线</div>

<div class="blue"><span class="b">2</span>号线</div>

<div class="yellow"><span class="y">13</span>号线</div>

<div class="orange"><span class="o">8</span>号线</div>

<div class="purple"><span class="p">5</span>号线</div>

</div>

</div>

<div class="div4_right">

<div class="head1">

<div class="head1_l">

<span class="bbs">BBS</span>

<span class="luntan1">论坛</span>

</div>

<div class="head1_r">

<img src="img/more.png" alt="">

</div>

</div>

<div class="body1">

<img src="img/画皮.png" alt="">

</div>

<div class="footer1">

<p class="xinyu">

<a href="">

<span class="bianhao">02</span>

<span class="guguai">保你没见过的古怪餐厅</span>

<span class="shishuo">世说新语</span>

</a>

</p>

<p class="xinyu">

<a href="">

<span class="bianhao">03</span>

<span class="guguai">保你没见过的古怪餐厅</span>

<span class="shishuo">世说新语</span>

</a>

</p>

<p class="xinyu">

<a href="">

<span class="bianhao">04</span>

<span class="guguai">保你没见过的古怪餐厅</span>

<span class="shishuo">世说新语</span>

</a>

</p>

<p class="xinyu">

<a href="">

<span class="bianhao">05</span>

<span class="guguai">保你没见过的古怪餐厅</span>

<span class="shishuo">世说新语</span>

</a>

</p>

<p class="xinyu">

<a href="">

<span class="bianhao">06</span>

<span class="guguai">保你没见过的古怪餐厅</span>

<span class="shishuo">世说新语</span>

</a>

</p>

<p class="xinyu">

<a href="">

<span class="bianhao">07</span>

<span class="guguai">保你没见过的古怪餐厅</span>

<span class="shishuo">世说新语</span>

</a>

</p>

</div>

</div>

</div>

<div class="content_left5">

<img src="img/lan.png" alt="">

</div>

<div class="content_left7">

<div class="div7_left">

<div class="head2">

<div class="head2_l">

<span class="advice">LIFESTYLE ADVICE</span>

<span class="zd">知道分子</span>

<img src="img/more.png" alt="" class="more1">

</div>

</div>

<div class="question_top">

<div class="tiaol"></div>

<a href="">

有人在问

<div class="question_xia"></div>

</a>

<a href="">

有人知道

<div class="question_xia"></div>

</a>

<a href="">

热门问题

<div class="question_xia"></div>

</a>

</div>

<p class="body4">

<span class="span1">标题</span>

<span class="span2">状态</span>

</p>

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span>[<span class="dian1">美食</span>]推荐几款性价比比较好的冰箱...</span>

<img src="img/dui.png" alt="">

</p>

</a>

<a href="">

<p class="biaoti1">

<span class="dian1">·</span>

<span>[<span class="dian1">购物</span>]生活中哪些商品的包装有缺陷</span>

<img src="img/guoqi.png" alt="">

</p>

</a>

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span>[<span class="dian1">休闲</span>]为什么我第一次进入保姆和宠物</span>

<img src="img/dui.png" alt="">

</p>

</a>

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span>[<span class="dian1">美食</span>]推荐几款性价比比较好的冰箱...</span>

<img src="img/guoqi.png" alt="">

</p>

</a>

<a href="">

<p class="biaoti1">

<span class="dian1">·</span>

<span>[<span class="dian1">购物</span>]生活中哪些商品的包装有缺陷</span>

<img src="img/guoqi.png" alt="">

</p>

</a>

<div class="div_footer0">

<p class="sousou">

搜搜谁知道:

<input type="text" placeholder="输入关键字" class="key">

<span class="img"><img src="img/go.png" alt=""></span>

</p>

</div>


</div>

<div class="div7_right">

<div class="head3">

<div class="head3_l">

<span class="hot">HOT</span>

<span class="hongren">红人烧客</span>

<img src="img/more.png" alt="" class="more11">

</div>

</div>

<div class="body3">

<a href="">

<img src="img/红图.png" alt="">

</a>

<a href="">

<img src="img/nv1.png" alt="">

</a>

<a href="">

<img src="img/nv2.png" alt="">

</a>

<a href="">

<img src="img/nv3.png" alt="">

</a>

<a href="">

<img src="img/nv4.png" alt="">

</a>

<a href="">

<img src="img/nv5.png" alt="">

</a>

<a href="">

<img src="img/nv6.png" alt="">

</a>

<a href="">

<img src="img/nv7.png" alt="">

</a>

<a href="">

<img src="img/nv8.png" alt="">

</a>

<a href="">

<img src="img/nv9.png" alt="">

</a>

<a href="">

<img src="img/nv10.png" alt="">

</a>

</div>

</div>

</div>

<div class="content_left8">

<div class="left8_left">

<div class="help">

<span class="help1">HELP</span>

<span class="help2">在线帮助</span>

</div>

<div class="problem">您有任何问题,都可以通过全国免费电话,或MSN在线客服与我们联系!</div>

<div class="phone0">

<a href="">

<span class="phone"><img src="img/phone.png" alt=""></span>

<span class="phone1">4006-100-516</span>

<span class="ren"><img src="img/ren.png" alt=""></span>

<span class="ren1">100du.com@live.cn</span></a>

</div>

<div class="what0">

<a href="">

<div class="what1">

<h4>用户帮助</h4>

<p>

<span class="dian3">·</span>

<span>金币是什么</span>

</p>

<p>

<span class="dian3">·</span>

<span>怎样查看我的等级</span>

</p>

<p>

<span class="dian3">·</span>

<span>怎么赚积分</span>

</p>

</div>

<div class="what2">

<h4>商户帮助</h4>

<p>

<span class="dian3">·</span>

<span>如何成为明星商户</span>

</p>

<p>

<span class="dian3">·</span>

<span>邮件推广</span>

</p>

<p>

<span class="dian3">·</span>

<span>论坛推广方法</span>

</p>

</div>

</a>

</div>

</div>

<div class="left8_right">

<div class="left8_top">

<span class="media">100DU IN THE MEDIA</span>

<span class="voice">媒体声音</span>

<span><img src="img/more.png" alt=""></span>

</div>

<div class="left8_content">

<div class="left8_c1">

<a href="">

<div class="left8_c2">

<p>

<img src="img/下图1.png" alt="">

</p>

</div>

<div class="left8_c3">

<p>

日本最大的财经杂志《钻石周刊》对100

</p>

<p>度享乐网的报道</p>

</div>

</a>

</div>

<div class="left8_c4">

<a href="">

<div class="left8_c2">

<p>

<img src="img/下图2.png" alt="">

</p>

</div>

<div class="left8_c3">

<p>

视频网站100度享乐网获网络视听许可证

</p>

</div>

</a>

</div>

<div class="left8_c5">

<a href="">

<div class="left8_c2">

<p>

<img src="img/下图3.png" alt="">

</p>

</div>

<div class="left8_c3">

<p>

互联网上的视频橱窗

</p>

</div>

</a>

</div>

<div class="left8_c6">

<a href="">

<div class="left8_c2">

<p>

<img src="img/下图4.png" alt="">

</p>

</div>

<div class="left8_c3">

<p>

享乐主义的机会

</p>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

<div class="content_right">

<div class="content_right1">

  <div class="load">

  <span class="load1">LOAD</span>

  <span class="load2">登陆</span>

  </div>

  <div class="register">

  <p>

  <label for="n">用户名:</label>

<input type="text" name="name" id="n">

<input type="checkbox" name="remmember" value="1">记住我

</p>

<p>

<label for="p">密&nbsp;&nbsp;&nbsp;&nbsp;:</label>

    <input type="password" name="pw" id="p">

    <input type="submit" value="登录" class="load3">

</p>

<p class="new1">

<span class="dian5">·</span>

<span>新用户注册</span>

</p>

<p class="new2">

<span class="dian5">·</span>

<span>忘记密码了</span>

</p>

  </div>

</div>

<div class="content_right2">

<a href="">

<img src="img/zhuanpan.png" alt="">

</a>

</div>

<div class="content_right3">

<a href="">

<img src="img/电脑.png " alt="">

</a>

</div>

<div class="content_right4">

<div class="right_t1">

<span class="coupons">COUPONS</span>

<span class="qiang">抢券儿</span>

<img src="img/more.png" alt="">

</div>

<div class="right_t2">

<div class="renqi"></div>

<a href="">

人气

<div class="know"></div>

</a>

<a href="">

推荐

<div class="know"></div>

</a>

<a href="">

最新

<div class="know"></div>

</a>

</div>

<p class="jieshao">

<span class="span3">商店名</span>

<span class="span4">省</span>

<span class="span5">打印</span>

</p>

<p class="jianjie">

<a href="">

<span class="dian5">·</span>

<span class="cow">老北京一尊皇牛</span>

<span class="percent">12%</span>

<span class="number">345</span>

</a>

</p>

<p class="jianjie">

<a href="">

<span class="dian5">·</span>

<span class="cow">老北京一尊皇牛</span>

<span class="percent">12%</span>

<span class="number">345</span>

</a>

</p>

<p class="jianjie">

<a href="">

<span class="dian5">·</span>

<span class="cow">老北京一尊皇牛</span>

<span class="percent">12%</span>

<span class="number">345</span>

</a>

</p>

<p class="jianjie">

<a href="">

<span class="dian5">·</span>

<span class="cow">老北京一尊皇牛</span>

<span class="percent">12%</span>

<span class="number">345</span>

</a>

</p>

<p class="jianjie">

<a href="">

<span class="dian5">·</span>

<span class="cow">老北京一尊皇牛</span>

<span class="percent">12%</span>

<span class="number">345</span>

</a>

</p>

</div>

</div>

<div class="content_right5">

<div class="right_top02">

<span class="shangdian">SHOP</span>

<span class="today">今日推荐</span>

<img src="img/more.png" alt="">

</div>

<div class="right01">

<div class="right02">

<a href=""><img src="img/鸡腿.png" alt="" class="jitui">

<img src="img/省.png" alt="" class="sheng1">

</a>

</div>

<div class="right03">

<p>

<a href="#" class="baihui">汉莱国际美食百汇</a>

</p>

<p>口味:创意中餐</p>

<p>区域:朝阳/CBD</p>

</div>

</div>

<div class="right01">

<div class="right02">

<a href=""><img src="img/鸡腿.png" alt="" class="jitui">

<img src="img/省.png" alt="" class="sheng1">

</a>

</div>

<div class="right03">

<p>

<a href="#" class="baihui">汉莱国际美食百汇</a>

</p>

<p>口味:创意中餐</p>

<p>区域:朝阳/CBD</p>

</div>

</div>

<div class="right01">

<div class="right02">

<a href=""><img src="img/鸡腿.png" alt="" class="jitui">

<img src="img/省.png" alt="" class="sheng1">

</a>

</div>

<div class="right03">

<p>

<a href="#" class="baihui">汉莱国际美食百汇</a>

</p>

<p>口味:创意中餐</p>

<p>区域:朝阳/CBD</p>

</div>

</div>

<div class="right01">

<div class="right02">

<a href=""><img src="img/鸡腿.png" alt="" class="jitui">

<img src="img/省.png" alt="" class="sheng1">

</a>

</div>

<div class="right03">

<p>

<a href="#" class="baihui">汉莱国际美食百汇</a>

</p>

<p>口味:创意中餐</p>

<p>区域:朝阳/CBD</p>

</div>

</div>

<div class="content_right6">

<div class="right_top03">

<span class="du">360°SHOP</span>

<span class="all">全景逛店</span>

<img src="img/more.png" alt="">

</div>

<div class="jiudian">

<img src="img/酒店.png" alt="">

<p class="apple">苹果雪梨排骨汤</p>

</div>

</div>

<div class="content_right7">

<div class="right_top02">

<span class="shangdian">SHOP</span>

<span class="today">折扣店</span>

<img src="img/more.png" alt="">

</div>

<div class="right01">

<div class="right02">

<a href="">

<img src="img/鸡腿.png" alt="" class="jitui">

<img src="img/省.png" alt="" class="sheng1">

</a>

</div>

<div class="right03">

<p>

<a href="#" class="baihui">汉莱国际美食百汇</a>

</p>

<p>口味:创意中餐</p>

<p>区域:朝阳/CBD</p>

</div>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">休闲</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">休闲</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">美食</span><span class="fuhao">]</span>老北京一尊皇牛</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">购物</span><span class="fuhao">]</span>老北京一尊皇牛</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">美食</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">美食</span><span class="fuhao">]</span>老北京一尊皇牛</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">休闲</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">休闲</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

</div>

<div class="content_right8">

<div class="right_top03">

<span class="du">COUPONS</span>

<span class="all">最新加盟</span>

<img src="img/more.png" alt="">

</div>

<div class="zhongcan">

<div class="jitui2">

<img src="img/鸡腿.png" alt="">

<p>

<a href="#" class="baihui1">汉莱国际美食百汇</a>

</p>

<p class="zhongcan1">口味:创意中餐</p>

<p class="zhongcan1">区域:朝阳/CBD</p>

</div>

<div class="pisa">

<img src="img/大披萨.png" alt="">

<p>

<a href="#" class="baihui1">汉莱国际美食百汇</a>

</p>

<p class="zhongcan1">口味:创意中餐</p>

<p class="zhongcan1">区域:朝阳/CBD</p>

</div>

</div>

<div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">休闲</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">休闲</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">美食</span><span class="fuhao">]</span>老北京一尊皇牛</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">购物</span><span class="fuhao">]</span>老北京一尊皇牛</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">美食</span><span class="fuhao">]</span>瀚茶缘(雍和宫店)</span>

</p>

</a>

</div>

<div class="you">

<a href="">

<p class="biaoti">

<span class="dian1">·</span>

<span><span class="fuhao">[</span><span class="dian1">美食</span><span class="fuhao">]</span>老北京一尊皇牛</span>

</p>

</a>

</div>

</div>

</div>

</div>

<div class="div_bottoms">

<div class="bottom01">

<a href="">

<span class="about">关于我们</span>

<span class="about">联系我们</span>

<span>版权声明</span>

<span>加入我们</span>

<span>问题反馈</span>

<span>友情链接</span>

<span>网站地图</span>

<span>视频索引</span>

</a>

</div>

<div class="bottom02">

<span class="banquan">Copyright © 2008 www.100du.com 100度享乐网 版权所有</span>

<span class="hao">京ICP证070374号</span>

</div>

</div>

</div>

</body>

</html>


HTMLCSS是构建网页和网页样式的核心技术。下面是一些HTMLCSS100个实际例子: 1. 创建一个简单的网页 2. 设置网页的标题 3. 插入图片 4. 创建一个链接 5. 设置文字的颜色 6. 调整文字的大小 7. 设置背景颜色 8. 创建一个列表 9. 设置列表的样式 10. 创建一个表格 11. 设置表格的边框 12. 调整表格的宽和高 13. 设置表格的背景颜色 14. 创建一个按钮 15. 设置按钮的样式 16. 创建一个导航栏 17. 设置导航栏的样式 18. 创建一个下拉菜单 19. 设置下拉菜单的样式 20. 创建一个表单 21. 设置表单元素的样式 22. 创建一个单行文本输入框 23. 创建一个多行文本输入框 24. 创建一个复选框 25. 创建一个单选按钮 26. 创建一个提交按钮 27. 创建一个重置按钮 28. 创建一个页面布局 29. 设置页面布局的样式 30. 创建一个响应式布局 31. 设置响应式布局的样式 32. 创建一个响应式导航栏 33. 设置响应式导航栏的样式 34. 创建一个响应式图片库 35. 设置响应式图片库的样式 36. 创建一个响应式表格 37. 设置响应式表格的样式 38. 创建一个响应式表单 39. 设置响应式表单的样式 40. 创建一个响应式按钮 41. 设置响应式按钮的样式 42. 创建一个响应式网页 43. 设置响应式网页的样式 44. 创建一个网页动画 45. 设置网页动画的样式 46. 创建一个瀑布流布局 47. 设置瀑布流布局的样式 48. 创建一个网页轮播图 49. 设置网页轮播图的样式 50. 创建一个网页图片画廊 51. 设置网页图片画廊的样式 52. 创建一个响应式图片画廊 53. 设置响应式图片画廊的样式 54. 创建一个网页背景视频 55. 设置网页背景视频的样式 56. 创建一个网页滚动效果 57. 设置网页滚动效果的样式 58. 创建一个网页登录界面 59. 设置网页登录界面的样式 60. 创建一个网页注册界面 61. 设置网页注册界面的样式 62. 创建一个网页404页面 63. 设置网页404页面的样式 64. 创建一个网页加载动画 65. 设置网页加载动画的样式 66. 创建一个网页弹出框 67. 设置网页弹出框的样式 68. 创建一个网页提示框 69. 设置网页提示框的样式 70. 创建一个网页警告框 71. 设置网页警告框的样式 72. 创建一个网页成功提示框 73. 设置网页成功提示框的样式 74. 创建一个网页错误提示框 75. 设置网页错误提示框的样式 76. 创建一个网页消息提示框 77. 设置网页消息提示框的样式 78. 创建一个网页确认提示框 79. 设置网页确认提示框的样式 80. 创建一个网页提醒框 81. 设置网页提醒框的样式 82. 创建一个响应式卡片布局 83. 设置响应式卡片布局的样式 84. 创建一个网页音频播放器 85. 设置网页音频播放器的样式 86. 创建一个网页视频播放器 87. 设置网页视频播放器的样式 88. 创建一个网页计数器 89. 设置网页计数器的样式 90. 创建一个网页进条 91. 设置网页进条的样式 92. 创建一个网页滑动条 93. 设置网页滑动条的样式 94. 创建一个网页评分器 95. 设置网页评分器的样式 96. 创建一个网页等比例图 97. 设置网页等比例图的样式 98. 创建一个网页图片标注 99. 设置网页图片标注的样式 100. 创建一个网页网格布局 101. 设置网页网格布局的样式 这些例子展示了HTMLCSS的实际应用,帮助开发人员更好地理解和掌握这两门技术。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值