“Web Standards” 相关主题的文章存档:

CSS 十大密技

1. css 字体简写规则

当使用css定义字体时你可能会这样做:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
.

事实上你可以简写这些属性:
font: 1em/1.5em bold italic small-caps verdana,serif.

2. 同时使用两个class

通常我们只为属性指定一个cl 感兴趣?继续阅读 »

CSS for LBS^2 Article Print

六一节的晚上,为方便打印保存博客中的一些珍贵日志,特的写了一段用来打印日志的CSS。由于这段Print CSS是在当前我所用皮肤的CSS下重定义的,不敢保证能兼容其它的LBS^2皮肤样式,将样式表发在这里,仅供大家参考。

Article Print CSS:

/*
Copyright 2005-2006 Matt
Article Print CSS
Last Edit: 2006-06-01 03:52
*/

/* None Display */
#header,
.prev-article,
.next-article,
.category-label,
.textbox-fontsize,
.textbox-urls,
#commentForm,
#commentWrapper,
#innerFooter {
display:none;

感兴趣?继续阅读 »

利用条件注释制作下拉菜单

上篇文章里提到了条件注释,就是判断浏览器类型,然后定义什么浏览器下显示什么内容。
这个dropmenu(下拉菜单)模型来自 cssplay,使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。
先看一个 最简单的模型

XHTML:

  1. <div class="menu">
  2.  
  3. <ul>
  4. <li><a class="drop" href="../menu/index.html">DEMOS
  5. <!--[if IE 7]><!-->
  6. </a>
  7. <!--<![endif]-->
  8. <!--IE7时显示</a>标签-->
  9. <table><tr><td>
  10.  <ul>
  11.  <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
  12.  <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
  13.  <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  14.  <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  15.  <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders</li>
  16.  <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  17.  <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
  18.  <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
  19.  <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
  20.  <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
  21.  </ul>
  22. </td></tr></table>
  23.  
  24. <!--[if lte IE 6]>
  25. </a>
  26. <![endif]-->
  27. <!--IE6时显示</a>标签-->
  28. </li>
  29. </ul>
  30. </div>

感兴趣?继续阅读 »

IE 和非 IE 浏览器的条件注释

下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果

  1. <!--[if IE]>
  2. <h1>您正在使用IE浏览器</h1>
  3. <![endif]-->
  4.  
  5. <!--[if IE 5]>
  6. <h1>版本 5</h1>
  7. <![endif]-->
  8.  
  9. <!--[if IE 5.0]>
  10. <h1>版本 5.0</h1>
  11. <![endif]-->
  12.  
  13. <!--[if IE 5.5]>
  14. <h1>版本 5.5</h1>
  15. <![endif]-->
  16.  
  17. <!--[if IE 6]>
  18. <h1>版本 6</h1>
  19. <![endif]-->
  20.  
  21. <!--[if IE 7]>
  22. <h1>版本 7</h1>
  23. <![endif]-->

感兴趣?继续阅读 »

关于“网页设计制作”的基础知识概要

主校区Web技术宣讲会

前天晚上,6G 站员一行去新校区举办了“网页制作与网站建设”技术宣讲会。

由于新校区那边主要都是大一的新生,估计他们在网页设计制作这方面有所了解或了解较多的人很少,所以我们准备的讲座内容都是比较基础而又带有启发性的。

下面是我在讲座时的主要提纲,总结得很粗糙,而且好多需要扩展的地方都是直接讲出来或是给他们演示出来的,并没有写在这里,提纲发在这里,仅供大家做个参考! 感兴趣?继续阅读 »

简明 HTML CSS 开发规范

//总论

本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档。

/基 本 要 求

1. 在网站根目录中开设images、common、temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等;common 子目录中放css、js、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media 子目录中放flash、avi、quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。 感兴趣?继续阅读 »

文本方式实现同一 IP 端口绑定不同域名

本站曾经介绍过在IIS 中设置主机头,实现 “在一个IP的一个端口下,不同的来访域名对应到到不同的主机” 的方法。今天再给大家介绍几种通过ASP 或JS 实现多个域名使用一个主机放置不同的站点的方法,如下面所示:

用ASP方法实现:

1、
<%
if Request.ServerVariables("SERVER_NAME")="www.alli.cn" then
response.redirect "index.htm"
elseif Request.ServerVariables("SERVER_NAME")="blog.alli.cn" then
response.redirect "blog"
elseif Request.ServerVariables("SERVER_NAME")="album.alli.cn" then
response.redirect "album"
end if
%>

2、
<%
if Request.ServerVariables("SERVER_NAME")="www.alli.cn" then
Server.Transfer("index.htm")
elseif Request.ServerVariables("SERVER_NAME")="blog.alli.cn" then
Server.Transfer("blog")
elseif Request.ServerVariables("SERVER_NAME")="album.alli.cn" then
Server.Transfer("album")
else
Server.Transfer("index.htm")
end if
%>

3、
<%
if instr(Request.ServerVariables("SERVER_NAME"),"www.alli.cn")>0 then
response.redirect "index.htm"
elseif instr(Request.ServerVariables("SERVER_NAME"),"blog.alli.cn")>0 then
response.redirect "blog"
elseif instr(Request.ServerVariables("SERVER_NAME"),"album.alli.cn")>0 then
response.redirect "album"
end if
%>

4、
<%
select case request.servervariables("http_host")
case "www.alli.cn" '1
Server.Transfer("index.htm")
case "blog.alli.cn" '2
Server.Transfer("blog")
case "album.alli.cn" '3
Server.Transfer("album")
...... 继续添加 ......
end select
%>

具体做法:
将需要做转向的域名指向到你的空间的IP.
建立默认首页的asp 文件, 将代码添加到文件的头部.
上传就 OK 了!

用JS方法实现:

在空间的默认首页面建立文件如:default.htm

<html>
<script language="javascript">
if(this.location=="http://alli.cn/")
{this.location.href="http://alli.cn/index.htm";}
else
if(this.location=="http://www.alli.cn/")
{this.location.href="http://www.alli.cn/index.htm";}
else
if(this.location=="http://blog.alli.cn/")
{this.location.href="http://www.alli.cn/blog/";}
else
if(this.location=="http://album.alli.cn/")
{this.location.href="http://www.alli.cn/album/";}
else
if(this.location=="http://wap.alli.cn/")
{this.location.href="http://www.alli.cn/wap/";}
else
{this.location.href="http://www.alli.cn/index.htm";}
</script>
</html>