H5系列静态页面总结

Posted 2021-03-17 qq1210611769

1、img父标签设置高度，如果容器没有设置高度的话，图片会默认把容器底部撑大几像素 -- 大概3px，给容器设置高度。

2、input标记换行后默认有一个间隙，设置float属性。input标记默认还有边框（2px），清除边框border:none/0。

3、搜索栏

<form>

<input placeholder="SEARCH..." type="text" class="txt"/>
<input type="button" class="btn" value="">
</form>

4、更换li的list-style

background:url(../images/gt.jpg) no-repeat 5px center;  （通过background-position-x、通过background-position-y调整列表符合的位置）

5、给容器设置text-align:center;可以让图片水平居中

6、取消表单框默认蓝色边框 outline:none;

7、overflow:hidden;可以解决margin-top的兼容问题，同时可清除浮动。

8、导航栏，字数不固定，因此每个li不能设置宽度，通过padding控制间隙。

9、两种省略号显示，第二种可以让文本显示两行。

代码：

    width: 280px;
    height: 22px;
    line-height: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* 实现p两行省略号显示 */
    
        height: 52px;
    line-height: 28px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;