随笔分类 -  CSS

[CSS]三栏自适应布局
摘要：方法一：绝对定位法 Document Left Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad Excepteur... 阅读全文
posted @ 2017-05-09 16:10 enginex 阅读(154) 评论(0) 推荐(0)
[CSS]两栏自适应布局
摘要：方法一：margin-left/right实现 Document box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片，包括张含韵妹子年轻时候的写真，具体可参加“CSS3 box-shadow盒阴影图形生成技术”一文。但是filter中的drop-shadow就只能抱歉了，我就是一锤子买卖。没钱也这么任性！说到... 阅读全文
posted @ 2017-05-09 14:32 enginex 阅读(1879) 评论(0) 推荐(0)
[CSS]解决父子元素margin-top重叠问题
摘要：问题代码： son方法一：父元素设置overflow:hidden son方法二：父元素设置border-top son方法三：父元素设置padding-top son方法四：父子元素间增加一个inline元素 son 阅读全文
posted @ 2017-05-06 10:57 enginex 阅读(2933) 评论(0) 推荐(0)
[CSS]图片、多行文本、多行文本与图片的水平垂直居中
摘要：图片垂直居中：IE8+支持方法1.box { line-height:300px; text-align:center;}.box>img { vertical-align:middle;}方法2：添加空元素 test 多行文本垂直居中：IE8+支持方法1：.box {line-height:300px;}.box>span { display... 阅读全文
posted @ 2017-05-05 16:33 enginex 阅读(785) 评论(0) 推荐(0)
[CSS]image下方多余像素问题解决
摘要：问题代码： Document 方法1：设置image的display为blockp { border:1px solid red; background:#eee; }#img2 { display:block; width:200px; height:200px; }方法2：修改image的vertical-align为非默认值（middle/top/bottom）... 阅读全文
posted @ 2017-05-05 09:30 enginex 阅读(297) 评论(0) 推荐(0)
[CSS]边框做三角形、background相关属性、雪碧spirit图、渐变gradient
摘要：一、边框做三角形 div1是空元素 #div1{ width:0px; height:0px; border:25px solid transparent; border-top-color:#f00; } #div1{ width:0px; height:0px; border:25px soli 阅读全文
posted @ 2017-05-04 15:56 enginex 阅读(452) 评论(0) 推荐(0)
[CSS]CSS添加方式、优先级、选择器、overflow、border、border-radius、box-shadow
摘要：一、使用CSS的方式 1.内联/行内样式： <divstyle="color:red;"></div> 2.内部样式表：定义在<head>中，对当前网页有效 <style> div { color:red; } </style> 3.外部样式表：引入css文件 <style> div { color 阅读全文
posted @ 2017-05-04 15:00 enginex 阅读(213) 评论(0) 推荐(0)