首页 » 我的收集 » DIV+CSS

Meta标签详细参数——HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)

归类于 DIV+CSS 评论关闭

meta是用来在HTML文档中模拟HTTP协议的响应头报文,META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
http-equiv属性详解

1、<meta http-equiv=”Content-Type” content=”text/html”;charset=gb_2312-80″>和<meta http-equiv=”Content-Language” content=”zh-CN”>用以说明主页制作所使用的文字以及语言,又如英文是ISO-8859-1字符集,还有BIG5、utf-8、 shift-Jis、Euc、Koi8-2等字符集;

2、<meta http-equiv=”Refresh” content=”88;url=http://www.design4u.cn”>定时让网页在指定的时间88秒内,跳转到页面http;//www.s027.cn;

3、<meta http-equiv=”Expires” content=”Mon,12 May 2009 00:20:00 GMT”>可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间

格式;

4、<meta http-equiv=”Pragma” content=”no-cache”>是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;

5、<meta http-equiv=”set-cookie” content=”Mon,12 May 2001 00:20:00 GMT”>cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

6、<meta http-equiv=”Pics-label” content=”">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;

7、<meta http-equiv=”windows-Target” content=”_top”>强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

8、<meta http-equiv=”Page-Enter” content=”revealTrans(duration=10,transtion=50)”>和<meta http-equiv=”Page-Exit” contect=”revealTrans(duration=20,transtion=6)”>设定进入和离开页面时的特殊效果,这个功能即 FrontPage中的”格式/网页过渡”,不过所加的页面不能够是一个frame页面。

name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类。这其中description(站点在搜索引擎上的描述)和keywords(分类关键词)是最重要的,所以应该给每页加一个meta值。

参数:Keywords (关键字)
说明:为搜索引擎提供的关键字列表
举例:<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4,……”>
提示:各关键词间用英文逗号”,”隔开。meta的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个meta元素提供文档语言从属信息时,搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。
例如:<META NAME=”Keywords” CONTENT=”信用卡查询,信用卡进度查询,网银导航,招商信用卡,交通信用卡,民生信用卡,中信信用卡,浦发信用卡,光大信用卡,兴业信用卡”>

参数:Description (简介)
说明:Description用来告诉搜索引擎你的网站主要内容。
举例:<meta name=”Description” Content=”你网页的简述”>
提示:无
例如:<META NAME=”Description” CONTENT=”本站点是银行卡快速导航站点,能帮您快速进入各银行网站查询所需资料,减少记忆麻烦”>

参数:Robots (机器人向导)
说明:Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
举例:<meta name=”Robots” Content=”All|None|Index|Noindex|Follow|Nofollow”>
提示:许多搜索引擎都通过放出robot/spider搜索来登录网站,这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;(和 “noindex, no follow” 起相同作用)
index:文件将被检索;(让robot/spider登录)
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
例如:<META NAME=”Robots” CONTENT=”All”>

参数:Author (作者)
说明:标注网页的作者或制作组
举例:<meta name=”Author” Content=”Design4u,QQ:66383210,admin@design4u.cn,”>
提示:Content可以是:你或你的制作组的名字,或Email
例如:<meta name=”Author” Content=”D4U STUDIO,admin@design4u.cn”>

参数:Copyright (版权)
说明:标注版权
举例:<meta name=”Copyright” Content=”本页版权归design4u.cn所有。All Rights Reserved”>
提示:无
例如:<META NAME=”Copyright” CONTENT=”本站版权归D4U STUDIO版权所有。All Rights Reserved”>

参数:Generator (编辑器)
说明:编辑器的说明
举例:<meta name=”Generator” Content=”PCDATA|FrontPage|”>
提示:Content=”你所用编辑器”
例如:<meta name=”Generator” Content=”PCDATA|FrontPage|”>

参数:Language (语言)
说明:网页语言的说明
举例:<META NAME=”Language” CONTENT=”zh-CN”>
提示:无
例如:<META NAME=”Language” CONTENT=”zh-CN”>

参数:Designer(设计者)
说明:网页设计者的说明
举例:<META NAME=”Designer” CONTENT=”your name”>
提示:一般而言,发布者为个人信息
例如:<META NAME=”Designer” CONTENT=”design4u”>

参数:Publisher(发布者)
说明:网站发布者的说明
举例:<META NAME=”Publisher” CONTENT=”your name”>
提示:一般而言,发布者为发布公司信息
例如:<META NAME=”Publisher” CONTENT=”D4U STUDIO”>

参数:Title(主题)
说明:网站主题说明
举例:<META NAME=”Title” CONTENT=”your title”>
提示:通常这里的值是网页的内容标题
例如:<META NAME=”Title” CONTENT=”Design4U个人站点”>

参数:Subject(内容的主题)
说明:主要是指这篇文章的主题是什么,核心内容是什么。
举例:<META NAME=”Subject” CONTENT=”your Subject”>
提示:无
例如:<META NAME=”Subject” CONTENT=”Design4U个人站点”>

参数:Abstract(摘要)
说明:网页页面说明
举例:<META NAME=”Abstract” CONTENT=”本网站为Design4U个人站点”>
提示:对页面内容进行简短的描述,常见于内容页面中,可以加强搜索引擎对页面内容的保存,便于用户搜索。
例如:<META NAME=”Abstract” CONTENT=”本网站为Design4U个人站点”>

参数:Expires(期限)
说明:网页页面期限
举例:<META NAME=”Expires” CONTENT=”time”>
提示:必须是GMT标准时间,定义过期时间,超过时间后即不能从cache中掉出。
例如:<META NAME=”Expires” CONTENT=”Wed, 11 Feb 2010 00:51:09 EST”>

参数:Distribution(分配目标)
说明:META NAME在那些页面有效
举例:<META NAME=”Distribution” CONTENT=”Global”>
提示:是指网站都在哪些地区范围出现,一般设置为Global即为全球范围。
例如:<META NAME=”Distribution” CONTENT=”Global”>

参数:Revisit-After(重访时间)
说明:一般大型网站,蜘蛛爬行频率相当频繁,导致服务器重压。因此做这样的限制是让蜘蛛在限定日期内重访,例如7 days就是七天访问一次
举例:<META NAME=”Revisit-After” CONTENT=”N Days”>
提示:是指网站都在哪些地区范围出现,一般设置为Global即为全球范围。
例如:<META NAME=”Revisit-After” CONTENT=”7 days”>

css hack_IE下内容显示不完整

归类于 DIV+CSS 参与评论

IE下内容显示不完整

/*\*/* html .rBox .title { height: 1%;}/**/

常用的CSS命名规则

归类于 DIV+CSS 参与评论

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
继续阅读

DIV下图片自适应解决方法

归类于 DIV+CSS 参与评论

div下图片自适应解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

 关键在于:max-width:780px;以及下面那行。

固定像素适应:

dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted” cellSpacing=0 cellPadding=6 width=”95%” align=center border=0>
以下是引用片段:


继续阅读

CSS+DIV设计实例:实现让多个DIV排列时居中

归类于 DIV+CSS 参与评论

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!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>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
body {text-align:center}
#outer {
width:60%;
background:#ffffcc;
margin:auto;
text-align:center;
}
.inner {
width:100px;
height:100px;
margin:5px;
border:1px solid #000;
}
* html .inner {display:inline}/* for ie*/
html>body #outer {display:table}/*for mozilla */
html>body .inner {display:table;float:left}/*for mozilla */
@media all and (min-width: 0px){/* opera 7 styles */
html>body .inner {display:inline-block;float:none;}
}

</style> 继续阅读

让DIV里面的文字垂直居中

归类于 DIV+CSS 参与评论

<style type="text/css">
<!–
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
–>
</style>

<div class="con_div">
<span class="fixie"></span>
测试内容

</div>
 

xhtml+css制作不规则导航

归类于 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-8″ />
<meta name=”author” content=”Linxz” />
<title>无标题文档</title>
<style type=”text/css”>
* {margin:0;padding:0;font:normal 12px/25px “宋体”;}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(/articleimg/2008/04/5627/03.gif) center center no-repeat;}
a:hover {color:#000;background:url(/articleimg/2008/04/5627/02.gif) 0 0 no-repeat;width:86px;position:relative;}
</style>
</head>
<body>
<ul>
<li><a href=”#” title=”菜单”>菜单</a></li>
<li><a href=”#” title=”菜单”>菜单</a></li>
<li><a href=”#” title=”菜单”>菜单</a></li>
</ul>
</body>
</html>

继续阅读

最好的CSS+JS多级弹出菜单

归类于 DIV+CSS 参与评论

到目前为止发现的,最好的CSS+JS的多级弹出菜单,效果可参考以下页面

 

点这里下载代码包

CSS框架汇总

归类于 DIV+CSS 参与评论

CSS框架之一 YAML

CSS框架汇总

大家比较熟悉的是js框架,例如prototype、jQuery呀。其实XHTML+CSS也是有框架的,最著名的可能就是YUI了,是yahoo开发 小组的。但是那个稍微有点庞大,而且牵扯到一些的JS框架。所以刚开始研究的时候可能稍微有点累。而这个yaml就比较单纯了。可能是现在还在发展初期所 以框架很简单,东西不多,对XHMTL+CSS框架感兴趣的可以去看看哦。在国内好像还没有那个朋友在做这个东西,如果你有兴趣,自己钻研一下说不定中国 的CSS框架之祖就是你了哦。呵呵。。
网址:http://www.yaml.de/en/ 里面有源码,开发文档以及一些使用此框架搭建的页面实例。

继续阅读

Web标准页面必备系列[转贴]

归类于 DIV+CSS 参与评论

1、Web标准页面之必备工具

其实web标准并不是很复杂的技术,实现web标准的工具也很简单,说白了,只要可以进行纯文本编辑的软件,都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器(象我这种懒人有时候就用那玩艺儿直接在线编辑,汗)。

而另一些较专业软件会提供高亮显示代码(前面提到的UltraEdit也具有此项功能)、代码提示、自动闭合标签等等功能,使用起来会大大提高工作效率。如DreamWeaver、MS Expression、EditPlus等等,这些编辑软件目前是绝对的主流,无论是初学者上手容易还是专业人士提高效率都是不错的选择。

再说说浏览器环境,目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事,而IE7 Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari,同时安装MultipleIE。从我个人的使用经验,IE7 Standalone存在一定的缺陷,有可能导致本机安装的IE6无法正常使用。

除了编辑器以外,还有就是必不可少的调试工具啦,首推当然是Firefox下的Firebug!IE下目前还没有与之相当的调试工具,比较好的有IE development toobar、IE Debugbar等等,不过和Firebug完全不是一个档次的东西,只能说勉强凑合用。

继续阅读