无双

博学善思,自强不息

导航

统计

公告

随笔分类 - css+html

移动前端开发之viewport的深入理解
摘要: 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的we...阅读全文

posted @ 2014-07-30 09:59 无双 阅读(276806) | 评论 (61) 编辑

css选择器中:first-child与:first-of-type的区别
摘要: :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;sp...阅读全文

posted @ 2014-02-26 16:09 无双 阅读(20990) | 评论 (9) 编辑

css3动画简介以及动画库animate.css的使用
摘要: 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢。从广义上来讲,css3动画可以分为两种。过渡动画 第一种叫过渡(transition)动画,就是从初始状态过.阅读全文

posted @ 2013-11-05 19:17 无双 阅读(137626) | 评论 (33) 编辑

CSS布局奇淫技巧之--各种居中
摘要: 居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。 先来说几种简单的、人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都...阅读全文

posted @ 2013-10-28 17:17 无双 阅读(66986) | 评论 (37) 编辑

绝对定位时关于bottom的参照点的一些问题
摘要: 关于绝对定位元素的参照点,相信大家都知道,那就是离它最近的具有动态定位(absolute、relative、fixed)的祖先元素的左上角,如果它的祖先元素都没有动态定位,则把文档根元素即html元素的左上角当做参照点来进行绝对定位(记住,不是body元素,而是html元素,大家可以自己去验证,这不是本文的重点)。但是这是我们使用left或top属性来进行定位时所遵照的原则,如果我们使用的是bottom或right属性来进行定位,那参照点又是什么呢?不知道大家想过这个问题没有。这里先说明一下,left和top属性的权重是高于right和bottom,只有在没定义left或top的情况下,相应的阅读全文

posted @ 2013-04-11 18:22 无双 阅读(2534) | 评论 (4) 编辑

css3属性中background-clip与background-origin的用法释疑
摘要: 困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要...阅读全文

posted @ 2012-11-13 16:52 无双 阅读(25992) | 评论 (7) 编辑

CSS布局奇淫巧计之-强大的负边距
摘要: css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。本文非常基础,老鸟可以略过。负边距在普通文档流中的作用和效果那些没有脱离文档流的元素(指不是浮动元素...阅读全文

posted @ 2012-08-13 15:26 无双 阅读(38921) | 评论 (15) 编辑

你真的了解word-wrap和word-break的区别吗?
摘要: 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。那它们到底是什么呢?我在mozilla的官网上找到如下的解释:word-wrapword-break我们看到两个解释中都出现了 break lines within words 这样的词汇,说明它们都跟单词内断句又关。然后我们试着翻译一下上面的两段英文:word-wrap:css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为阅读全文

posted @ 2012-08-10 17:26 无双 阅读(97234) | 评论 (38) 编辑

CSS布局奇淫技巧之-高度自适应
摘要: 何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些。 布局思路 在IE7+及chrome、firefox等浏览器中,高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时,如果没有给它设定高度或宽度,则它的的高度和...阅读全文

posted @ 2012-07-30 14:55 无双 阅读(62961) | 评论 (10) 编辑

CSS布局奇淫技巧之-宽度自适应
摘要: css这个东西,说难不难,说容易也不容易。我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里。这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧。 首先讲的是三列布局,左右两列宽度固定,中间一列宽度自适应 这个很好实现,左右两列分别左浮动和右浮动并给一个固定宽度,中间不浮动,也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。 看下代码结构: 效果为:...阅读全文

posted @ 2012-07-30 10:47 无双 阅读(63500) | 评论 (7) 编辑

IE6、7下li元素的子元素为dl,ul,ol时产生的bug
摘要: 话不多说,先看测试代码: 该段代码在标准浏览器(包括IE8+)中的效果为: 但在万恶的IE6和IE7中的却是这样的: 外面看到li元素的子元素是列表元素时(既ul,ol,dl),li的顶部会莫名其妙的空出一段来,就像是给li设了一个padding-top一样。 解决方法:触发li的hasLayout属性,最好的方法是设置 zoom:1阅读全文

posted @ 2012-07-11 10:02 无双 阅读(857) | 评论 (0) 编辑

去除inline-block元素间的空隙
摘要: inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。总体来时可分为两种方法,一种是改变html结构法,另一种是css法。先说第一种,比如下面这段代码:<ol> <li>首页</li> <li>关于我们</li> <li>联系我们</li> <li>加入我们</li></ol>假设 li 是 inline-block元素,则 li 间会阅读全文

posted @ 2012-05-16 15:36 无双 阅读(5498) | 评论 (0) 编辑

几个最常用的用来代替Div的HTML5元素
摘要: 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是指IE浏览器了),但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的,比如<header>,<footer>,<nav>,<section>,<article>,<aside>,<figure>这几个最常用的元素。 Article 和 Section ...阅读全文

posted @ 2012-04-26 16:32 无双 阅读(5458) | 评论 (0) 编辑

HTML5吧!少年
摘要: 随着互联网的发展,特别是移动互联网的迅猛发展,html5和css3的普及和应用已是大势所趋。虽然目前整站运用html5的条件还不成熟,但我们可以至少尝试使用那些最基本的html5的元素来构建网站。目前,主流浏览器里只有IE9以下的版本是不支持html5的,但是可以通过一段js脚本来使IE6、7、8也能支持html5的标签,所以我们并不用担心浏览器的兼容性问题,大胆的使用吧。以下就简单介绍一下怎么样在页面上使用html5。一、为了能使IE9以下的IE浏览器也能支持html5的标签,所以首先得在文档头部用条件注释的方法引入那段著名的代码。<!--[if lt IE 9]><scr阅读全文

posted @ 2012-04-24 00:15 无双 阅读(867) | 评论 (0) 编辑

纯css未知高度图片垂直居中
摘要: box {2 /*非IE的主流浏览器识别的垂直居中的方法*/3 display: table-cell;4 vertical-align:middle;56 /*设置水平居中*/7 text-align:center;89 /* 针对IE的Hack */10 *display: block;11 *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/12 ...阅读全文

posted @ 2010-10-15 12:15 无双 阅读(588) | 评论 (1) 编辑

css hacks
摘要: * html selector                    /* for IE6 and below */ *+html selector     ...阅读全文

posted @ 2010-08-24 14:37 无双 阅读(474) | 评论 (0) 编辑

html块状元素、内联元素
摘要: 原文在这 块级元素的分类 块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。 一.结构化块状元素 这类元素用于构造文档的结构,一个好的文档结构对于搜索引擎和应用其他技术(如JavaScript)都是十分有利的。它们没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。 主要的结构化块状元素     * <ol...阅读全文

posted @ 2010-08-24 00:41 无双 阅读(24971) | 评论 (0) 编辑

html+css学习资源
摘要: 1、Position is Everything,一个描述和展示在各种浏览器中发现的bug,并提供css解决方法的网站,顶!2、一个国外的网页设计论坛3、http://css-tricks.com/4、http://html5demos.com/有很多html5 DEMO5、http://www.alistapart.com6、http://webreference.com/7、http://ww...阅读全文

posted @ 2010-08-23 12:00 无双 阅读(639) | 评论 (0) 编辑

酷站收集
摘要: 1、http://www.harnods.info/里面有一个很好的作品展示的模板 2、http://www.css-website.com/ 里面很多站 3、http://tutsarena.com/ 不错的PS教程网站阅读全文

posted @ 2010-08-20 00:35 无双 阅读(238) | 评论 (0) 编辑

清除浮动概述
摘要: 浮动布局能给我们带来很大的方便,但有时也会造成我们不想要的后果,这个时候就要清除浮动了。   第一种情况是,有时我们不想让浮动元素出现在不浮动元素的旁边,这时可以对不浮动元素应用clear了,至于是用left,right,还是both,这就得看实际情况了。这种情况比较简单,就不多加叙述了。   第二种情况是,有时我们想让一个父元素(父元素不设置高度)随着里面的内容的高度...阅读全文

posted @ 2010-08-17 13:00 无双 阅读(642) | 评论 (0) 编辑

垂直外边距叠加问题探索
摘要:       外边距叠加会出现在两种情况中,第一种是上下相邻的静态定位的同辈元素中,如下图:                      &#...阅读全文

posted @ 2010-08-15 12:37 无双 阅读(701) | 评论 (0) 编辑

网页文档的DOCTYPE声明
摘要:        一般网页的最开始都会有一个DOCTYPE声明,它里面定义的是DTD(文档类型定义),不同的DTD,浏览器会采用不同的解析模型。浏览器的解析模型可分为标准模式和怪异模式(quriks mode),在标准模式中,浏览器根据规范表现页面,在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器的一些行为(比...阅读全文

posted @ 2010-08-13 11:57 无双 阅读(375) | 评论 (0) 编辑

精美网站收藏
摘要: 1、Sencha阅读全文

posted @ 2010-07-28 22:56 无双 阅读(267) | 评论 (0) 编辑

浏览器布局兼容汇总
摘要: 1、没有定义浮动的元素在IE7及其以下浏览器中仍然会与定义了浮动的元素产生作用,但是在IE8、火狐等标准浏览器中,没有定义浮动属性的元素会直接无视定义了浮动属性的元素的存在,不受其影响(但里面的文本不会),看图(黄色div为包含块,黑色div为向左浮动,蓝色div没定义浮动)   IE6、7的效果,注意,此时如果给蓝色div设置margin-left,则margin-left的值必须超...阅读全文

posted @ 2010-07-24 12:45 无双 阅读(369) | 评论 (0) 编辑

浏览器布局BUG汇总
摘要: 1、IE6的双边距BUG. 发生条件:如果有元素是浮动元素,则该元素与它的父元素(一般是一个容器)直接相接触(中间不能隔着其他元素)的左或右的边距就会产生双倍边距,也意味着相邻的兄弟元素不可能会产生双倍边距,只有元素与其父元素之间才有可能产生双倍边距,产生双倍边距的那边是与其父元素相接触的那边 解决方法:给产生双倍边距的元素添加上 display:inline2、IE6的3px间隙BUG. 发生条...阅读全文

posted @ 2010-07-23 14:58 无双 阅读(449) | 评论 (0) 编辑

关于css的一些问题
摘要: 1、绝对定位问题 (1)绝对定位的参照物是其有移动定位属性的父元素的本身的各个边界,即padding和margin都不算在内 (2)如果父元素都没有设有移动定位属性,则元素会参照 <html>来定位,而不是<body>,IE、FF都如此2、w3c标准中 表格的单元格是不能设为相对定位的阅读全文

posted @ 2010-07-23 14:57 无双 阅读(257) | 评论 (0) 编辑

:hover在IE6的使用
摘要: 在IE7+及FF浏览器中,:hover伪类可以用于任何对象,但在IE5、IE6中,:hover伪类仅能用于a(超链接)对象,且该a对象必须要拥有href属性。 下面是一个鼠标悬停弹出层的代码: -------------------------------------- <style type="text/css"> #a{width:100px;height:100px;backgr...阅读全文

posted @ 2010-07-01 19:22 无双 阅读(7552) | 评论 (5) 编辑

关于浮动与不浮动元素的关系
摘要: 先看代码: <style type="text/css">#a{height:200px;background:#00ff00;}#b{height:100px;width:200px;background:#000;float:left;}#c{height:100px;width:200px;background:#000;float:right;}</style> &...阅读全文

posted @ 2010-07-01 15:41 无双 阅读(430) | 评论 (0) 编辑

关于左边2行右边1行的布局
摘要: 给出3个div,要做一个侧品字形布局,如下图: 代码: <style type="text/css">#a{width:70%;height:200px;background:#00ff00;float:left}#b{width:70%;height:200px;background:#00ffff;float:left;}#c{width:20%;height:400px;back...阅读全文

posted @ 2010-07-01 10:10 无双 阅读(740) | 评论 (0) 编辑

css点滴
摘要: 设置为绝对定位的元素如果没有设定left或top的值,则其默认值为它作为文档流时的值,即left和top的默认值不是0,它会出现在它作为文档流时出现在的地方。 margin可以这样来理解,它只不过是把物体的边界扩大了,我们也可以认为这个用margin扩大的边界是透明的,这个边界又切切实实是存在的,尽管我们看不到它的样子(如颜色等,透明当然不会有颜色啦)。所以margin永远是以自身为参照的,而且...阅读全文

posted @ 2010-05-13 21:02 无双 阅读(443) | 评论 (0) 编辑