码迷,mamicode.com
首页 > 其他好文 > 详细

H5系列一、静态页面总结

时间:2020-01-11 13:08:09      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:边框   height   round   lips   默认   cal   没有   webkit   标签设置   

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;
        

H5系列一、静态页面总结

标签:边框   height   round   lips   默认   cal   没有   webkit   标签设置   

原文地址:https://www.cnblogs.com/QQ1210611769/p/12090533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!