提要：对于传统的一般用css雪碧（css sprite）来搞，目前大部分网站已经主要字体图标 ，利用font+css 或者font+html 来开发，今天总结了一下，记录之~css sprite用背景图片定位，兼容性好，图标颜色丰富，但是对于网站缩放来讲，会使图片失真，也不容易维护；而当我们运用字体图标来做这个事的时候，好处就多多了（但是字体图标就是颜色单一，一般可忽略）1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库（...
梳理下平时常用css水平垂直居中方式～使用flex布局HTML<div class="box"><div class="child"></div> </div> CSS.box {width: 100vw;height: 500px;background: skyblue;display: flex;align-items: center;justify-content: center; }.child {width: 200px;height: 200px;background-color: deepskyblue; } 利用flex的alignItems:center垂直居中，justifycontent:center水平居中利用相对定位和绝对定位的margin:autoHTML<div class...
1/*IE滚动条颜色设置*/ 2body {3 scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ 4 scrollbar-track-color:#1589ce; /*底层背景色*/ 5 scrollbar-face-color:#27aeff; /*滚动条前景色*/ 6 scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/ 7 }8/*chrome滚动条颜色设置*/ 9body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...
前言 自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！一、滑动菜单1、代码： View Code2、效果 二、左侧带图标多级下拉菜单1、HTML代码： V...
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b...
认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p{font-size:12px;color:red;font-weight:bold; }使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 CSS样式的优势为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务...
翻译自：How to Develop with CSS很多web开发人员都知道CSS，但是他们很可能认为使用CSS的应用代码就是这样的：<p><span style="font-weight:bold;font-family:Arial">Welcome!</span></p>或者是这样的：<table class="middle grey"><tr><td class="darkTopHeader">Item #</td><td class="darkTopHeader">Qty</td><td class="darkTopHeader">Cost</td></tr><tr><td class="rowHeaderDrk">1341</td><td class="cellFieldDrk">3</td>...
1. 创建标签 document.createElement()2.$(tag).css(‘属性‘， 样式) 赋予标签属性样式3.设置定时器 改变位置 大小<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.container{padding: 50px;border: 1px solid #eeeeee;}.item{cursor: pointer;position: relative;width: 30px;}</style></head><body><div class="container"><div class="item"><span>赞</span></div></div><div class=...
a:link,a:visited{display:block;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none;}a:hover,a:active{background-color:#7A991A;} 原文：http://www.cnblogs.com/yufenghou/p/4201592.html
若元素没有设置宽高，那元素实际宽高是被内容撑起来，若元素自己有设置宽高，那实际面积于自己的盒子模型有关1、清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。（当父元素没有设置高度时，子元素又全浮动了，此时子元素脱离文档流而不占据位置，那就会出现父元素高度为0底下的盒子会跑上来。）2、清除浮动的方法 a、额外标签法（很少用，不想添加下无意义的标签）b、父级添加overflow方法...
《CSS3基本选择器》一、通配符选择器（＊）*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器（.className）四、id选择器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器（ＥＦ）.demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...
一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius 圆角4.2、边框图片border-image五、变形 transform5.1、rotate()2D旋转5.2、设置原点 transform-origin 5.3、平移 translate() 5.4、缩放 scale5.5、斜切扭曲skew 六、渐变七、透明7.1、opacity7.2、transparent与图片透明7.3、RGBA八、动画8.1、过渡动画8.2、...
通用版（基本适用于所有的页面）body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-w...
background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#bbb‘, endColorstr=‘#000‘); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image...
使用CSS3技术编写的图片圆角及阴影特效代码，与一般的图片阴影有些不一样，用CSS直接生成阴影，当然要比使用图片来修饰要好得多，图片的加载可能会影响到网页的加载，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.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=u...