![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS和html
iris@前端
女青年
展开
-
flex实现三栏布局
flex实现三栏布局,两边固定,中间宽度自适应效果图html部分<div class="outer"> <div class="right"></div> <div class="center"></div> <div class="left"></div></div>CSS部分.outer{ display: flex; height: 100%;原创 2021-04-15 16:12:57 · 1585 阅读 · 0 评论 -
如何去掉网页一直点击出现蓝色背景的效果
这是浏览器默认选中的效果,双击就会出现,一般不做取消,如果测试提出问题,可以询问产品和交互的意见。 body, html{-moz-user-select: none; /*火狐*//*选中文字时避免出现蓝色背景*/ -webkit-user-select: none; /*webkit浏览器*//*选中文字时避免出现蓝色背景*/ -ms-user-select: none; /*IE10*//*选中文字时避免出现蓝色背景*/user-select: none;/*选中文字时避免出现蓝色背原创 2021-01-12 09:42:02 · 1323 阅读 · 0 评论 -
设置内容在固定高度内滚动
设置内容在固定高度内滚动在HTML布局中,我们希望当内容超出div的固定高度时,div中能够出现滚动条,实现内容在div的固定高度内滚动,其实实现方式很简单:只需要在需要滚动的div上面把高度固定死,然后加上overflow-y:auto;这个属性就可以:height:100px;overflow-y:auto;...原创 2020-12-30 11:12:17 · 4923 阅读 · 1 评论 -
hover控制元素的显示和隐藏不生效
hover控制元素的显示和隐藏不生效 原因:点击的元素和需要显示隐藏的元素不属于一个父级元素,如果想要hover伪类生效的话,点击的元素和显示隐藏的元素需要属于同一个父级元素。 例如:html部分<div class="box"> <button class="top">显示div</button> <div class="bottom">我显示了</div></div>CSS部分.box{width:200原创 2020-12-17 19:28:49 · 2432 阅读 · 1 评论 -
hover和active的区别
hover和active的区别hover:鼠标悬浮时的样式,类似于时间mouseover.hr-hover:hover { color: #196DE9 !important; cursor: pointer;}active:鼠标点击时候的样式,类似于事件click .processDes:active { background: rgba(150, 203, 255, 1); }一般写样式的顺序是:a:hover{};a:activ原创 2020-12-17 19:11:46 · 2182 阅读 · 0 评论 -
CSS自定义滚动条样式
CSS自定义滚动条样式代码很简单,只需要设置滚动条的宽度和高度,以及滚动轨道和滚动条的颜色即可。.类名::-webkit-scrollbar { /*滚动条整体样式*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.类名::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0原创 2020-12-15 20:42:24 · 160 阅读 · 0 评论 -
CSS常用的几种水平居中的方式
CSS常用的几种水平居中的方式html布局最常见的就是水平居中对齐,文字在div里面居中,div在div里面居中,图片在div里面居中等等,今天给大家总结几个CSS钟最常见的几种水平居中的方式,绝对好用!文字在div里面水平居中html部分<!DOCTYPE html><html><head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m原创 2020-12-15 20:31:38 · 582 阅读 · 1 评论