随笔分类 -  CSS

摘要： 阅读全文

摘要：一般是这样： 表格的标题和内容分别由一个table组成，其中表格内容的table由一个class="table-body"的div包裹.css如下 效果如下： indexticker Citi Commodities Pre-Roll GSCI F0 CVICG0ER Citi Commoditie 阅读全文

摘要：规则1: background-position:xpx ypx; 为正值时：背景图片的左上顶点朝右下移动直至距离div的左上顶点为xpx ypx； 规则2: background-position:-xpx -ypx; 为负值时：背景图片的左上顶点朝左上移动直至距离div的左上顶点为xpx ypx 阅读全文

摘要：网上有很多漂亮的用css3实现的3d按钮，如'这个'、‘糖果色按钮’，今天练习了一下，喏，下面这样，兼容性不好。小黑子小虎子3d效果和发光效果都是利用box-shadow，也经常利用伪元素:after和:before为目标元素添加别的效果。box-shadow是可以叠加的，所以可以为一个元素设置多个... 阅读全文

摘要：例如节点结构如下： top bottom父元素高度为一定值（实际应用中是页面加载后再设置的值），子元素.top的高度为50px，要求.bottom的高度填充父元素剩余的所有高度。用.bottom{height:100%;}肯定不行，因为这样它的高度会等于父元素的高度，而不是小于。解决方法：同时... 阅读全文

摘要：利用css3实现一个半月形的西瓜，利用queue实现吃西瓜的动画。练习例子css3:1、圆角border-radius:100%;border-top-left-radius:5px;2、变形2D旋转：transform: rotate(25deg);(正角度为顺时针，负角度为逆时针)。3D旋转：t... 阅读全文

摘要：见清理浮动的几种方法以及对应规范说明总结一下：{clear:both;}设置了clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，使包含浮动元素的容器高度正常。所以适用于浮动元素后面容器之内有个非浮动元素，或是额外添加一个新的空元素。.after-clear-float :after{content:""; display:block; clear:both;}利用伪类添加新元素，原理同上，所以只适用于父容器最后一级子元素是浮动的，即浮动元素后面没有非浮动元素把它和父容器隔开。只是IE6/7不支持:after 伪元素。{overf 阅读全文

摘要：1、除去table默认的每个单元格带有的类似内边距的空白如设置了table和td的border后，是这个样子：，设置后变成这个样子：。2、除去radio和checkbox四种的一圈类似内边距的空白像下面这样：，设置background: transparent;后变成这个样子：。里面的豆沙绿是由于电... 阅读全文

摘要：下面是比较适合在测试页面中用来设置背景颜色的淡颜色，最好记住一些，dark、blue、red、green、gray、olive颜色较深。 阅读全文