h5页面编写注意事项，自己遇到的小问题。

使用弹性盒子布局

.flex{display: flex;flex-direction: row;justify-content: center;align-items: center;
}
.flext{display: flex;flex-direction: column;align-items: center;justify-content: center;
}

查看更多关于弹性盒子的布局信息可以查看上篇内容

链接去掉下划线

<a href="./html/detailInfo.html?id='+item.id+'">了解详情 >></a>
<style>text-decoration: none;
</style>

注意事项

ul li去除样式

ul{     list-style-type:none;margin:0px;
}

ul li 下面控制第一个元素 :first-child

//css代码
ul li:first-child .topimg{margin: 0px auto;margin-bottom: 20px;
}

html使用的vue渲染方式

<ul><li v-for="items in item" class="active-case flext"><div class="topimg flex"><img src="" :data-src="items.caset" alt="">、</div><p class="name flex">{{items.name}}</p><img class="img" src="" :data-src="items.case" alt=""></li>
</ul>

空格

 或&#160

&ensp;空一格 &emsp;空2格

&ensp; — “en空格”是根据字体排印学的计量单位命名，宽度是两个普通空格的宽度
&emsp; — “em空格”大概是四个普通空格的宽度

input 输入框去掉点击之后的样式

border: none;去掉外边框

outline:none;消除聚焦时的外边框

图片不能撑满整个边框

原因在于块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。这也是为何把图片添加上display:block，或者父层级font-size、line-height能够解决这个的原因。

js获取form表单

上代码

<div id='form'><p>名字 <span style="color: red;">*</span></p><input name='name' type="text" required="true" alt="名字"><p>邮箱地址 <span style="color: red;">*</span></p><input name='email' type="text" required="true" alt='邮箱地址'><p>联系地址 <span style="color: red;">*</span></p><input name='message' type="text" required="true" alt='联系地址'>
</div>

            var arr = {};for (var i = 0; i < form.childNodes.length; i++) {var feled = form.childNodes[i];switch (feled.type) {case undefined:case 'button':case 'file':case 'reset':case 'submit':break;case 'checkbox':case 'radio':if (!feled.checked) {break;}default:if (feled.required) {if (!feled.value) {alert('请检查表单内容' + feled.alt)return;}}if (arr[feled.name]) {arr[feled.name] = arr[feled.name] + ',' + feled.value;} else {arr[feled.name] = feled.value;}}}return arr;

获取页面参数

/* 获取页面参数 */function getUrlParam(name) {let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象let r = window.location.search.substr(1).match(reg);  // 匹配目标参数if (r != null) return unescape(r[2]); return null; // 返回参数值}

h5页面编写注意事项，自己遇到的小问题。相关推荐

移动手机网站H5页面如何一键打开拉起微信小程序快速关注公众号功能？
为了方便自己或公司H5网站页面上,能够让用户一键点击按钮,拉起打开微信小程序.实现让用户快速使用微信小程序功能.让用户快捷方便的关注公众号.快速添加微信客服等功能.可以利用H5链接微信环境外打开微信小 ...
vue点击按钮怎么跳转图片_vue下的h5页面实现点击图片跳转小程序
第一步:配置签名和申明openTagList that.$api.getShareParam(params).then(data => { wx.config({ debug: false, a ...
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...
客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
使用css3d-engine.js编写简单的 360全景h5页面
什么是这里所说的360全景h5页面?查看下面的案例进行了解: 开发项目:http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.htm ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
html 怎么编写飞机移动,如何运用CSS3轻松实现H5页面里的飞行动画
原标题:如何运用CSS3轻松实现H5页面里的飞行动画随着h5页面的宣传优势,越来越的企业做活动开始追求移动端的展示效果像下图这样一个h5页面首屏,我们如果给元素添加了动画之后,看上去是不是活跃了许 ...
大佬带你详解Python反爬虫措施以及爬虫编写注意事项
Python爬虫开发:反爬虫措施以及爬虫编写注意事项反爬虫的几重措施 1.IP限制如果是个人编写的爬虫,IP可能是固定的,那么发现某个IP请求过于频繁并且短时间内访问大量的页面,有爬虫的嫌疑,作为 ...
uniapp h5 页面在移动端遮罩层禁止滚动 --安卓和ios端完美适配（只是测试了部分机型）
使用unipp 写h5 页面,在移动端,禁止遮罩层出现滚动问题. 直接在标签上面写上这个就可以了 @touchmove.stop.prevent="moveHandle" , ...
从零打造在线版H5页面生成器
想必你一定使用过易企秀或其它微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢? 从设计者的角度来看待问题,会有不一样的收获,本文将从零开始,使用node技术来设计实现一款精 ...

h5页面编写注意事项，自己遇到的小问题。

使用弹性盒子布局

链接去掉下划线

注意事项

ul li 下面控制第一个元素 :first-child

空格

图片不能撑满整个边框

js获取form表单

获取页面参数

h5页面编写注意事项，自己遇到的小问题。相关推荐

最新文章

热门文章

h5页面编写注意事项，自己遇到的小问题。

使用弹性盒子布局

链接 去掉下划线

注意事项

ul li 下面控制第一个元素 :first-child

空格

图片不能撑满整个边框

js获取form表单

获取页面参数

h5页面编写注意事项，自己遇到的小问题。相关推荐

最新文章

热门文章

链接去掉下划线