随笔分类 -  css

上一页 1 2 3 下一页
css中的莫名空白间隙
摘要：此时div和img直接有空白，在他们父元素设置font-size:0;就可以解决了 阅读全文
posted @ 2018-08-21 11:31 极客小乌龟 阅读(1074) 评论(0) 推荐(0)
html中radio、checkbox选中状态研究
摘要：我们在web页面开发中经常需要让单选框、复选框进行选中或者不选中的操作， 我们可以在元素中添加checked属性 或者添加checked="checked" 都可以让某个选项默认选中，单选框的如果有多个checked 会以最后一个为准。 来看一下我们刚开始初始化的时候。这里说明一下我们使用jquer 阅读全文
posted @ 2018-08-11 15:58 极客小乌龟 阅读(37845) 评论(1) 推荐(3)
CSS3的calc()使用
摘要：什么是calc()? 学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。 calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。 阅读全文
posted @ 2018-08-10 16:10 极客小乌龟 阅读(217) 评论(0) 推荐(0)
深入理解line-height
摘要：什么是行间距？ 古时候我们使用印刷机来出来文字。印刷出来的每个字，都位于独立的一个块中。 行间距，即传说中控制两行文字垂直距离的东东。在CSS中，line-height被用来控制行与行之间垂直距离。 不过，行间距与半行间距，还是取决于CSS中的line-height。那么，如何来使用line-hei 阅读全文
posted @ 2018-08-07 10:23 极客小乌龟 阅读(674) 评论(0) 推荐(0)
手指点赞动画
摘要：同时更换图片、放大图片、平移、旋转，然后延时清除动画 使用 阅读全文
posted @ 2018-08-06 10:45 极客小乌龟 阅读(294) 评论(0) 推荐(0)
自定义单选框radio样式
摘要：自定义单选框radio样式 女 男 阅读全文
posted @ 2018-08-01 14:34 极客小乌龟 阅读(1134) 评论(0) 推荐(0)
CSS动画 animation与transition
摘要：一、区分容易混淆的几个属性和值 先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。 CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋 阅读全文
posted @ 2018-07-26 14:38 极客小乌龟 阅读(960) 评论(0) 推荐(0)
使用CSS3的“transition ”属性控制长宽度的缓慢变化
摘要：有时候我们可能会想要改变某个资源信息的长宽度，比如改变某个div的宽度，而且需要让这个宽度缓慢改变，而不是突然就改变了。这时候你可能会想到使用jquery的animate()函数，不过这个方法既得引用jquery，又得使用函数，有点太简单粗暴了，今天介绍一种更为方便而且优雅的方法，那就是使用CSS3 阅读全文
posted @ 2018-07-24 19:10 极客小乌龟 阅读(3063) 评论(0) 推荐(0)
移动端水平一栏滑动预览效果
摘要：参考豆瓣电影的实现方式， css html： 阅读全文
posted @ 2018-07-17 09:41 极客小乌龟 阅读(162) 评论(0) 推荐(0)
html li标签前面添加图标三种方法
摘要：今天无聊写下这个例子，希望对初学者有帮助，代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4 阅读全文
posted @ 2018-06-16 20:36 极客小乌龟 阅读(9204) 评论(0) 推荐(0)
CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）
摘要：像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不 阅读全文
posted @ 2018-06-12 16:14 极客小乌龟 阅读(10280) 评论(0) 推荐(1)
子元素在父元素中垂直居中
摘要：方法一: 要求水平和垂直居中，可以是用margin：0 auto；和marggin-top:(父元素-子元素)/2 方法二： 要求子元素垂直居中，水平更加设计布局，可以使用定位，父元素relative，子元素absolute，并且子元素top设置50%，margin-top设置为子元素高的一半的负值 阅读全文
posted @ 2018-06-12 14:54 极客小乌龟 阅读(575) 评论(0) 推荐(0)
background-position详解
摘要：一.background-position:left top; 背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position: 阅读全文
posted @ 2018-06-07 15:42 极客小乌龟 阅读(8797) 评论(0) 推荐(1)
CSS3中为什么要清除浮动以及三种清除浮动（float）的方法
摘要：方法一：添加新的元素 、应用 clear：both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二：父级div定义 overflow: auto .over-flow{ overflow: auto; zoom: 1; 阅读全文
posted @ 2018-05-31 20:54 极客小乌龟 阅读(419) 评论(0) 推荐(0)
translate动画实例
摘要：translate 1 2 3 ... 阅读全文
posted @ 2018-05-18 16:03 极客小乌龟 阅读(276) 评论(0) 推荐(0)
position:sticky的兼容性尝试
摘要：问题 在这里主要介绍下关于css3草案的position：sticky属性的兼容。 目前前端的h5有个需求，就是“当页面上的若干个标题被拖动到视口的顶部时，则显示一个被定位到视口的顶部的tab标签，可对这个tab标签进行点击导航，并在某个特殊的情况下隐藏”。最简单粗暴的做法就是针对document. 阅读全文
posted @ 2018-05-18 15:52 极客小乌龟 阅读(6367) 评论(1) 推荐(0)
CSS中背景图片的background-position中的left top到底是相对于谁的？
摘要：在学习的时候遇到了如下问题： CSS中背景图片的background-position中的left top到底是相对于谁的，content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box 阅读全文
posted @ 2018-05-14 17:55 极客小乌龟 阅读(1237) 评论(0) 推荐(0)
CSS实现单行、多行文本溢出显示省略号（…）
摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如 阅读全文
posted @ 2018-04-18 16:18 极客小乌龟 阅读(453315) 评论(5) 推荐(10)
行高引起的行内块级元素间距
摘要：line-height 属性设置行间的距离（行高）。 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含 阅读全文
posted @ 2018-04-13 18:37 极客小乌龟 阅读(386) 评论(0) 推荐(0)
CSS动画总结效果
摘要：CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。 transform rotate 设置元素顺时针旋转的角度，用法是： transfor 阅读全文
posted @ 2018-04-11 17:29 极客小乌龟 阅读(712) 评论(0) 推荐(0)

上一页 1 2 3 下一页