一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。 复制代码代码如下:Example Source Code： /* --------------------------------- Site: Site name Author: 52CSS.com Updated: Date and time Updated by: Name --------------------------------- */ 二、包括公用颜色标记 复制代码代码如下:Example Source Code： /* --------------------------------- COLORS Body background: #def4...
效果：http://hovertree.com/texiao/css3/20/效果图：代码如下：<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3鼠标悬停图片上浮显示描述特效 - 何问起</title><base target="_blank"/><link rel="stylesheet" type="text/css" href="http://hovertree.com/texi...
去除浮动.clearfix:after{content:"",display:block;clear:both; }内盒子模型（之前讲过浏览器默认的是context-box标准盒子模型，但是最好用的还是内盒子模型，内盒子模型的width和height是包括border和padding的，往一个宽高固定的内盒子添加padding和border，本身的width不会改变，是原本的内容区域被减少了）*{box-sizing: border-box; }清洁自带的样式( 只是粗略的做清洁，想要完全清楚默认样式，可以百度 normalize.css )*{pa...
有时会从网上下载一些css压缩文件，打开后所有代码都在一行，不利于阅读，通过css format插件，能快速展开代码，方便阅读。参考：Sublime Text 上最好用的 CSS 格式化插件 —— CSS Formatcss format 下载：https://github.com/mutian/Sublime-CSS-Format，下载后解压到sublime Packages目录下,菜单栏preference-->Brower Packages 安装css format插件后，选择代码，菜单栏Edit-->css Format-->Expanded,展开代码. 原文：http:/...
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html： 复制代码代码如下:<div id="pyramid"> <div></div> </div> css： 复制代码代码如下:<style type="text/css"> #pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { po...
html表单输入框css样式美化源代码，响应鼠标动作 原文：html表单输入框css样式美化特效源代码下载 源代码下载地址：http://www.zuidaima.com/share/1550463335926784.htm 源代码截图：原文：http://blog.csdn.net/springmvc_springdata/article/details/38975963
奥运五环把奥运五环做成一个浮动，总是位于屏幕中央的效果。难点定位的练习 position ：fixed位于body中间的时候 left：50%；top:50%;css内部样式表的使用 style="text/css"方法使用border-radius: 50%再加上z-index设置层叠关系首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。设计须知div的作用:div是一个块级元素。它可以将html分割成独立的、不...
1.区别IE和非IE浏览器CSS HACK代码 #divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」【示例】： #divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} 【说明】：因为IE系列浏览器可读「\9」，而I...
<html><head><title>河北礼品公司</title></head><style> #test {border:1px solid #ccc;background:#fff;padding:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}</style><body><div id="test">我是一只怎么也飞不动的小鸟~<br>请使用火狐或Chrome测试!</div></body></html> 原文：http://www.cnblogs.com/youtianxia/p/3833529.html
项目开始常用CSS样式重置body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,th,tr,td,dl,dt,dd,img,div,input,textarea,select{margin:0;padding:0;border:0;} body{font-size:12px;font-family:"SimSun","宋体","Arial Narrow";}table{border-collapse:collapse;border-spacing:0} select,input,img,select{vertical-align:middle;} ul, ol ,li{ list-style:none; } em, b,i { font-style:normal;font-weight:100; } a { text-dec...
前段时间论坛搞的那话题貌似后面没人讨论了，也没想跟贴了，自己也不是很专业，SO，现在有点想法就放这儿来。虽然那贴后来没人跟了，嘿嘿，不过我倒是这几天一直在想，在想讨论下去还会讨论出怎么个写/排法。其实CSS代码的写法还以考虑一下属性，也就是属性分组：控制大小/控制颜色/控制定位……等。肯定不止这么几种了，具体的分组完全是看自己的感觉。比如说：你可以将宽度、高度、行高这几个属性放在一行，然后将字体颜色，字体...
body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */} 原文：http://www.cnblogs.com/imsomnus/p/4571057.html
css中注意下:target和transition部分就大致清楚了.代码中css的prefix为了简明只用了-moz-:target定位的元素对应于浏览器url最后的#xxx,xxx是元素的id,我们通过点击标题链接实现切换功能。以下是jsfiddle中得实际效果（firefox浏览或者修改css前缀）复制代码代码如下:<div class="accordion"> <div class="item"> <h3 class="title round"> <a href="#one">title one</a> </h3> <div id="one" class="content round"> <p>Lorem ipsu...
1、网站常见小图标调用方式： 将所有小图标做在一张大图上a.png，然后根据横纵轴来调用。 background:url("a.png") -23px -70px no-repeat;2、块级元素居中的常见写法： margin:0px auto;3、如何让超链接影响到整个块？ 将行内元素变成块级元素：display:block 4、文本框只留下面一条线： { border-width:0px; border-bottom:solid 1px #000; }5、html及css常用易混短语总结： 超出部分隐藏： overflo...
module.exports = {output: {filename: ‘[name].js‘,chunkFilename: ‘[name].chunk.js‘,path: path.resolve(__dirname, ‘../dist‘)} }在看别人写的webpack，output配置项，肯跟会碰到chunkFilename这样的配置项，那这个是什么意思呢？filename和chunkFilename有什么区别呢？首先看个例子 index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial...