效果: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...
1、Object Oriented CSS (OOCSS)面向对象的 CSS。OOCSS 的想法首先要明白 CSS 的 “Object” 是个毛线玩意。CSS的样式是需要应用到页面的结构上的。通俗的讲就是需要应用到HTML标签上。比如一个页面上的一个区域、控件、标签等,就是一个 Object ,大部分情况下,这种 Object 肯定是可以复用的。常见的比如 Button按钮。视觉上就可能是一个图形按钮,然后我们可以在其上面添加各种样式,以获得我们想要的效果。Tag : button calss:...