中国电信|HTML的应用技巧（二）

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

1.单行文本溢出显示省略号如下图，当文本超出部分以省略号显示，如何实现这个效果呢？

第一步，设置文本在一行显示（因为默认的是，当文本宽度不够会进行自动换行）
方法：设置white-space: nowrap;

【中国电信|HTML的应用技巧（二）】第二步，将溢出的文字，进行隐藏
方法：设置overflow: hidden;

第三步，将溢出的文字，进行省略号显示
方法：设置text-overflow: ellipsis;

2.margin负值怎么用？我们要想实现如下图所示，上下边框颜色的粗细和中间颜色粗细一致的效果，怎么才能实现呢？

第一步，我们新建无序列表，并通过list-style将前面的圆点去除

第二步，通过设置浮动，将li标签一行显示（我们可以看到下图，中间的边框颜色更粗）

第三步，设置边框向左移动2像素

3.当鼠标经过li标签的时候，实现边框变色我们想要实现如下图的效果，当鼠标经过时，边框变为蓝色

一般的做法是这样的，直接将鼠标经过，设置相应的边框参数，但是我们通过设置发现，由于上一步，我们设置了margin负值，导致了右边的标签盖住了左边的边框：

解决方法：设置相对定位