![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML/CSS
文章平均质量分 54
css
zuo_zuo_blog
这个作者很懒,什么都没留下…
展开
-
overflow的属性添加的滚动条在移动端不起作用解决方案
滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)::原创 2021-12-23 16:55:47 · 2949 阅读 · 0 评论 -
BFC运行机制
一、BFC概念BFC 即 Block Formatting Contexts (块级格式化上下文),它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。二、触发条件body 根元素 浮动元素:float 除 none 以外的值 绝对定位元素:position (absolute、fixed) d原创 2021-04-07 16:14:14 · 260 阅读 · 0 评论 -
position的属性
1.position: relative;相对定位不影响元素本身特性,不会使元素脱离文档流,没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移),提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。) (两个都为定位元素,后面的会覆盖前面的定位)2.position: absolute 绝对定位使元素完全脱离文档流(在...原创 2021-04-06 17:42:43 · 12276 阅读 · 1 评论 -
css左右两列/左中右三列自适应布局
一、实现左边固定,右边自适应实现思路:1.先设置左边的宽度,让盒子左浮动;2.设置右边的盒子,margin-left: 左边盒子的宽度。<!-- 左边固定,右边自适应 --> <div class="content"> <div class="left"></div> <div class="right">12</div> </div>.left{ width: 400原创 2021-04-02 14:33:46 · 1177 阅读 · 2 评论 -
float浮动时引起父级塌陷的解决办法
一、父级塌陷的原因:网页布局时用到float浮动属性,只要父级元素下的子元素浮动了,肯定会影响父级元素的高度。假设父级元素下有十个子元素,我们无论是全部浮动还是只浮动了一个元素,都要对父级元素采取措施防止塌陷。如果你只浮动了一个子元素,让这个浮动的子元素高度在它同级里时最高的,运行一下会发现父级塌陷了。二、解决方法:1、给父级元素定义一个死高度不推荐这种方法。高度无法确定,不能从本质上解决问题。2、在最后一个子元素后加一个空的div,给他添加样式clear,清除两侧浮动这种方法也很有原创 2021-04-02 14:24:06 · 977 阅读 · 0 评论 -
学习CSS布局
margin: auto; #main { width: 600px; margin: 0 auto; }设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。...原创 2019-12-23 15:43:59 · 101 阅读 · 0 评论 -
animate实现让鼠标悬停一次只运动一次,而不是像带记忆一样悬停几次就运动几次。
这个的实现思路你可以在在animate()函数执行前加入 stop()函数,确保上一次函数执行完 。 具体代码如下 <script type="text/javascript">$(document).ready(function() { $("#box").mouseover(function(){ $("#box").stop().animate({heig...原创 2019-12-12 15:43:13 · 608 阅读 · 0 评论 -
jQuery制作卷轴效果(由中间向两边展开)
1.切图:我是将一个画轴原图切成4个部分,两个轴单独切出来,剩下的主体部分均分切开。2.html结构:前面4个div的背景图即是我们切好的4张图 <div class="content"> <div class="l-pic-index"></div> <div class="r-pic-index"><...转载 2019-12-10 09:45:15 · 1495 阅读 · 0 评论 -
CSS position属性
1.absolute:生成绝对定位的元素,相当于static定位以外的第一个父元素进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。2.fixed :生成固定定位的元素,相当于浏览器窗口进行定位3.relative:生成相对定位的元素,相对于其正常位置进行定位4.static:默认值,没有定位5.sticky:粘性定位,该定位基于...原创 2019-02-28 21:03:33 · 132 阅读 · 1 评论 -
垂直水平居中
1.盒子宽高已知<style> width:200px; height:200px; position: absolute; top:50%; left:50; margin-left:-100px; margin-top: -100px;</style>2.table-cell布局<style>/*父*/ display:table-cell; vertical-align: middle;原创 2021-01-31 17:21:32 · 69 阅读 · 0 评论 -
相对路径与绝对路径
1…/和…/和/三种路径的区别./表示当前目录…/表示父级目录/表示根目录2.绝对路径是指完整的网址假设图一中项目的网站域名为www.test.com,那么000.css的绝对路径应该是原创 2020-05-12 16:49:03 · 144 阅读 · 0 评论 -
清除浮动的几种方法
1.使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)<div class="box clearfix"> <div class="red">1</div> <div class="blue">2</div> <div class="yellow">3</div></...原创 2019-07-05 11:46:19 · 97 阅读 · 0 评论 -
百度富文本编辑器ueditor
百度富文本编辑器ueditor在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo,然后创建ueditor.html文件,引入百度编辑器,然后在html文件内引入,然后再用js实例化编辑器即可,代码如下: 1 2 3 4 5 6 7 8...转载 2019-03-24 15:39:19 · 2057 阅读 · 0 评论 -
文字居中问题
1.text-align:center2.padding-left,padding-right3.margin,定位原创 2019-01-27 21:30:01 · 467 阅读 · 0 评论 -
如何制作网页小图标favicon.ico
方法一:下载1.输入地址 www.略.com/favicon.ico 2.引入 <link href="favicon.ico" rel="shortcut icon"/>方法二:http://www.bitbug.net/在该网站中制作ico图标原创 2019-01-26 21:12:23 · 805 阅读 · 0 评论 -
HTML中让input等文本框不可编辑的方法
表单文本框只读,不可编辑方法1: onfocus=this.blur() 当鼠标放不上就离开焦点<input type="text" name="input1" value="中国" onfocus=this.blur()> 方法2:readonly <input type="text" name="input1" value="中国"原创 2018-12-07 12:02:47 · 2679 阅读 · 0 评论 -
select框默认样式去除(隐藏的小图标显示)
CSS代码/*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand { display: none; } .info-select{ width: 12%; margin-left: 64%; border: none; ...原创 2018-11-20 10:40:19 · 6648 阅读 · 0 评论 -
frameset元素使用
<frameset>标签对,它被用来组织多个窗口(框架)<!DOCTYPE html><html><head> <title></title></head> <frameset cols="25%,50%,25%"> <frame sty原创 2018-11-21 19:55:52 · 162 阅读 · 0 评论