随笔分类 -  HTML+DIV+CSS

上一页 1 2
更简洁的 CSS 清理浮动方式
摘要：清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用无素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。/* 清理浮动 */.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}.clearfix { zoom:1;}其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块 阅读全文
posted @ 2011-05-05 14:03 沫鱼 阅读(452) 评论(0) 推荐(0)
html嵌套规则
摘要：html的嵌套规则表 阅读全文
posted @ 2011-02-22 16:26 沫鱼 阅读(638) 评论(0) 推荐(0)
[转] 深入 CSS 行高
摘要：Line Height (中文版)View more presentations from bigCat Mao.翻译自 Russ Weakley 的Line Height原文地址：http://isd.tencent.com/?p=1503 阅读全文
posted @ 2011-02-17 15:54 沫鱼 阅读(534) 评论(0) 推荐(1)
纯CSS后台框架
摘要：转自司徒大人的佳作：http://www.cnblogs.com/rubylouvre/archive/2011/02/15/1955486.html实质就是一个切换卡，关键是如何让鼠标从按钮移到面板上时，面板不会消失。用到div:hover与CSS3圆角[代码] 阅读全文
posted @ 2011-02-16 18:18 沫鱼 阅读(2757) 评论(0) 推荐(0)
CSS强制性换行
摘要：一般情况下，元素拥有默认的white-space:normal（自动换行，PS：不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，... 阅读全文
posted @ 2011-02-16 17:02 沫鱼 阅读(165177) 评论(3) 推荐(6)
图片的HTTP请求
摘要：请在主流浏览器中打开测试页面，在Fiddler里查看http请求。1. 隐藏图片测试：test_1.html结论：只有Opera不产生请求。注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。2. 重复图片测试：test_2.html结论：所有浏览器都只产生一次请求。3. 重复背景测试：test_3.html结论：所有浏览器都只产生一次请求。4. 不存在的元素的背景测试：test_4.html结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。5. 隐藏元素的背景测试：test_5.html结论：Opera和Firefox对于用d 阅读全文
posted @ 2011-01-18 19:04 沫鱼 阅读(4385) 评论(0) 推荐(0)
渐进增强式布局探讨（下）
摘要：上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：浮动 float负边距 negative margin相对定位 relative position这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。尝试之路考虑以下DOM结构：利用浮动元素的负边距来定位：这样我们得到了第一个尝试页面 pe_layout_example1.html.可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。一个自然的想法是，给main的容器#bd添加padding:效 阅读全文
posted @ 2011-01-18 18:33 沫鱼 阅读(1269) 评论(2) 推荐(1)
渐进增强式布局探讨（上）
摘要：来看一个经典的三栏布局：从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。写好上面的代码后，我们来看看如何实现三栏布局。（书写HTML时，尽量以内容为向导，要避免一上来就考虑布局，这体现的是内容与表现的分离，同时也是渐进增强思想在工作流程中的体现。）Table布局经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布 阅读全文
posted @ 2011-01-18 17:58 沫鱼 阅读(2847) 评论(1) 推荐(4)
绝对定位下margin失效的解决方法
摘要：绝对定位层下margin:auto会失效，这时设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果如果是要垂直居中，也是一样的方法，即设置top:50%,然后margin-top的值为层的高度的一半position:absolute;left:50%;top:50%;margin-top:-13px;margin-left:-58px;width:116px;height:25px;z-index:999999; 阅读全文
posted @ 2010-12-31 18:25 沫鱼 阅读(1140) 评论(0) 推荐(0)
标签中包含input时line-height属性失效的解决办法
摘要：今天在项目中碰到一个问题，就是在ie6下，p标签的line-height不起作用。琢磨了好久，在javascript罗浮宫的同学提示下，才知道包含了input标签时，ie6下行高会失效，其它浏览器均正常。万恶的ie6啊！在google上一搜，原来并不止input，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性在这些非文字的对象中就会失效。其中原理引来下从google上搜来的：我们知道input标签是一个inline-block元素，也就是一个块元素，而line-height只可以应用于inline行内元素。所以li 阅读全文
posted @ 2010-11-26 17:19 沫鱼 阅读(16501) 评论(9) 推荐(1)
说CSS Hack 和向后兼容
摘要：人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的... 阅读全文
posted @ 2010-11-17 15:19 沫鱼 阅读(591) 评论(0) 推荐(1)
三角的一个特殊做法（一个奇技淫巧~）
摘要：三角的一个特殊做法：CSS：em {display:block;font:0/0 "宋体";border:6px solid;border-color:#fff #fff #fff #000 ;}HMTL：<em></em>代码简单，还可以利用border的颜色轻松做出各个方向的三角！此技巧转片怿飞的博客：http://www.planabc.net/2006/12/17/... 阅读全文
posted @ 2010-10-28 16:52 沫鱼 阅读(479) 评论(2) 推荐(0)
实现左右边框的最低碳代码~~
摘要：以下提供javascript罗浮宫同学们讨论的处理左右边框最省的代码，真是佩服了呀~~~{border:1px solid red;border-width:0 1px}{border:1px solid red; border-style: none solid}{border:solid red; border-width:0 1px}{border:solid; border-width:0... 阅读全文
posted @ 2010-10-27 18:08 沫鱼 阅读(548) 评论(1) 推荐(0)
图片垂直居中的使用技巧
摘要：在曾经的 淘宝UED 招聘 中有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。题目的难点在于两点：垂直居中；图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：[... 阅读全文
posted @ 2010-10-14 17:47 沫鱼 阅读(758) 评论(0) 推荐(0)
标签语义化
摘要：前两天参加了公司组织的一个WD培训，有一节课讲了标签语义化，听了之后感觉特别有用，更正了我以前对 HTML 和 CSS 的错误看法。首先说明的一点是，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签... 阅读全文
posted @ 2010-10-12 18:06 沫鱼 阅读(566) 评论(0) 推荐(1)
Css Reset(复位)整理
摘要：Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....相信看完全文您会对Css Reset有个重新的认识原文地址:http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/PS：这就是最常用的Css Reset，但是这里会有很多问题。原文... 阅读全文
posted @ 2010-06-30 18:08 沫鱼 阅读(1127) 评论(0) 推荐(0)
腾讯实习生笔试题
摘要：在一网友空间里看到的，贴上来大家有兴趣的可以试一下，虽然DIV+CSS做了接近三年，但有些基础的东西却发现还是没有使用过一、耐心填一填！（每空4分，共24分）1. 为div设置类a与b,应编写HTML代码_<div class=”a b”>_</div>_________。2. 设置CSS属性clear的值为_both___________时可清除左... 阅读全文
posted @ 2010-05-22 14:53 沫鱼 阅读(9539) 评论(11) 推荐(2)

上一页 1 2