如家小例子

来源：互联网发布：js隐藏class 编辑：程序博客网时间：2024/04/30 04:16

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body{

width:100%;

height:100%;

}

.father{

width:100%;

}

headerimg{

width:100%;

}

section{

margin:0 auto;

width:80%;

}

.yuding{

font-size:15px;

font-weight:500;

text-indent:2em;

line-height:25px;

margin-top:4.148%;

}

.jian{

color:#FC6F50;

}

.yudingimg{

margin-top:-5px;

vertical-align:middle;

}

.load{

text-align: center;

margin-top:4%;

width:80%;

}

.loadimg{

width:42.1875%;

height:5.037%;

}

.son{

margin-top:7.1%;

text-align: center;

width:80%;

}

.sonimg{

width:80%;

}

.put{

width:56.25%;

height:3.259%;

background-color:#F6FBFE;

margin-top:1.48148%;

border:1px solid#D9E3EE;

padding-left:2px;

color:#C9D6E5;

}

.put1{

width:38.125%;

height:3.259%;

background-color:#F6FBFE;

margin-top:1.48148%;

border:1px solid#D9E3EE;

padding-left:2px;

color:#C9D6E5;

}

.yzm{

width:17.8125%;

height:3.259%;

color:#FFCC7C;

border:1pxsolid #D9E3EE;

margin-left:-5px;

background-color: white;

margin-top:1.48148%;

padding:4px 5px0px -1px;

}

.message{

font-size:13px;

text-align: center;

margin-top:1.48%;

}

.dian{

color:#FF2C41;

}

.message1{

width:27.5%;

height:3.70370%;

display:inline-block;

color:#6D6F70;

}

.zc1{

display:inline-block;

width:20%;

height:3.407%;

}

.share{

margin-top:1.48%;

}

.shareimg{

width:56.25%;

}

footer{

height:7.4074%;

width:100%;

color: white;

text-align: center;

background-color:#F18D32;

font-size:14px;

line-height:20px;

margin-top:1.48%;

}

.dinggou{

margin:0 auto;

width:59.375%;

}

</style>

</head>

<body>

<imgsrc="img/shangtu.png" alt="">

</header>

<pclass="yuding">使用全新掌上如家APP预订，会员折后<spanclass="jian">再减5元！</span>更有机会赢取<spanclass="jian">ipad mini2</span>，赶快下载预订吧！

<imgsrc="img/活动详情.png" alt="" ></p>

</section>

<imgsrc="img/苹果下载.png" alt="">

<imgsrc="img/安卓下载.png" alt="">

</section>

<imgsrc="img/话费.png" alt="" class="huafei">

<formaction="">

<div>

<inputtype="text" placeholder="姓名（4字内）" class="put">

</div>

<div>

<inputtype="text" placeholder="手机号码"class="put">

</div>

<div>

<inputtype="text" placeholder="验证码"class="put1">

<inputtype="button" value="获取验证码"class="yzm">

</div>

</form>

<divclass="message">

<pclass="message1">

<spanclass="dian">*</span>

<span>请填写真实信息以便享受会员权益</span>

</p>

<divclass="zc1">

<imgsrc="img/zc.png" alt="">

</div>

<divclass="share">

<imgsrc="img/f.png" alt="">

</div>

</section>

<p class="dinggou">如家官方微信：homeinns2012</p>

<p class="dinggou">全国订房电话：400-820-3333</p>

</footer>

</div>

</body>

</html>

0 0