随笔分类 - CSS基本属性
摘要：给table的父元素添加 .present{ max-width:1024px; height:auto; overflow:scroll; }
阅读全文
摘要：起因：想实现下面这样的效果的。 思路： 父div圆角，超出隐藏。 子div文字变色，箭头变色延迟 0.25s 。 父元素添加伪类，优化背景过度效果。 代码： html <div class="index-button"> <a href="javascript:;"> <h2>REQUEST A Q
阅读全文
摘要：了解background-attachment属性 值描述 scroll 背景图片随着页面的滚动而滚动，这是默认的。并不随着div内的滚动而滚动（比如文本大于元素高度时的滚动，背景图不动） fixed 背景图片不会随着元素或页面的滚动而滚动。 local 背景图片会随着元素或页面的滚动而滚动。 in
阅读全文
摘要：屏幕1920像素，设置img的width:1920px固定尺寸，图片不失真，设置width:100%图片失真 img{ display:block; /*img图片比父元素高度小几个像素，设置为块元素，使得父子div高度一致*/ width:100%; } 解决为了使图片自适应屏幕大小，设置widt
阅读全文
摘要：一、强制换行 word-break: break-all; 只对英文起作用，以字母作为换行依据。 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 white-space: pre-wrap; 只对中文起作用，强制换行。 解析： word-break:break-a
阅读全文
摘要：前言：图片设置了hover属性有遮罩，同时定位了一个h标签，由于布局原因，遮罩效果不能设置在图片和h标签的父元素上，这就导致，鼠标悬浮到图片上时有hover效果，但是漂到h文本上时，就无效果显示。 由上可知，这是因为h标签的定位原因，使堆叠顺序是大于img的原因。如果将h标签堆叠顺序改小，那它的文本
阅读全文
摘要：jQuery API 速查表 https://jquery.cuishifeng.cn/ CSS速查表 http://css.cuishifeng.cn/index.html
阅读全文
摘要：语法： box-shadow: h-shadow v-shadow blur spread color inset; 说明： h-shadow ：x-坐标值，阴影水平偏移量，允许负值，如果设为0，阴影就位于元素正后方，负值向左偏移，正值向右偏移 v-shadow：y-坐标值，阴影垂直偏移量，允许负值
阅读全文
摘要：ele:nth-of-type(n) 为什么叫 of-type ,就是说它是以“type”来区分的，也就是说ele:nth-of-type(n)指的是父元素下第n个ele元素。 ele:nth-child(n) 指的是父元素下第n个元素且这个元素是ele，若没有，则选择失败。 举例： <style>
阅读全文
摘要：兼容性写法： @font-face { font-family: '字体名'; src: url('字体名.eot'); /* IE9 兼容模式 */ src: url('字体名.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('
阅读全文
摘要：<div id="content"> <h3><a class="a1" href="#">a标签伪类link，hover，active，visited，focus区别</a></h3> </div> a.a1:link{ /*链接未被访问时的状态*/ color: blue; } a.a1:vis
阅读全文
摘要：一。隐藏加省略 单行文本： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行文本： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -
阅读全文
摘要：前言： grid网格布局，就是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 html <div class="content"> <div class="grid">1</div> <div class="grid">2</div> <div class="grid">3</d
阅读全文
摘要：1.字体背景全部透明 原始： h2 { color: rgb(0, 0, 0); background-color: rgb(244,67,54); opacity: 0.5; }如图： 2.背景透明文字不透明 h2 { color: rgb(0, 0, 0); background-color:
阅读全文
摘要：一、渐变效果 -> 线性渐变 方法： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 默认的是从上到下的线性渐变 #grad { height: 200px; background-image:
阅读全文
摘要：animation: name duration timing-function delay iteration-count direction; 值描述 animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间
阅读全文
摘要：一.清除ul自带左边间距 ul{ margin: 0; padding: 0; } 二.ul li 与li 之间隙 1.ul 设置font-size:0 ; 子li 设置字体大小 2.把li写到一起，不换行 如： <li>1</li><li>2</li><li>3</li> 三.text两端对齐 -
阅读全文
摘要：1.css实现三角形效果 #prev { display: block; width: 0; height: 0; border-bottom: 7px solid #4d4d4f; border-right: 10px solid transparent; border-left: 10px so
阅读全文
摘要：常用伪类选择器 IE7 IE8 IE9 :hover √ √ √ :focus × √ √ :first-child √ √ √ :last-child × × √ :first-of-type × × √ :last-of-type × × √ :nth-child(n) × × √ :nth-l
阅读全文
摘要：IE9以上是支持css3的，但是有的IE11的浏览器里面，文档模式默认值是7，而且是无法改变的，就会导致网页布局错乱 我的IE11的文档模式默认值是11 ，如下图 （打开页面按F12） 对于默认值是7的浏览器的解决办法 1.如果有页面代码，在header里加入如下： <meta http-equiv
阅读全文
浙公网安备 33010602011771号