随笔分类 - CSS
摘要：最好css2，css3都给出解决方案，效果如下： 最好css2，css3都给出解决方案，效果如下： 最好css2，css3都给出解决方案，效果如下： CSS2 只能使用div和ul进行模拟了，结构很简单，具体可参考Alice的 button-dropdownCSS3 可以使用CSS3的属性appea
阅读全文
摘要：介绍下css 字间距，使用css来控制字与字之间距离，也叫css字间距方法。 使用到的css样式属性单词text-indent抬头距离，letter-spacing字与字间距。 Css字间距、div css字符间距样式实例1、text-indent设置抬头距离css缩进即对，对应div设置css样式
阅读全文
摘要：给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0
阅读全文
摘要：前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。 text-shadow还没有出现时，大家在网页设计
阅读全文
摘要：这篇文章主要介绍了强制文本在一行内显示，多余字符使用省略号，设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。 复制代码 代码如下: <div
阅读全文
摘要：关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of
阅读全文
摘要：使用 iPhone 上的浏览器去浏览网页的时候，按钮总是显示超大圆角的样式，显得超级恶心，但是我们自己定义 border-radius 也没有效果，经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式。 input {-webkit-ap
阅读全文
摘要：页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法 登录条：loginBar 标志：logo 侧栏：sideBar 广告：banner 导航：nav 子导航：subNav 菜单：menu 子菜单：subMenu 搜索：
阅读全文
摘要：1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。 * 不赞成 - color:#f3a; * 建议用 - co
阅读全文
摘要：由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险 一、*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.or
阅读全文
摘要：零、世间的道理都是想通的 在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。 在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突
阅读全文
摘要：一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱
阅读全文
摘要：每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度
阅读全文
摘要：:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择： :nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0开始计算*/ :nth-child(n*length)/*n的倍数选择，n从0开始算*/ :nth-
阅读全文
摘要：#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;} #trian
阅读全文
摘要：使用rem 然后根据媒体查询实现自适应。跟使用JS来自适应也是同个道理，不过是js更精确一点。使用媒体查询： html { font-size: 62.5% } @media only screen and (min-width: 481px) { html { font-size:94%!impo
阅读全文
摘要：px 在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小（虽然一般人不会去改变浏览器字体大小），这时会使用我们的Web页面布局被打破，这时就提出了使用“em”来定义Web页面的
阅读全文
摘要：这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。 什么是弹性布局？ 用户的文字大小与弹性布局 用户的浏览器默认渲染的文字大小是“16px”，换句话说，
阅读全文
摘要：用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari： IE: filter:alpha(opacity) Mozilla: -moz-opacity Safari: -
阅读全文
