HTML/CSS

CSS实现元素水平垂直居中的几种方法 »

元素的居中效果是前端开发中经常用到的,比较经典的那个“水平垂直居中”效果,大家都知道,除此之外,有没有其他解决方案那!接下来那我们一起学习一下这些奇淫秘籍!直接上代码:/*所有浏览器有效*/.dialog{width:600px;height:300px;position:absolute;left:50%;top:50%;margi...

继续阅读 →

高效CSS开发核心要点 »

本文参考了业界规范及主流趋势,详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题,希望对您有所帮助,也可收藏作为参考。本文来源:http://www.ituring.com.cn/article/17451.基本原则1.1把CSS放在HTML页面头部由于浏览器需要在所有的样式表加载完成后才能开始渲染页面,样式表加载完成之前页面...

继续阅读 →

你须知道的30个CSS选择器 »

你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。1.**{margin:0;padding:0;}星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将...

继续阅读 →

DIV 高度100% »

DIV高度100%,也是我们比较常用的一个做法,那么如何高度100%自适应和兼容所有的浏览器是我们今天要讨论的小技巧。一个简单的应用场景是:内容根据上面的场景,我们要实现,ID为content的DIV高度100%,我们首先想到的做法是html,body{height:100%;}#content{height:100%;}内容满一屏或...

继续阅读 →

一些有用的Web前端开发技巧 »

CSS代码调试片段用下面的CSS代码片段,可以把XHTML(orHTML)里的每一元素的层次结构勾勒出来,通过层次结构中每一级的颜色边框的变化,可以方便的看出元素“深度”的变化。给浮动和定位的调试带来了方便。*{outline:2pxdottedred}**{outline:2pxdottedgreen}***{outline:2px...

继续阅读 →

文字垂直排版 »

方法一:<br>Tags此方法尽管不推荐,如果没有别的方法可用时,直接在每个字母或者是汉字的后面添加<br/>标签,就可以实现文字竖排效果了。RAINBOW方法二:元素包裹此方法,需要<span>元素包裹每个字母或者是汉字,然后将其display设置为block,从而使他们独立成行。#method_...

继续阅读 →

图片(水平垂直)居中 »

问题我们要居中容器内的图片,是一件不容易的事,容器可以确定大小,但是图片的大小是不明确的。我们不确定图片大小的主要原因是为了保证图片的完整性和不失真性,我们最好不要强制的缩放图片大小和裁剪图片。如果把图片作为背景图片,水平垂直居中是非常容易的事。但是我们今天要说的是盒子中的<img>元素水平垂直居中。方案有许多,完美的方案...

继续阅读 →

图像替换技术的最佳实战 »

HTML文本的优点就是非常有利于SEO和页面设计人员的处理与控制。同时,可访问性(Accessibility)的思想也应该重点考虑一下。然而,在某些情况不得不使用文本的图像,就像淘宝商城中每个模块的标题,出于品牌策略的要求,需要使用特殊的字体,就应用了图像替换方法。虽然我们提倡尽可能的使用HTML文本而不使用文本的图像,但是由于字体选...

继续阅读 →

IE CSS Bug Table »

我在以前的《IECSSBugs列表和解决方法»》文章中,整理和翻译过HasLayout.net的IECSSBug,就是为了方便日常的开发查阅。不过,官方也存在一点不足和错误,来自Alipay前端同仁已经为我们纠正了一些来自官方的错误,并重新整理成表,非常方便查阅。我这儿就直接收藏了。AlipayUED《打败IE的葵花宝典:CSSBug...

继续阅读 →

热门专题