css
橙子好
在IT里从硬件后台软件开发里扑腾直到遇到前端,一眼认定这就是我要的......为了更少的错过,修行在路上。
展开
-
巧用边框:使用三个div画出一个八卦图形
话不多说,先上图分析结构 按照正常的思路,在观看这个图形的时候,我们会想到这个图形是按照五个结构来通过颜色设置和形状设定以及定位进行安装的。 这个,我们其实只要使用三个div就可以画出这个八卦图形 首先创建三个div标签:<div id="box"> <div class="one"></div> <div class="two"></div原创 2016-12-23 23:19:33 · 1064 阅读 · 0 评论 -
IE下的圆角解决方案
当今网页设计里涉及到圆角的地方是非常多的,所以这也催生了CSS3里面的border-radius属性,但是让人头疼的IE8以及以下版本并不支持这一属性。以下是w3c手册里对该属性兼容性的解释:IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。 那么有没有什么在IE9-以下实现圆角呢?很多人都会想到点九切图平铺,这显然是一种方原创 2016-12-24 11:10:12 · 1155 阅读 · 0 评论 -
CSS文档流和非文档流下的宽度和高度问题总结
1、元素不设宽度时 a)第一种情况:元素为标准文档流元素时 i.子元素为默认情况下时 1.父元素设定宽度时,继承父元素的宽度; 代码如下: 效果如下: 2.父元素不设定宽度时,继承body的宽度; 代码如下: 效果如下: ii.子元素为相对定位时 1.父元素设定宽度时,继承父元素的宽度; 代码如下: 效果如下: 2.父元素不设定宽度时,继承body的原创 2016-12-24 12:25:24 · 1334 阅读 · 0 评论 -
CSS3中弹性盒子Flex使用
在介绍flex之前,先说一个面试时关于CSS布局常提到的问题,也就是三栏布局,左右两边固定,中间一栏自适应屏幕大小,如下效果: 以前常见的做法就是将左右两边绝对定位,定位到相应的位置,中间设置width:100%;然后在设置对应的padding-left和padding-right值。现在CSS3中提供了flex属性,也就是弹性盒子布局,这样就很好地处理上面的问题,具体代码如下:<!DOCTY原创 2017-03-22 22:02:48 · 351 阅读 · 0 评论