HTML&CSS - 随笔分类(第3页) - Joanna Qian

CSS 语法和JavaScript 语法区别

摘要：盒子标签和属性对照CSS语法（不区分大小写）JavaScript语法（区分大小写）borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-left-colorborderLeftColorborder-left-styleborderLeftStyleborder 阅读全文

posted @ 2013-02-12 23:13 Joanna Qian 阅读(467) 评论(0) 推荐(0)

firefox的dl dt dd布局Hack

摘要：手头的一个项目中使用了dl dt dd模拟表格布局，在Chrome中一切看起来很完美，结果到IE和firefox中就完全面目全非。现总结如下：HTML结构如下：<div id="banner"> <img src="images/banner2.png" /> <dl> <dd>$445<br/><span class="banner-text">Full Economy Set</span></dd> <dd>$65<b 阅读全文

posted @ 2013-02-12 06:01 Joanna Qian 阅读(930) 评论(0) 推荐(0)

用!important解决IE和Mozilla的布局差别（转）

摘要：http://www.w3cn.org/article/tips/2004/91.html在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：IE中的效果Mozilla Firefox中的效果这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" 浮动模型的问题 ")。我一直没有解决这个问题，直到我翻译 " 表格对决CSS--一场生死之战 "时，作者的一个技巧提示帮我找到了解决的方法：用!important。!important是CSS1就定义的语阅读全文

posted @ 2013-02-11 06:11 Joanna Qian 阅读(238) 评论(0) 推荐(0)

常用CSS缩写语法总结（转）

摘要：http://www.w3cn.org/article/tips/2005/103.html使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:value1 value2 value3; 表示to 阅读全文

posted @ 2013-02-11 06:07 Joanna Qian 阅读(260) 评论(0) 推荐(0)

初学Data URI和MHTML

摘要：Data URI——也就是图片转成代码插入网页Data URIData URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入，目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中： data:[<MIME-type>][;charset="<encoding>"][;base64],<data> MIME-type：指定嵌入数据的MIME。其形式是[type]/[subtype]; 阅读全文

posted @ 2013-02-11 05:52 Joanna Qian 阅读(1389) 评论(0) 推荐(0)

CSS实现HTML元素透明的那些事(转)

摘要：转载自：http://dancewithnet.com/2009/09/06/css-opacity/前言：这段时间项目中都有透明、圆角、投影等要求，还必须是跨浏览器的——看来这是大多数现在网站普通应用，匆忙中也只是google、百度了各个的用法，直接拷贝到css文件中，没有仔细研究其原理，正好看到这篇文章，讲的比较不错仔细，转载转载！CSS3草案中定义了{opacity:<length> | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支阅读全文

posted @ 2013-02-11 04:43 Joanna Qian 阅读(400) 评论(0) 推荐(0)

CSS Sprites(CSS图像拼合技术)教程、工具集合(转)

摘要：转自：http://blog.bingo929.com/css-sprites-css-techniques-tools-tutorials.htmlCSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。下面是一些CSS Sprites的使用范例：Xing这个网站将一些按钮、图标以及LOGO做成了CSS Sp 阅读全文

posted @ 2013-02-11 00:04 Joanna Qian 阅读(405) 评论(0) 推荐(0)

A CSS Sticky Footer——CSS底部固定布局分析

摘要：摘自：http://paranimage.com/css-sticky-footer/先说我们为什么会使用到这个CSS底部固定布局解决方案:有这种情况：当正文内容很少时，底部位于窗口最下面。但当改变窗口高度时，会出现重叠问题。如下所述当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。下面是我找到的一个比较完美的阅读全文

posted @ 2013-02-10 23:17 Joanna Qian 阅读(1410) 评论(0) 推荐(0)

几种浏览器内核（百度百科）-转

摘要：几种浏览器内核（百度百科）浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。Trident：IE使用的内核，是微软在Mosaic代码的基础之上修改阅读全文

posted @ 2013-02-10 07:14 Joanna Qian 阅读(715) 评论(0) 推荐(0)

纯CSS无hacks的跨游览器多列布局(转)

摘要：转自：http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html翻译自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根据我的理解改了，让一些初心者更好理解。利用纯CSS创建一个等高多列的布局并不件易事，本教程将着重分析出现在多列布局的多个问题，然后为大家等来一个简单全游览器通吃的解决方法，不使用图片，脚本，CSS hacks并在最严格的XHTML 规范中都能通过验证。问题的症结所在如上图所示，由于各列的内容阅读全文

posted @ 2013-02-10 00:07 Joanna Qian 阅读(265) 评论(0) 推荐(0)

视差滚动(Parallax Scrolling)效果的原理和实现

摘要：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。可以先看看效果：http://www.ok-studios.de/home/一、什么是视差滚动？视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元阅读全文

posted @ 2013-02-08 04:38 Joanna Qian 阅读(37586) 评论(3) 推荐(10)

关于IE7 IE8兼容HTML5和CSS3的一种解决方案 (转）

摘要：转载至:http://blog.csdn.net/ixr_wang/article/details/70552271、添加到head里<!--[if IE 7]><script type='text/javascript' src='js/excanvas.js'></script><link rel="stylesheet" href="css/iefix.css" type="text/css" media="screen" />& 阅读全文

posted @ 2013-01-26 10:35 Joanna Qian 阅读(2183) 评论(0) 推荐(0)

CSS圆角Box的实现小结

摘要：一、先总结一下各种实现的方法全部浮动法如果一个CSS初学者写图片圆角效果，那么推荐使用全部浮动法，简单且容易上手。其原理就是左圆角左浮动，主体也左浮动，右圆角右浮动，外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动，且因背景图片全部平铺，所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。HTML代码如下：<div class="floatMethod"> <div class="left"></div> <div class="middle" 阅读全文

posted @ 2013-01-25 11:50 Joanna Qian 阅读(494) 评论(0) 推荐(0)

解决Div自适应高度的方法（转）

摘要：http://www.yutheme.cn/website/index.php/content/view/39/63.htmldiv高度自适应是个比较麻烦的问题，在朋友artery那里看到这个文章，帮我解决了不少问题，摘录下来:Div即父容器不根据内容自适应高度，我们看下面的代码：<div id="main"> <div id="content"></div></div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器ma 阅读全文

posted @ 2013-01-10 05:41 Joanna Qian 阅读(277) 评论(0) 推荐(0)

SASS用法指南（转）

摘要：http://www.ruanyifeng.com/blog/2012/06/sass.html一、什么是SASSSASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。二、安装和使用2.1 安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令： gem install sass然后，就可以使用了。2.2 使用SASS. 阅读全文

posted @ 2013-01-08 05:08 Joanna Qian 阅读(268) 评论(0) 推荐(0)

CSS选择器学习小结

摘要：前言：半途出家做Front End，以前只是大概知道点，现在就必须从头把css好好看看啦，呜呜~~~~~~一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含info的元素4.#footerid选择器，匹配所有id属性等于footer的元素二、多元素的组合选择器序号选择器含义5.E,F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔6.E F后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔7.E > F子元素选择器，匹配所有E元素的子元素F8. 阅读全文

posted @ 2012-11-20 02:54 Joanna Qian 阅读(449) 评论(0) 推荐(0)

CSS中的居中对齐——CSS禅意花园读书笔记 (转）

摘要：1.使用自动外边距实现居中CSS中首选的让元素水平居中的方法就是使用margin属性——将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：{ div#container{ margin-left:auto; margin-right:tuto; width:168px; }}此方法要求IE浏览器版本不能低于6.0。2.使用text-align实现居中另一种实现元素居中的方法是实用text-align属性，将该属性值设置为center并应用到body元阅读全文

posted @ 2012-11-19 08:19 Joanna Qian 阅读(516) 评论(0) 推荐(0)

CSS网页制作技巧:图片的自适应居中和兼容处理(转）

摘要：http://www.webjx.com/css/divcss-33180.html前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系：假设容器大小为200像素*200像素，图片的宽为x 像素，高为y 像素，则：当x<=200,y<=200时，图片位于容器中的中间，即水平居中和垂直居中，显示在容器的图片大小为：宽=x，高=y ；当x>200 阅读全文

posted @ 2012-10-15 02:59 Joanna Qian 阅读(908) 评论(0) 推荐(0)

瀑布流布局浅析+常用插件介绍（转&改编）

摘要：http://ued.taobao.com/blog/2011/09/14/waterfall/“瀑布流布局”随着pinterest网的流行而出名，现在国内使用这种风格布局的网站也越来越多，比如说Mark之，蘑菇街，点点网，哇哦等等。如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通阅读全文

posted @ 2012-10-05 09:51 Joanna Qian 阅读(535) 评论(0) 推荐(0)

CSS IE7 IE6 Firefox多浏览器兼容(转&摘）

摘要：http://www.keephelp.com/css/divcss-ie7-ie6-firefox-1/在理想的环境中，编写正确的CSS会在支持CSS的每个浏览器中正常工作。不幸的是，我们并不是生活在理想的世界中，浏览器有不少的Bug和不一致的地方。为了创建能够在各种浏览器上显示相同样式的页面，CSS开发人员需要发挥创造性。通过利用Bug(hack)和未实现的CSS，开发人员能够选择性地对不同浏览器应用不同地规则。“招数Hack”和“过滤器”是CSS开发人员地强大工具。但是，正因为功能强大，使用时应该谨慎。了解各种常用招数Hack以及他们地工作原理确实很重要。但是，了解在什么时候应用他们以及阅读全文

posted @ 2012-10-04 10:51 Joanna Qian 阅读(354) 评论(0) 推荐(0)

随笔分类 - HTML&CSS