随笔分类 -  CSS

上一页 1 2 3 下一页
攻略强制换行与强制不换行
摘要：强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是... 阅读全文
posted @ 2015-11-09 16:28 名字不能缺 阅读(485) 评论(0) 推荐(0)
CSS设计模式之三权分立模式篇
摘要：市面上我们常常会看到各种各样的设计模式书籍，Java设计模式、C#设计模式、Ruby设计模式等等。在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料，即使在网上找到类似内容，细细一看之下才发觉是南辕北辙。经过浩瀚文章搜索发掘下依旧一无所获之后，直接导致了我萌生一股写一篇CSS设计模式的冲动，... 阅读全文
posted @ 2015-11-09 16:28 名字不能缺 阅读(227) 评论(0) 推荐(0)
我知道你不知道的负Margin
摘要：现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一，许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。负margin理论：在说明什么是负margin之前，你得清楚margin是个啥么玩... 阅读全文
posted @ 2015-11-09 16:26 名字不能缺 阅读(256) 评论(0) 推荐(0)
用Margin还是用Padding
摘要：用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(margin)：元素周围生成额外的空白区。“空白区”通常是... 阅读全文
posted @ 2015-11-09 16:25 名字不能缺 阅读(124) 评论(0) 推荐(0)
不要告诉我你懂margin
摘要：你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……写css，你... 阅读全文
posted @ 2015-11-09 16:23 名字不能缺 阅读(255) 评论(0) 推荐(0)
css input[type=file] 样式美化，input上传按钮美化
摘要：我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的，后面文章会总结。思路：input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实... 阅读全文
posted @ 2015-11-07 09:42 名字不能缺 阅读(511) 评论(0) 推荐(0)
用纯CSS实现的箭头
摘要：div+css实现带三角箭头提示框链接：http://www.xuebuyuan.com/160534.html链接：http://www.admin10000.com/document/4089.html带三角箭头的提示框，就是下面所示：这是一个提示框通常我们都用图片来实现上面那个小三角，因为这样... 阅读全文
posted @ 2015-10-30 18:36 名字不能缺 阅读(694) 评论(0) 推荐(0)
css实现多行文本溢出显示省略号(…)全攻略
摘要：省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现... 阅读全文
posted @ 2015-10-29 10:03 名字不能缺 阅读(1843) 评论(0) 推荐(0)
css实现多行文本溢出显示省略号(…)全攻略
摘要：省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现... 阅读全文
posted @ 2015-10-17 16:55 名字不能缺 阅读(338) 评论(0) 推荐(0)
haslayout知多少
摘要：我们都知道浏览器有bug，而IE的bug似乎比大多数浏览器都多。IE的表现与其他浏览器不同的原因之一就是，显示引擎使用一个称为布局(layout)的内部概念。因为布局是专门针对显示引擎内部工作方式的概念，所以一般情况下不需要了解它。但是，布局问题是许多IE显示bug的根源，所以理解这个概念以及它如何... 阅读全文
posted @ 2015-10-13 20:09 名字不能缺 阅读(171) 评论(0) 推荐(0)
完美解决浮动IE6 7中的兼容性BUG问题
摘要：想要创建出漂亮的网页设计，除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码，漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错... 阅读全文
posted @ 2015-10-11 23:25 名字不能缺 阅读(255) 评论(0) 推荐(0)
CSS中zoom:1的作用 ，小标签大作用
摘要：CSS中zoom:1的作用兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。比如，本站使用DIV做一行两列显示，HTML代码：推荐文章CSS库吧原创CSS代码：.h_mainb... 阅读全文
posted @ 2015-10-09 11:17 名字不能缺 阅读(124) 评论(0) 推荐(0)
浮动清除方法大全及优缺点解析
摘要：对于一个web前端工程师来说浮动清除是我们的必修课，如何精益求精将代码写到极致，小编觉得我们必须花时间多对比、多揣摩。遍搜网络，清除浮动的方法大致有一以下几种方法：方法1：给父级div定义 高度代码如下：1 7 8 9 我是左浮动10 我是右浮动11 12 我是div2原理：通过设置父元素o... 阅读全文
posted @ 2015-10-09 09:52 名字不能缺 阅读(274) 评论(0) 推荐(0)
CSS3背景渐变。。。
摘要：CSS3 Gradient 分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有Mozilla（Firefox，Fl... 阅读全文
posted @ 2015-10-06 12:09 名字不能缺 阅读(180) 评论(0) 推荐(0)
css 背景色渐变兼容写法
摘要：最近在项目中，有很多地方都用到了线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，按照以前的做法是切 1px 图片然后 repeat-x。下面我将介绍如何用 css 来完成该效果。css3：linear-gradient比如：黑色渐变到白色，代码如下：.gradient{ backg... 阅读全文
posted @ 2015-10-05 14:17 名字不能缺 阅读(268) 评论(0) 推荐(0)
CSS3 自定义动画（animation）
摘要：除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画，利用纯 CSS 制作出像 Flash 一... 阅读全文
posted @ 2015-09-29 18:00 名字不能缺 阅读(2771) 评论(0) 推荐(0)
animate.css – 齐全的CSS3动画库
摘要：animate.css – 齐全的CSS3动画库演 示下 载简介animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等... 阅读全文
posted @ 2015-09-14 10:46 名字不能缺 阅读(477) 评论(0) 推荐(0)
CSS3 转换2D transform
摘要：Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动trans... 阅读全文
posted @ 2015-09-11 23:24 名字不能缺 阅读(346) 评论(0) 推荐(0)
不解释，分享这个base.css
摘要：@charset "utf-8"; /*! * @名称：base.css * @功能：1、重设浏览器默认样式 * 2、设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,d... 阅读全文
posted @ 2015-07-13 13:53 名字不能缺 阅读(207) 评论(0) 推荐(0)
display:inline-block
摘要：inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 ... 阅读全文
posted @ 2015-07-11 15:23 名字不能缺 阅读(159) 评论(0) 推荐(0)

上一页 1 2 3 下一页