H5 页面写法

柔光的暖阳◎ 2022-09-28 11:37 315阅读 0赞

1.引入阿里巴巴 移动终端框架 flexable.js

2.引入 base.css

  1. 使用rem 单位

base.css:

html,body,div,p,span,em,a,img,ul,li,img,h1,h2,h3,h4,h5,h6,input,textarea,button{ padding: 0; margin: 0; border: 0 none;}
em,i{ font-style: normal; }
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
button,input,textarea{
-webkit-user-modify:read-write-plaintext-only;
}
input,textarea{ -webkit-appearance: none;}
input[type=number] {
-moz-appearance:textfield;
}
input[type=’number’]::-webkit-outer-spin-button,
input[type=’number’]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
a:hover{ text-decoration: none !important;}
html,body{ font-family: Arial,Microsoft YaHei !important;-webkit-overflow-scrolling: touch;}
/*public*/
/*字体大小设置*/

/*750下16px*/
[data-dpr=”1”] .font16 {
font-size: 8px;
}
[data-dpr=”2”] .font16 {
font-size: 16px;
}
[data-dpr=”3”] .font16 {
font-size: 24px;
}
/*750下18px*/
[data-dpr=”1”] .font18 {
font-size: 11px;
}
[data-dpr=”2”] .font18 {
font-size: 20px;
}
[data-dpr=”3”] .font18 {
font-size: 29px;
}
/*750下20px*/
[data-dpr=”1”] .font20 {
font-size: 12px;
}
[data-dpr=”2”] .font20 {
font-size: 22px;
}
[data-dpr=”3”] .font20 {
font-size: 32px;
}
/*750下22px*/
[data-dpr=”1”] .font22 {
font-size: 13px;
}
[data-dpr=”2”] .font22 {
font-size: 24px;
}
[data-dpr=”3”] .font22 {
font-size: 35px;
}

/*750下26px*/
[data-dpr=”1”] .font26 {
font-size: 15px;
}
[data-dpr=”2”] .font26 {
font-size: 28px;
}
[data-dpr=”3”] .font26 {
font-size: 41px;
}
/*750下24px*/
[data-dpr=”1”] .font24 {
font-size: 14px;
}
[data-dpr=”2”] .font24 {
font-size: 26px;
}
[data-dpr=”3”] .font24 {
font-size: 38px;
}

/*750下28px*/
[data-dpr=”1”] .font28 {
font-size: 16px;
}
[data-dpr=”2”] .font28 {
font-size: 30px;
}
[data-dpr=”3”] .font28 {
font-size: 44px;
}
/*750下30px*/
[data-dpr=”1”] .font30 {
font-size: 17px;
}
[data-dpr=”2”] .font30 {
font-size: 32px;
}
[data-dpr=”3”] .font30 {
font-size: 47px;
}
/*750下32px*/
[data-dpr=”1”] .font32 {
font-size: 18px;
}
[data-dpr=”2”] .font32 {
font-size: 34px;
}
[data-dpr=”3”] .font32{
font-size: 50px;
}
/*750下34px*/
[data-dpr=”1”] .font34 {
font-size: 18px;
}
[data-dpr=”2”] .font34 {
font-size: 36px;
}
[data-dpr=”3”] .font34{
font-size: 54px;
}
/*750下40px*/
[data-dpr=”1”] .font40 {
font-size: 20px;
}
[data-dpr=”2”] .font40 {
font-size: 40px;
}
[data-dpr=”3”] .font40{
font-size: 60px;
}
/*750下42px*/
[data-dpr=”1”] .font42 {
font-size: 23px;
}
[data-dpr=”2”] .font42 {
font-size: 44px;
}
[data-dpr=”3”] .font42{
font-size: 65px;
}
/*750下48px*/
[data-dpr=”1”] .font48 {
font-size: 21px;
}
[data-dpr=”2”] .font48 {
font-size: 42px;
}
[data-dpr=”3”] .font48{
font-size: 63px;
}
/*750下60px*/
[data-dpr=”1”] .font60 {
font-size: 30px;
}
[data-dpr=”2”] .font60 {
font-size: 60px;
}
[data-dpr=”3”] .font60{
font-size: 90px;
}
/*750下68px*/
[data-dpr=”1”] .font68 {
font-size: 34px;
}
[data-dpr=”2”] .font68 {
font-size: 68px;
}
[data-dpr=”3”] .font68{
font-size: 102px;
}

/*背景色*/
.bgcolor1{ background: #f5f5f5;}
.bgcolor2{ background: #ffffff;}
.bgcolor3{ background: #eff3f5;}

/*border*/
.border1bottom{ border-bottom: 1px solid #bec8d0;}

/*弹窗cover*/
.cover{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 10rem; background: url(../images/cover_bg.png); display: none;}
/*确认登录弹窗*/
.popup_cover{ width: 9.2rem; height: 5.6rem; background: #ffffff; position: absolute; top: 50%; left: 50%; margin-left:-4.6rem; margin-top: -2.8rem; border-radius: 0.1rem;}
.popup_title_c{ width: 100%; height: .96rem; position: relative;}
.popup_line{ width: 8.4rem; height: 0.7rem; padding: 0.2rem 0.4rem; position: relative;}
.popup_title{ line-height: .96rem; color: #3bb3bf; margin-left: .3rem;}
.popup_close{ position: absolute; right: .2rem; top: 50%; display: block; width: .6rem; height: .6rem; margin-top: -0.3rem; background: url(../images/close_icon.png); background-size: contain;}
.phonenum{ height: 100%; width: 6.2rem;}
.getcode{ display: inline-block; width: 2rem; height: .7rem; text-align: center; line-height: .7rem; border: 1px solid #bec8d0; float: right; color: #8ea09e; font-family: “microsoft yahei”;}
.popup_btn{ position: absolute; bottom: .4rem; left: 50%; width: 4rem; height: .96rem;margin-left: 0; line-height: .96rem; text-align: center; background: #3bb3bf; color: #ffffff; border-radius: .1rem;border: 1px solid #3bb3bf;}
.n_popup_btn{ position: absolute; bottom: .4rem; left: 50%; width: 4rem; height: .96rem; margin-left: -4.18rem; line-height: .96rem; text-align: center; background: #ffffff; color: #3bb3bf; border-radius: .1rem;border: 1px solid #3bb3bf;}

/*发送验证码*/
.identwait{ display: none;}

/*框架*/
.contain{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 10rem; margin: 0 auto; height: auto}
.contain_g{position: absolute; top: 7.09rem; left: 0; bottom: 0; right: 0; width: 10rem; margin: 0 auto; height: auto; transition: top 0.1s;-webkit-transition: top 0.1s; background: #fff;}

/*头*/
.header{ position: absolute; top: 0; left: 0; width: 10rem; background: #3BB3BF;}
.header_title{ display: block; width: 6.6rem; height: 1rem; text-align: center; margin: 0 auto; color: #ffffff; line-height: 1rem;}
.header_back{ position: absolute; left: 0; top: 0; display: block; width: 1rem; height: 1rem; background: url(../images/back_icon.png); background-size: contain;}
.html_content{ position:absolute; top:1rem; left:0; right:0; bottom:1.2rem; width: 10rem; overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch;}
.html_content_search{position:absolute; top:2rem; left:0; right:0; bottom:1.2rem; width: 10rem; overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch;} 

  1. /\*底部导航\*/

.footer{ position: absolute; display: table; left: 0; right: 0; bottom: 0; width: 10rem; height: 1.2rem; background: #ffffff; border-top: 1px solid #bec8d0;}
.footer_item{ display: table-cell; width: 2.5rem; height: 1.2rem; }
.footer_item span{ display: block; width: .58rem; height: .6rem; margin: 0.1rem auto 0; background-size: contain;}
.footer_item em{ color: #BDC7CF; display: block; width:100%; text-align: center;}
.footer_item:hover em,.selected em{ color: #3BB3BF;}
.icon1{ background: url(../images/icon_01.png) no-repeat;}
.icon2{ background: url(../images/icon_02.png) no-repeat;}
.icon3{ background: url(../images/icon_03.png) no-repeat;}
.icon4{ background: url(../images/icon_04.png) no-repeat;}
.icon5{ background: url(../images/icon_05.png) no-repeat;}
.footer_item:hover .icon1, .selected .icon1{ background: url(../images/icon_11.png) no-repeat; background-size: contain;}
.footer_item:hover .icon2, .selected .icon2{ background: url(../images/icon_12.png) no-repeat; background-size: contain;}
.footer_item:hover .icon3, .selected .icon3{ background: url(../images/icon_13.png) no-repeat; background-size: contain;}
.footer_item:hover .icon4, .selected .icon4{ background: url(../images/icon_14.png) no-repeat; background-size: contain;}
.footer_item:hover .icon5, .selected .icon5{ background: url(../images/icon_15.png) no-repeat; background-size: contain;}

发表评论

表情：
评论列表 （有 0 条评论，315人围观）

还没有评论，来说两句吧...

相关阅读

    相关 H5编写页面初探

            学过js、css和html后，总期望有一次实践的机会，本次通过实践H5页面编写，深深体会到前台开发 的不易，学习必须要引用到实践中才能暴露问题呢！      

    忘是亡心i忘是亡心i/ 0 赞/ 306 阅读

    相关 h5页面测试

    1. 工具 : 草料二维码 当我们写了一个h5页面时,在谷歌浏览器上显示正常，这时我们想在手机上模拟，这时我们可以利用草料二维码. 1.百度草料二维码 打开官网，

    野性酷女野性酷女/ 0 赞/ 374 阅读