黑马品优购项目的总结二

一，当有多个元素并列时，采用li然后浮动，高度塌陷的解决。

给父盒子增加清除浮动效果

.clearfix:after { 
    visibility: hidden; clear: both; display: block; content: "."; height: 0 } 

或者直接给父元素来一个：overflow：hidden。

二，同样是多个li并列，导致长度不够超出边界。变到下一行了。

如上图，三个li都有右边距，最后一个同样设置了。不想取消的话，可以把父盒子的宽度增加，使它能够在一行显示。
比如这里宽1200px，为了让它能一行显示，把父元素的ul修改为1250px。
然后最外面的祖父盒子来一个：overflow:hidden即可。

三，可以配合CSS3的过度动画制作一些人性化的动效细节

1，选中后为了让用户知道已经选中了，可以给图片增加动效，比如padding-left变化一些，这样，选中后图片会移动一下。然后增加动画，让这个移动来得更加平滑一些。

2，对于很小的输入框，可以让获得焦点之后变大，让用户好输入。

.page_skip input{ 
    display: inline-block; width: 46px; height: 30px; border: 1px solid #ccc; text-align: center; transition: all 0.5s; } 

变成：

.page_skip input:focus{ 
    width: 60px; border: 1px solid skyblue; } 

四，文本过长使用省略号：

需要设置3个属性：

.tab_con h5{ 
    white-space: nowrap; //一行显示文本 text-overflow: ellipsis; //截断部分省略号 overflow: hidden; //超出部分截断 } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/11096.html