css xhtml - 随笔分类 - lancee

网页中插入天气预报

摘要：<iframe src="http://m.weather.com.cn/m/pn12/weather.htm " width="245" height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>发现现在很多网站越来越人性化，做个网站带阅读全文

posted @ 2012-02-14 22:15 lancee 阅读(794) 评论(1) 推荐(0)

网页邮件的做法

摘要：网页邮件，顾名思义，就是能通过邮件形式发给对方的网页。相比普通邮件，网页邮件更能夺人眼球，精心设计的网页邮件，能将你要传达的信息灌输给接收者（在其将网页扔进垃圾箱前的几秒钟内）。同样，在节假日或亲友、客户生日时，发送一个自己精心设计的网页邮件更让对方感动。网页邮件的做法网页邮件相比普通网页有两点特殊的地方：一、html源码内不能有<html>、<head>、<body>。看到这里朋友们可能有点疑惑了，其实细心的朋友会发现，像QQ，126等国内常用的邮箱，在新建邮件时，上方工具栏总会有一个“<HTML>”的小工具，点击后就会切换到邮件html源码阅读全文

posted @ 2012-02-14 09:56 lancee 阅读(1074) 评论(1) 推荐(0)

Div+CSS教程：如何闭合浮动元素？

摘要：按照CSS规范，浮动元素（float）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成... 阅读全文

posted @ 2011-12-13 10:26 lancee 阅读(269) 评论(0) 推荐(0)

HTML table 属性运用实例

摘要：一、表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖线都没了这个表格去掉了单元格之间的纵向分隔线和横向分隔线其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横阅读全文

posted @ 2011-11-02 10:05 lancee 阅读(367) 评论(0) 推荐(0)

DIV+CSS规范命名大全集合

摘要：这不是最好的命名规范，个人认为最好的可以参考“京东”和“facebook”，无形胜有形的命名。登录条：loginBar 标志：logo 侧栏：sideBar 广告：banner 导航：nav子导航：subNav 菜单：menu 子菜单：subMenu搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download注册：regsiter 状态：status 按钮：btn .. 阅读全文

posted @ 2011-10-19 10:38 lancee 阅读(200) 评论(0) 推荐(0)

Top 10 CSS Table Designs（转）

摘要：By Guest Author（原作者）August 13th, 2008Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple 阅读全文

posted @ 2011-09-01 10:11 lancee 阅读(362) 评论(0) 推荐(0)

不可忽视<!DOCTYPE......>

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">今天在做个登陆页面，俩个登录页面几乎一模一样，只有连接部分文字不一样，做好后上网测试，一个连接hover有效果，另一个没有效果。（在IE里，在FF正常，再次说明IE比较脆弱，好处是锻炼了前端人员的写作规范性）我就检查hover，什么伪类，什么IE6不认这个，但是一个页面有效果，一个没有，这说明与CSS无关阅读全文

posted @ 2011-08-24 11:10 lancee 阅读(426) 评论(0) 推荐(0)

去掉IE浏览器里的脚本控件提示

摘要：”为了有利于保护安全性，Internet Explorer己限制此网页进行可以访问计算机的脚本或ActiveX控件。请单击这里获取选项…”。网页开发人员都有这个烦恼，其实挺简单，加一句注释，就可以不让他再跳出来（注：这个安全提示很无趣，从没发现他有什么实际意义）其实我们这个注释应该并不会感到陌生，如果我们用IE保存网上的某一页面时，会自动在保存到本地的网页代码里加入以<!-- saved from url=开头的注释。可能是没有去具体研究一下而已了。在网页里增加后就是这样：<!DOC 阅读全文

posted @ 2011-08-19 16:41 lancee 阅读(422) 评论(0) 推荐(0)

IE6和height:1px;

摘要：在设计网页时，有时我们需要一个1px高度的细线，但ie6有个bug，高度为1px的div在ie6里不管用．这是因为IE6中的div默认有个最小字体高度，div的最小高度就是这个高度，即使设置了height:1px, div显示出来的高度也不是1像素解决方法有如下几种：1,网上都说多加一个font-size=0px；的属性可以实现．以下为引用的内容：<style type="text/css">.a{font-size:0px;height:1px;background-color:red;}</style><div class="a& 阅读全文

posted @ 2011-08-19 11:08 lancee 阅读(1219) 评论(0) 推荐(0)

css hack

摘要：ie5 hack, ie 6 hack, ie 8 hack,ie 9 我没用，暂时也没接触过9的hack，随着浏览器的更新（而且换代越来越快），是不是我有写不完的hack，还是说高手从不写hack。IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; IE6 IE7 FF * √ √ × !important × √ √ 浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6 以: " #demo {width:100px;} "为例; #demo {width:1 阅读全文

posted @ 2011-07-09 16:40 lancee 阅读(315) 评论(1) 推荐(0)

纯DIV+CSS制作的三级鼠标经过弹出下拉导航菜单源码

摘要：<!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/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf- 阅读全文

posted @ 2011-07-07 16:52 lancee 阅读(2011) 评论(2) 推荐(1)

随笔分类 - css xhtml

公告