CSS
大奋齐
身不受饥寒,天未曾负我;学无长进,我何以对天
展开
-
table边框设置
一、表格的常用属性基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、 bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的转载 2012-11-27 10:15:25 · 671 阅读 · 0 评论 -
CSS浏览器兼容性问题 归纳
1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。例如:HTML:CSS:[url=][/url].myDiv{转载 2013-09-03 15:57:40 · 8575 阅读 · 0 评论 -
CSS——31种选择器的应用
涨姿势了,选择器还能这么用!留着备用选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。 1. ** { margin: 0; padding: 0; } 星号选择器用于选取页面中的所有元素,可用于快速清除所有元素转载 2013-11-29 20:48:38 · 1142 阅读 · 0 评论 -
CSS命名规范——BEM思想(非常赞的规范)
特别声明:此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://csswizardry.com/2013/01/mindbemding-getting-you转载 2013-12-03 14:35:49 · 37920 阅读 · 5 评论 -
margin折叠的问题
前几天,有个电面问道了这个问题,抓紧补一下这方面的缺口。以下是一下网上收集的资料:margin折叠的问题,不是bug,而是正常的规则。在css2.1中,水平的margin不会被折叠。垂直margin可能在一些盒模型中被折叠: 1、在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠。 最终的margin值计算方法如下: a、全部都为正值,转载 2013-12-20 09:46:38 · 804 阅读 · 0 评论 -
CSS hack 收集
CSS hack:由于不同浏览器对CSS的解析不一样,会导致生成的页面效果不一样。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。CSS Hack大致有3种表现形式:CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。类内部Hack:比如 IE6能识别下原创 2013-12-24 09:38:06 · 1158 阅读 · 0 评论 -
前端那些事儿——中文乱码,网页中文乱码,网页乱码,块元素,内联元素
1、中文乱码出现中文乱码的原因:网页源代码与内容的编码格式不一样,例如一个是GBK,一个是utf-8解决方法:改成一样的编码。。。(注意:用IDE或者其他工具创建页面时的编码格式,跟 里面的字符集charset字符集格式保持一致就好了)=======================================================2、块元素与内联元素blo原创 2014-06-24 21:50:54 · 5352 阅读 · 0 评论 -
CSS3渐变
今天上Quora的时候,发现登陆页面的背景图挺带感,就F12了一下……学习学习CSS3的渐变效果,gradient渐变按照表现方式分为线性渐变(linear-gradient)和蛋性渐变,哦不,是径向渐变(radial-gradient),重复线性渐变(repeating-linear-gradient)和重复径向渐变(repeating-radial-gradient)原创 2014-10-11 11:03:19 · 1119 阅读 · 0 评论 -
CSS实现居中的7种方法
实现HTML元素的居中 看似简单,实则不然水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易。在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前至少有六种方法。本文由浅入深逐个介绍翻译 2014-11-28 15:56:12 · 36420 阅读 · 0 评论 -
CSS规范
CSS规范原创 2015-03-19 22:43:51 · 877 阅读 · 0 评论 -
替换元素、非替换元素、行内元素框模型
对于以前比较模糊的几个概念:替换元素、非替换元素、行内元素框模型,做了如下总结转载 2015-03-26 10:21:50 · 5051 阅读 · 1 评论 -
字体图标 icon font
Icon font 简介、优缺点、相关资源、使用方法原创 2015-03-16 22:09:21 · 37927 阅读 · 1 评论 -
关于iconfont
关于iconfont背景字面意思是字体图标,那么它到底是字体还是图标呢? 首先说一下字体是什么? 是字符,又是什么? 字符是文字与符号的总称,包括文字、图形符号、数学符号等。字符集是字符的集合。计算机如何显示这些字符呢? 把字符转换为整数,则成为编码字符集转载 2015-03-17 15:51:48 · 1754 阅读 · 1 评论 -
利用CSS定位背景图片 background-position
又如:这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽。那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下:我们知道在用图片作为背景的时候,css要转载 2013-02-27 08:44:48 · 716 阅读 · 0 评论 -
在div 底部显示背景图片
下面代码实现div层背景图片在底部显示:div {background:url(/images/bg.jpg)no-repeatfixed;background-position-y:bottom;}代码详解:div {background-image:url(/images/bg.jpg); /*设置div层的背景图片原创 2013-08-14 15:35:15 · 10074 阅读 · 0 评论 -
height、clientHeight、scrollHeight、offsetHeight区别
我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElemen转载 2012-11-27 19:26:15 · 521 阅读 · 0 评论 -
网页背景图片固定切自适应浏览器高度宽度
例如:body {padding: 0px;margin-top: 70px; margin-right: auto;margin-left: auto;background-attachment: fixed;background-repeat: no-repeat;background-image: url(http://pic.chinafilm.com/upimg转载 2012-11-18 12:39:33 · 1783 阅读 · 0 评论 -
css中font-family的中文字体
说到css中的font-family,相信很多朋友经常用,但不知道当你遇到引用中文字体的时候你会怎么写?最近特别关注了下,发现最常用的基本有三种类型:1、直接中文;2、英文形式;3、unicode码;前面两种形式很好理解,unicode码是什么意思呢?下面看基本定义:Unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码。它为每种语言中的转载 2012-11-21 13:11:20 · 1971 阅读 · 0 评论 -
页面局部打印
在需要打印的页面添加样式:.No_print{display:none;}.page {page-break-after: always;}不需要打印的内容如下: 不打印的内容原创 2012-12-11 16:57:26 · 536 阅读 · 0 评论 -
div 的边框显示不同效果
原创 2013-01-06 16:46:59 · 703 阅读 · 0 评论 -
struts2跳转后CSS和js失效的问题
在使用struts2的action执行后跳转到的jsp显示的时候其中的css不起作用,就拿我现在出问题的project为例:action如下:/users/userList.jsp(注:listUser的作用就是查出所有的用户,然后交给users下的userList.jsp显示出来。由于采用了spring,此处的"listUserAction"是applic转载 2013-01-23 09:49:29 · 780 阅读 · 0 评论 -
颜色搭配,典型配色方案
翻译 2013-01-10 13:48:33 · 8922 阅读 · 1 评论 -
js判断样式className和增加class删除class
function MyClass () {}MyClass.hasClassName = function(element, className) { if (!element) return; var elementClassName = element.className; if (elementClassName.length == 0) return fals转载 2013-01-15 15:03:54 · 14617 阅读 · 1 评论 -
CSS3简单练习-遨游浏览器LOGO
原来CSS3是这么回事,抓紧学啊CSS3* {margin:0; padding:0}.main {width:800px; margin:110px auto 0}.main_wrapper {width:240px; height:240px; border-radius:120px; background:#B1E4FF; border:2px solid原创 2013-01-30 10:22:58 · 871 阅读 · 0 评论 -
解决IE6 的 PNG透明 JS插件
DD_belatedPNG使用方法: DD_belatedPNG.fix('.tel,.head_content'); 括号里的是样式选择器,中间用逗号隔开JS文件下载地址:dd_png.js (未压缩版)dd_png-min.js (压缩版)原创 2013-04-17 15:06:51 · 7184 阅读 · 0 评论 -
li 样式 不显示 overflow:hidden 导致Li前面样式不见的解决办法
实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。解决办法:在ul或li内加入样式:list-style-position: inside; 即可。注意适当调节padding位置使之最适合。列表的样式:原创 2013-06-06 11:01:12 · 6408 阅读 · 0 评论 -
input 按钮背景,在IE6 IE7中不显示
首先现在使用IE6 IE7 等低级浏览器的人已经被时代抛弃,但是顾客就是上帝,时代抛弃他们,我们不能抛弃,但是求求你们快换个高级点儿的吧~废话少说css中加入display:block;就可以了:input.bookBtn{ display:block;border:none;width: 125px;height: 32px;overflow: hidden;cu原创 2013-08-19 14:25:47 · 2415 阅读 · 0 评论 -
div使用margin:0px auto 不居中
一般在将div居中显示时,使用css:divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:"cnbruce">margin: 0 auto 看看内容居中否 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“”声明文本居中,即 body{text-align:center} #cn转载 2013-08-21 16:14:08 · 1319 阅读 · 0 评论 -
CSS,font-family,好看,常用,中文,字体(更新中)
例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;例2(淘宝技术研发中心): font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;例3(加网 ): font: 14px/1.5 'Microsoft原创 2012-11-21 13:02:46 · 77970 阅读 · 0 评论 -
ul li 更改样式
去掉:............更改样式:none : 不使用项目符号disc : 默认值。实心圆 circle : 空心圆 square : 实心方块 decimal : 阿拉伯数字 lower-roman : 小写罗马数字 upper-roman : 大写罗马数字 lower-alpha : 小写英文字母原创 2012-11-26 17:49:19 · 3820 阅读 · 0 评论