CSS
风雨飘飘飘啊飘
这个作者很懒,什么都没留下…
展开
-
table中为tr设置border
在web开发过程中,我们有时候需要给tr一整行添加border,需要展示如下图的效果:但是通过设置tr的border并没有什么作用,比如下面的代码这样。tr{ border-top:0.01rem solid rgba(102,102,102,0.1);}因为table中的tr并不是一个单一的边框,这个时候我们需要给table设置border-collapse属性,将一行表格设置成...原创 2020-04-15 15:24:19 · 4551 阅读 · 0 评论 -
H5移动端键盘弹起影响页面布局的问题
在h5页面开发的时候,遇到input输入框弹起手机键盘,会把页面元素浮动从而影响布局的解决方法绑定input的失焦事件,将页面滚动到0的位置,即可恢复页面正常布局input_blur () { // document.body.scrollTop = document.documentElement.scrollTop - 1 setTimeout(() => { var...原创 2019-10-21 10:25:48 · 2487 阅读 · 0 评论 -
使用css3的linear-gradient线性渐变实现虚线图形
在开发过程中,有画出虚线的需求:如果使用border的dashed的属性,虽然也是虚线,但是不能控制每一个虚线的宽度可以使用css3的linear-gradient进行虚线的绘制:html:<div class="dashedBorder"></div>css:.dashedBorder{ height: 1px; background:l...原创 2019-08-08 20:21:13 · 2778 阅读 · 1 评论 -
css中使用伪类:not(first-child)过滤不能排除第一个元素的解决方法
需求效果:除了一个div元素下的第一个ul元素不使用这个样式使用:not(first-child)之后不能过滤掉第一个ul元素的样式,代码如下:<div class="listWrap"> <div v-for="(item,index) in items" class="sidebarmain" :key="index" > <div...原创 2019-07-31 10:28:34 · 14431 阅读 · 0 评论 -
img适配问题解决方法
在开发过程中,我们直接适配img图片有点麻烦,这里提供一个思路:将img放到background中渲染,将background-size设置为100%;只需要适配背景为img的元素的宽和高即可。...原创 2017-08-11 11:08:00 · 316 阅读 · 0 评论 -
使用fixed定位将元素(如按钮)悬浮在页面底部
在开发过程中,会遇到将一个按钮或其他元素一直悬浮在底部的需求。这个时候就需要用到fixed的定位方法:button{ bottom:0; //可以更改为自己的需求距离底部的长度 position:fixed;}拓展:在css中,元素的定位方式一共有5种,分别为1.relative:相对定位,在文档流中占据位置。2.absolute:绝对定位,使用left、...原创 2017-06-30 12:01:00 · 6644 阅读 · 0 评论 -
父元素设置高度为100%,解决其内部文字垂直居中问题
在父元素设置高度为100%的情况下,设置行高不起作用,因为设置行高只是对字号起到作用。解决方法:父元素的display设置为table。文本的容器设置 vertical-align:middle;display:table-cell;即可解决文本垂直居中的问题。...原创 2017-06-15 17:07:00 · 511 阅读 · 0 评论 -
css中hover设置边框后div中内容后移解决方法
<style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece;width:1202px;height:402px;}</style><body> <div class="demo"></d...原创 2017-06-14 10:08:00 · 963 阅读 · 0 评论 -
css英文长文字会自动换行的解决办法
遇到英文长文字浏览器会自动换行的问题解决方法iPhone5中显示不符合需求的效果如下图:代码修改:html部分:<p class=“words”>为优化“e周行”网站(网址:http://www.ezxing.com;以下简称“e周行”网站)的投标效率,“e周行”推出“e定投”投资服务</p>css部分.words{ word-w...原创 2017-05-26 10:04:00 · 621 阅读 · 0 评论