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

 空一格   空2格

•   — “en空格”是根据字体排印学的计量单位命名，宽度是两个普通空格的宽度
•   — “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; // 返回参数值
    }