首页 前端知识 css高级技巧

css高级技巧

2024-02-25 11:02:57 前端知识 前端哥 776 747 我要收藏

1.元素的显示与隐藏

效果就是:

广告点叉叉能消失

鼠标移到客户服务会出现多余内容

1.1显示

虽然隐藏且位置不保留了了但是在我们的页面里面还是存在的

1.2visibility可见性

visibility:hidden用于隐藏元素,并且隐藏以后还沾有原来位置

1.3overflow溢出

overflow:visible就是默认值

如果盒子中的文字写得多就会溢出:(overflow:visible)

加上hidden就会使超出部分的文字隐藏 

overflow:scroll效果:(但是这个太丑了一般不用)

1.4总结 

2.css用户界面样式 

2.1鼠标样式cursor

在不同内容区域我们鼠标的样式可以做成不同的·:

小手就是让用户知道点一下是有效果的

2.2轮廓线

一般我们不需要表单点击后出现轮廓线,不好看

2.3防止拖拽文本域

当我们写了一个文本域点击以后就会出现轮廓线,所以我们先去除轮廓线

我们文本域有一个缺点就是可以随意拖拽,大小也是随便变化,就会影响我们后面的元素,

所以我们防止拖拽:

3.vertical-align垂直对齐

3.1图片、表单和文字对齐???

3.2去除图片底侧空白缝隙

图片底部和盒子间有一定的距离

这是因为图片和文字默认是基线对齐,虽然此处没有文字但是仍然留有空袭

所以要想没有缝隙,加一个对齐方式只要不是基线对齐就行

解决方法汇总:

 第二种解决方法是因为对于块级元素vertical-align是无效的,就不会有基线对齐的问题了

4.溢出的文字省略号显示

要实现这种效果三部曲:

强制在一行显示才有可能用.....

4.1white-space

4.2text-overflow文字溢出

5.css精灵技术(sprite)

5.1技术详解

这就是一张精灵图:

要想从这张图片上获取某一个图标到特定位置:

先量取某一图标正好所需要的盒子大小,然后对于背景操作

5.2总结

5.3制作精灵图

现在所有背景图片是分开的,我们先目测最大的图上右键查看图片属性,就可以看到图片的长和宽,在ps中ctrl+n新建一个文档,创建一个盒子包含这些所有的小背景,盒子要求:

创建好盒子后会出现:

然后把小背景图片都拿进来,文件-打开-打开所有背景图,把背景图拖到我们的盒子中

拖动到盒子里面后摆放好位置,再把背景隐藏:

变成:(第一个卡在左上角)

最后:文件-存储为-png格式(透明背景)

只有我们页面中小图标小背景图片多了,我们才需要做精灵图

6.滑动门

本来我们手中的背景图片大小是固定的,我哦们通过滑动门来实现自动改变大小

 

行内块元素是根据元素中的文字多少撑开的,没有文字行内块元素就不显示  

例子:

 

注意选择器,是a里面的span 

没有padding文字就会正好在圆角边框上 

7.拓展

7.1margin负值之美

对于网页中的坐标,往右边、下边是正值 

如果我们两个盒子相邻,两盒子边框重叠,就会出现:

我们为了让边框不加粗,我们可以通过让两个边框完全重叠,

但是给每个都加了margin最后盒子相对位置都不变,不是还是粗的?

我们浮动的盒子的特点是紧密相连,最左边的盒子向左移动出现空隙,由于浮动第二个盒子先贴上去再margin移动 

left实现行上重叠,top是实现列上 

我们还想实现当鼠标放在盒子上盒子边框变色:

但是我们后面的盒子边框压住前面会导致有的边框不变色 :

我们可以让鼠标经过 的盒子上升到最高层,定位的盒子是最高的

 最终:

我们要实现这种效果:

就要给橘色的部分加上绝对定位,那么我们的div就要加相对定位,div加上相对定位了,div也就到了上层,我们鼠标经过的时候橘色边框仍然会有部分不显示,这时我们就要用到index 

7.2css三角形之美 

这个小三角是通过我们css制作出来的

图形的代码:

 实现了四个三角形拼接

那么要做一个三角形:

 

要实现上面这个个效果代码如下:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2655.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!