随笔分类 - HTML+DIV+CSS
摘要：转自知乎上的回答：http://www.zhihu.com/question/20077745解答一：层叠指的是样式的优先级，当产生冲突时以优先级高的为准。1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）2. id选择符>（伪）类选择符>元素选择符3. 权重相同时取后面定义的样式以下是一段经典的html，三个类名分别为模块、标题和正文。大部分html页面都可以由这种结构嵌套或者累加而成。解答二：CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的
阅读全文
摘要：在前端实现美工图的时候，总会碰到一些设计字体，系统里面一般不会自带的。通常情况下多数用以图换字的方式实现，这种方法也很实现大部分的需求。but，总有些例外存在，比如当你需要对这些文字进行大小缩放的操作，但如果缩放图片时可能会失真，这里就可以用自定义字体了。but，又有一个但是（以下文字引用http://www.nowamagic.net/librarys/veda/detail/1356）在网页中嵌入非系统自带字体，虽然技术上能实现，但是对国内来说，没有太大的实际意义，因为一个中文体文件起码20M+，而且各个浏览器支持的字体文件还都不一样，也就是说，在服务器端必须有2-3个不同格式的字体文件，
阅读全文
摘要：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。不明白的可以先看看eBay上的效果：http://www.ebay.com/new/其实就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。（这个解释别嫌混乱…）在CSS中定义背景滚动方式的属性是backgroud-attacthmentbackground-attachment-- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inh
阅读全文
摘要：说到css中的font-family，相信很多朋友经常用，但不知道当你遇到引用中文字体的时候你会怎么写？最近特别关注了下，发现最常用的基本有三种类型：1、直接中文；2、英文形式；3、unicode码；前面两种形式很好理解，unicode码是什么意思呢？下面看基本定义:Unicode（统一码、万国码、单一码）是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。更多内容请查看百度百科对Unicode的介绍。介绍完方案，再谈下使用。之前在看玉伯写的一篇文章《中文字体在 CSS 中的写法》 中提到：font-family
阅读全文
摘要：本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。如何解决“振动”的问题？显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重新渲染页面，这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。解决此问题的技巧就是使用 background-attachment:fixed 为 body 或
阅读全文
摘要：id 的选择器为什么要这么写 li#first？一. 一个疑问？看到过一篇关于 CSS 的文章，其中说到：对于类似 li#first 这样的选择器，由于使用 id 就已经可以确定元素了，没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单测试一下也没有问题。可是，我们经常看到带有元素名称的选择器，例如，在微软的项目模板中就有大量的带有元素名称的选择器，如果没有用的话，为什么要这样写呢？ul#navlist{ float: right;} ul#navlist li{ display: inline;}二. 问题出现了！写一个简单的...
阅读全文
摘要：类似如此的模块，不管是在面试中或是项目需求中都会常碰到，多数使用定宽浮动的方法实现，但这样一来，也就失去了其灵活度。若不定宽，文字又会围着图片环绕。所以要解决的问题，就是让宽度不定死，使用浮动的同时，文字不会围绕着图片。实际上，如果这里只设置了图片向右浮动，在chrome或firefox下用工具查看列表的区域，会把图片的区域一并覆盖，也就是说它会跟flaot box的边缘重叠。如下图所以只要解决了元素与float box边缘重叠，这个问题也就可以迎刃而解了。这里涉及到了一个block formatting context的概念。触发了BFC的块级元素，它的边缘不会和float box重叠。所以
阅读全文
摘要：在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inlin
阅读全文
摘要：之前转载过用边框实现三角形的技巧，早上重新看了一下淘宝跟QQ空间顶部工具栏的三角形实现方式，并记录下来效果图：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>.qq_div{ width: 100px; height: 30px; margin: auto; text-align: center; padding: 50px; background:#50803F; color: #FFF
阅读全文
摘要：转自网易邮箱前端技术中心：http://ntesmailfetc.blog.163.com/blog/static/206287061201241692848617/但凡从事互联网的人基本都会写几行html，用过Word的人用Dreamweaver也能做出规整的页面，所以大部分人会很自然地认为“页面 的开发没什么技术含量，很简单”。不仅有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在 用……还能有什么问题？瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢？网易邮箱前端技术中心也设立好几年了，似乎有 着讨论不
阅读全文
摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1
阅读全文
摘要：outline：input和textarea的默认焦点样式语法：outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit相关属性：outline-style , outline-width , outline-offset , outline-color<outline-color>： 指定轮廓边框颜色。参见outline-color <outline-style>： 指定轮廓边框轮廓。参见outline-style <outline-wi
阅读全文
摘要：CSS的优化通常包括两方面:格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式化CSS一般就是多行模式或单行模式的选择，比如我个人就完全受不了多行模式下面是一些在线的CSS优化工具，能让你方便的对CSS文件进行各种优化处理。1.Online CSS Optimizer /在线CSS优化该在线工具用于精简和压缩样式表的文件大小，优化后的代码将完全是混乱的，支持输入URL，提交文件和直接输入进行压缩。2.CSS Compressor/CSS压缩作用同上，但这个工具拥有非常详细的压缩选项，它包含基本模式和高
阅读全文
摘要：抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~效果图：代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
阅读全文
摘要：有默认值，有一个灰色文字样式（提示用户的信息）；获得焦点后，清空默认值让用户输入文字，这时失去焦点后，给一个样式名来改变文字颜色，这种情况下再次获得焦点时不清空用户已输入的值。如果用户没有输入任何值，返回默认值，灰色文本样式<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19
阅读全文
摘要：表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。HTML代码如下：<div class="type-file-box"><form action="" method="post" name="form1" id="form1"><input na
阅读全文
摘要：问题：<div id="top" style="height:100px;background-color:#CCC;"></div><div id="parent" style="background-color:#F9F; overflow:hidden;"><div id="child" style="margin-top:10px; background-color:#99F;">想实现效果： Chile 与 paren
阅读全文
摘要：在做用frame布局的管理系统时，经常会碰到，要在整个窗口中打开链接的情况，如果target不设置的话，新页面会嵌套在iframe里。主要设置taget属性为_top或是_parent，就可在整个窗口中打开页面；若是iframe只嵌套一层，则_parent即可解决。W3C的taget属性解释：_blank 在新窗口中打开被链接文档。_self 默认。在相同的框架中打开被链接文档。_parent 在父框架集中打开被链接文档。_top 在整个窗口中打开被链接文档。framename 在指定的框架中打开被链接文档。
阅读全文
