随笔分类 -  CSS

页面中去除浮动 clear:both
摘要：今天写代码发现一个很奇怪的问题，发现上面的div加浮动（不管是否包含div）以后对下面div的浮动有所影响，通过去除浮动，搞定： 只需要在受影响的div中的样式中，加入clear:both即可 阅读全文
posted @ 2017-03-07 12:55 纸鸢&红豆·绿豆 阅读(233) 评论(0) 推荐(0)
利用svg描边+css3实现边框逐渐消失小动画
摘要：首先简单的描述一下svg中两个属性： stroke-dasharray：表示每个虚线的长短。 stroke-dashoffset：表示首个虚线的偏移量。 当两者都特别大的时候就会消失掉 直接上代码： 即可实现效果。 阅读全文
posted @ 2017-01-13 17:48 纸鸢&红豆·绿豆 阅读(1676) 评论(0) 推荐(0)
css定位学习经验记录
摘要：之前了解到css的定位position属性，常用的三种： position:absolute 1.当父元素定位为relative时，以父元素为起始坐标定位。 2.当父元素没有定位时，以body为起始坐标定位。 position:relative 1.以自身为起始坐标定位。 position:fixe 阅读全文
posted @ 2016-12-29 14:16 纸鸢&红豆·绿豆 阅读(138) 评论(0) 推荐(0)
用div加css做表格去掉外围边框
摘要：通过div做表格时想加上边框，并且想取点外围边框： <div class="cont"> <div class="row"> <a><div class="td"></div></a> <a><div class="td"></div></a> <a><div class="td"></div></ 阅读全文
posted @ 2016-12-28 14:35 纸鸢&红豆·绿豆 阅读(5192) 评论(0) 推荐(0)
利用css中的background-position定位图片
摘要：今天遇到一个新鲜的问题，如果定位一个设计师设计的图片。例子如下： 实现只显示每一个图标，主要是将图片等分，然后通过background-position来控制，注意等分的时候要减一，第一个百分比表示x轴，第二个表示y轴： background-position:0% 100%; 显示如下： back 阅读全文
posted @ 2016-12-28 13:24 纸鸢&红豆·绿豆 阅读(286) 评论(0) 推荐(0)
css3实现圆形逐渐减少动画
摘要：写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下： 1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻合）。 2.做出另一组div更换背景色即可实现反方向的旋转。 代码如下： 其中用到了一个css3, 阅读全文
posted @ 2016-12-20 16:16 纸鸢&红豆·绿豆 阅读(1047) 评论(0) 推荐(0)
绝对定位和相对定位
摘要：一、相对定位 1.相对于自身原有位置进行偏移。 2.仍处于标准文档流中（占据文档中的位置）。 3.随即拥有了偏移属性和z-index属性。 二、绝对定位 1.建立了以包含块为基准的定位。 2.完全脱离了标准文档流。 3.随即拥有了偏移属性和z-index属性。 4.div宽度会随着内容的改变而改变， 阅读全文
posted @ 2016-02-26 13:54 纸鸢&红豆·绿豆 阅读(332) 评论(0) 推荐(0)
对于div的右浮动会导致顺序会改变
摘要：当我们设置几个div右浮动的时候会出现顺序的改变，直接倒序了。解决的方法是在几个div外面加上一个大的div即可，但是里面的所有div都要左浮动才行，具体做法如下：div浮动 第一个div 第二个div 阅读全文
posted @ 2016-01-15 17:09 纸鸢&红豆·绿豆 阅读(991) 评论(0) 推荐(0)
块级元素和内联元素的区别（HTML）
摘要：请把下面二行代码放进body标签里： div1 div1 浏览器的呈现效果： div1 div1 这二个div占据了二行空间，叫做块级元素(block)。 再把下面二行代码也放进body标签里： span1 span2 浏览器的呈现效果： span1 span1 这两个span并列在一行... 阅读全文
posted @ 2015-12-18 17:08 纸鸢&红豆·绿豆 阅读(399) 评论(0) 推荐(0)
编写css相关注意事项以及小技巧
摘要：一、小技巧1.对于开始写网站css之前一般都要对css进行重置（养成写注释的习惯）：body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}body{fon... 阅读全文
posted @ 2015-12-16 21:47 纸鸢&红豆·绿豆 阅读(219) 评论(0) 推荐(0)
zoom作用
摘要：转自：http://www.cnblogs.com/top5/archive/2011/07/11/2103343.htmlcss中的zoom的作用1、检查页面的标签是否闭合不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们... 阅读全文
posted @ 2015-12-16 20:11 纸鸢&红豆·绿豆 阅读(116) 评论(0) 推荐(0)
表格边框css
摘要：table标签默认是没有边框的，但是如果我们自己加上边框boder:1px solid black;只有整个表格最外面有边框，那么如何给表格添加样式使得整个表格的tr、td都具有边框呢： 1 上面代码中最后还加上了CSS3 :nth-child() 选择器对奇、偶行采用不同的背景色，同时也可以采用公... 阅读全文
posted @ 2015-12-08 01:39 纸鸢&红豆·绿豆 阅读(156) 评论(0) 推荐(0)
CSS3实现动画
摘要：CSS3实现一个简单的动画 可以改变任意多的样式任意多的次数，用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成，为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 当动画为 25% 及 ... 阅读全文
posted @ 2015-09-26 16:44 纸鸢&红豆·绿豆 阅读(259) 评论(0) 推荐(0)