随笔分类 - CSS
摘要：语法： text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法：text-overflow: e
阅读全文
摘要：作者： 阮一峰 日期： 2015年7月10日 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新
阅读全文
摘要：.navbox{ border-right: 1px solid; border-image: -webkit-linear-gradient(#00569D , white , #00569D)1 10 1; /* 控制边框颜色渐变 */ border-image: -moz-linear-gra
阅读全文
摘要：网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各
阅读全文
摘要：使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border 使用3d旋转矩形，使之看起来像矩形
阅读全文
摘要：有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式
阅读全文
摘要：以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。 .box-container { 效果如下图：
阅读全文
摘要：All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser. （下面的所有内容只使用一个HTML元素。任何一种CSS都
阅读全文
摘要：很少会有人意识到，当浏览器绘制的border，会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色，其他边框色为透明色，这样我们就很容易制作出三角形，然后改变其大小来实现不同的效果。（最早发现使用border制作三角形是人物Eric Meyer的发现的）下面
阅读全文
摘要：/*定义页面基础CSS*/ body{ font-family: 'microsoft yahei',Arial,sans-serif; color: #EFEFEF; background: #222; text-align: center; margin-top: 50px;} /* 定义key
阅读全文
摘要：随着技术的发展，css也越发强大，css可以制作很多有趣的图形，让我们一起来看一下如何使用css制作一个八边形吧。 随着技术的发展，css也越发强大，css可以制作很多有趣的图形，让我们一起来看一下如何使用css制作一个八边形吧。 随着技术的发展，css也越发强大，css可以制作很多有趣的图形，让我
阅读全文
摘要：http://echarts.baidu.com/echarts2/doc/example.html 实例： http://echarts.baidu.com/echarts2/doc/start.html
阅读全文
摘要：Square(正方形) Rectangle(矩形) Circle(圆形) Oval(椭圆形) Triangle Up(向上的三角形) Triangle Down(向下) Triangle Left(向左) Triangle Right(向右) Triangle Top Left(左上) Triang
阅读全文
摘要：国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96
阅读全文
摘要：本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它
阅读全文
摘要：气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示： 拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>控制导航条最后一个标签样式的三种方法</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.
阅读全文
摘要：在平时写页面的过程中，常遇到要把小图标与文字对齐的情况。比如： 总结了两种方法，代码量都比较少。 第一种 对img设置竖直方向对齐为middle， 1 2 3 4 5 6 <div> <img src="" alt="" class="heart"> <span>1169</span> <img s
阅读全文
摘要：1.多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低： ！important的用户样式 ！important的作者样式 作者样式 用户样式 浏览器定义的样式 2. CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。 权重设定如下： html选择器，权重为1
阅读全文
摘要：.bottom_xf{ background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; position: fixed; bottom:0;}
阅读全文
