标签：XHTML+CSS

给input的submit属性加上漂亮的背景图片

在做按钮的时候，怎么给按钮加上漂亮的背景图片呢，这里提供一种解决方法。
首先我们定义一个样式吧。

.bottom{border:none;background:url(../images/bottom.jpg) left top no-repeat;width:80px; height:24px; color:#fff; font-size:12px; display:block; line-height:24px;}

然后在写input的时候调用下样式就可以了，如：

<input type="submit" class="bottom">

就可以了

标签 XHTML+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>
<title>对联广告 – xionglibing.cn</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body style=”margin:0px;”>
<div align=”center”>
<table border=”1″ width=”776″ height=”3000″ cellspacing=”0″ cellpadding=”0″>
    <tr>
      <td width=”100%” valign=”top”><div align=”center” style=”color:green;font-size:23pt;font-family:黑体;”><br><br>页<br>面<br>区<br>域</div></td>
    </tr>
</table>
</div>
<script language=”javascript” type=”text/javascript”>
<!–
var showad = true;        //是否显示广告
var Toppx = 60;            //上端位置
var AdDivW = 100;        //宽度
var AdDivH = 360;        //高度
var PageWidth = 800;    //页面多少宽度象素下正好不出现左右滚动条
var MinScreenW = 1024;    //显示广告的最小屏幕宽度象素

var ClosebuttonHtml = ‘<div align=”right” style=”position: absolute;top:0px;right:0px;margin:2px;padding:2px;z-index:2000;”><a href=”javascript:;” onclick=”hidead()” style=”color:red;text-decoration:none;font-size:12px;”>关闭</a></div>’
var AdContentHtml = ‘<div align=”center” style=”color:green;font-size:23pt;font-family:黑体;”><br><br>广<br>告<br>内<br>容</div>’;
document.write (‘<div id=”Javascript.LeftDiv” style=”position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:’+AdDivW+’px;height:’+AdDivH+’px;top:-1000px;word-break:break-all;display:none;”>’+ClosebuttonHtml+'<div>’+AdContentHtml+'</div></div>’);
document.write (‘<div id=”Javascript.RightDiv” style=”position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:’+AdDivW+’px;height:’+AdDivH+’px;top:-1000px;word-break:break-all;display:none;”>’+ClosebuttonHtml+'<div>’+AdContentHtml+'</div></div>’);
function scall(){
    if(!showad){return;}
    if (window.screen.width<MinScreenW){
        alert(“临时提示：\n\n显示器分辨率宽度小于”+MinScreenW+”,不显示广告”);
        showad = false;
        document.getElementById(“Javascript.LeftDiv”).style.display=”none”;
        document.getElementById(“Javascript.RightDiv”).style.display=”none”;
        return;
    }
    var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2;

    document.getElementById(“Javascript.LeftDiv”).style.display=””;
    document.getElementById(“Javascript.LeftDiv”).style.top=(document.documentElement.scrollTop+Toppx)+”px”;
    document.getElementById(“Javascript.LeftDiv”).style.left=(document.documentElement.scrollLeft+Borderpx)+”px”;
    document.getElementById(“Javascript.RightDiv”).style.display=””;
    document.getElementById(“Javascript.RightDiv”).style.top=(document.documentElement.scrollTop+Toppx)+”px”;
    document.getElementById(“Javascript.RightDiv”).style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById(“Javascript.RightDiv”).offsetWidth-Borderpx)+”px”;
}

function hidead()
{
    showad = false;
    document.getElementById(“Javascript.LeftDiv”).style.display=”none”;
    document.getElementById(“Javascript.RightDiv”).style.display=”none”;
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//–>
</script>
</body>
</html>

标签 XHTML, XHTML+CSS, 对联广告

Firefox的字体设置对某些英文网页不起作用的问题

Firefox允许用户用不同的字体来浏览不同语言的网页，比如我们可以用宋体看中文网页，而用Arial等字体看英文网页。可是，在中文环境里，Firefox的字体设定对有些网页却不起作用 — 比如这个blog的首页, 如果你在中文Solaris中启动Firefox，不论你在字体设定(编辑-首选项-内容-字体-高级)里对[西方]采用何种设置，在Firefox里都看不到变化。而奇怪的是–更改[简体中文]的字体，却可以看到变化。这是Firefox的bug么？

很多人都知道在HTML的开头要用charset声明encoding，但还有一个属性”lang”常常被忽略了。这个”lang”跟charset是不同的，”lang”是用来指定网页的”文本语言“，而同一种语言可以有不同的编码。不过对于中文来说，似乎少了这东西也没多大影响，可能是由于多数中文网页仍然在使用gb2312编码，而Firefox可以通过gb2312来判断出网页的语言是中文。可是，对于utf-8编码的网页，由于utf-8对应多种语言，如果没有”lang”属性，Firefox将无法知道网页使用的是什么语言。这种情况下，Firefox会采用与当前的系统语言–对于中文Solaris就是中文–对应的字体。所以，你改[西方]的设定是无论如何不会起作用的。(另外，也可以把[查看]-[字符编码]改为”ISO-8859-1″来强制使用英文字体 — 如果你实在不喜欢选定的中文字体里的英文)

标签 firefox, XHTML+CSS

css命名规则

文章作者由东方皓
发布日期 04/22, 2010
css命名规则无评论

头：header　　
内容：content/container　　
尾：footer　　
导航：nav　　
侧栏：sidebar
栏目：column　　
页面外围控制整体布局宽度：wrapper　　
左右中：left right center　　
登录条：loginbar　　
标志：logo　　
广告：banner　　
页面主体：main　　
热点：hot　　
新闻：news
下载：download　　
子导航：subnav　　
菜单：menu　　
子菜单：submenu　　
搜索：search　　
友情链接：friendlink　　
页脚：footer　　
版权：copyright　　
滚动：scroll　　
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

id的命名

页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

标签 CSS, XHTML+CSS, 命名规则

CSS3圆角属性在Firefox,Chrome,Safari的实现

今天在aw那里看到他的博客用了Firefox专有的圆角属性，另外WordPress的后台也使用了，于是我自己也就试一下来用了。目前IE还未支持圆角属性，IE8我还不清楚支不支持，或许我们以后只要使用border-radius这个CSS3属性就能轻松地在现代浏览器实现这个困扰很多小盆友的问题了，希望这一天的到来不会太遥远。目前我们已经可以在Firefox,Chrome,Safari实现这个功能了，但他们也还是使用私有属性来实现，用法上略有区别。

先说一下Firefox的圆角属性：
-moz-border-radius: {1,4} | inherit
如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-moz-border-radius:5px;
也可以单独设置元素的上左、上右、下右、下左四个角的值，分别用-moz-border-radius-topleft、-moz-border- radius-topright、-moz-border-radius-bottomright、-moz-border-radius- bottomleft来设置。
也可以用合并起来一起设置，如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;

对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。
-webkit-border-radius：{1,2} | inherit;
如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-moz-border-radius:3px;
如果是单独设置四个角的话，需要采取这种方式

-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;

如果是要合并的话，只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。

著名皮肤制作人utom总结了圆角属性不同浏览器下的运用

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

标签 Chrome, CSS3, firefox, Safari, XHTML+CSS

DIV+CSS中标签ul ol li dl dt dd用法

ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦!

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义，块级元素div尽量少用，和table一样，嵌套越少越好。

ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为：
1……
2……
3……

ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略
dl dt dd的用法
dl 内容块
dt 内容块的标题
dd
内容
可以这么写：

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
　　dt和dd中可以再加入 ol ul li和p
　　理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。DD DT DL标签

我们平时常用的是<ul><li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。
<dl></dl><dt></dt><dd></dd>

<dl></dl>用来创建一个普通的列表,
<dt></dt>用来创建列表中的上层项目，
<dd></dd>用来创建列表中最下层项目，

<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了：
dl ——define
list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。

dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解
例子1：
<dl>
<dt>Today
<dd>Today is yesterday.

<dt>Tomorrow
<dd>Tomorrow is today.
</dl>

例子2：
<html>
<!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>无标题文档</title>
<style type=”text/css”>

<!–
dt {
float: left;
width: 60px;

        margin: 0px;
        padding: 0px;
}
dd {

float: left;
        clear: none;
        width: 290px;

margin: 0px;
        padding: 0px;
}
dl {
        width: 350px;

        font-size: 9pt;
        line-height: 1.5em;

position:relative;
        margin: 0px;
        padding: 0px;

left:15px;
}
.red {
color: #FF3300;
}

#box {
width: 500px;
background-color: #F1F1F7;

}
#box #content {
        padding-top: 10px;

padding-right: 10px;
        padding-bottom: 10px;
        padding-left:
20px;
}
–>
</style>
</head>
<body>

<dl>
<dt>商品名称：</dt>

<dd><strong>[好大的一只啊] </strong>忧惠：<span
class=”red”><em>8.5折</em></span></dd>

<dt>商品简介：</dt>

<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span
class=”red”;>详细介绍</span>]</dd>

<dt>店铺地址：</dt>
        <dd>商品名称</dd>

<dt>联系电话：</dt>
        <dd>0000-12345678 87654321
</dd>
</dl>
</div>
</div>
</body>
</html>

标签 CSS, dd, div, dl, dt, li, ol, ul, XHTML+CSS

几个常用CSS

文章作者由东方皓
发布日期 03/25, 2010
几个常用CSS无评论

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致）

清除容器浮动

#main { overflow:hidden; }

不让链接折行

a { white-space:nowrap; }

上面的设定就能避免链接折行

始终让 Firefox 显示滚动条

html { overflow:-moz-scrollbars-vertical; }

body, html { min-height:101%; }

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto; margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用

body{ text-align: center; }

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea { overflow:auto; }

Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页

h2 { page-break-before:always; }

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus { outline:none; }

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* { margin: 0; padding: 0 }

标签 CSS, XHTML+CSS

word-break: break-all;

以下文字来自[舜子]的BLOG，转帖一下：

今天网友 Dcboy 和我提到一个Bug,他说他的编辑框变形了。后来我看了他的代码发现编辑框没有自动换行。被文章中的英文撑开了。

于是我告诉他，让他在skin的CSS里加上 word-break: break-all; 问题解决了。这个问题只有IE才有，我在FF下测试,FF可以自己加滚动条，这样也不影响效果。

建议大家做Skin时，记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题。
以下引用word-break的说明, 注意word-break 是IE5+专有属性
程序代码:
word-break : normal | break-all | keep-all
参数：normal :
依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例：
div {word-break : break-all; }

标签 word-break, XHTML+CSS

和文字并排的图片绝对居中!

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.
虽然解决的办法有很多.比如.
用table来控制图片和文字居中对齐 (这样会因为一个小图片写多很多代码)
使用图片的Align属性设置为align="absmiddle" (但是要知道,标准的W3C中定义的img标签是不支持Align属性的)
以上的方法都不是解决问题最好的办法.后来我无意中发现可以用CSS来解决这个问题.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px" 这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

标签 XHTML+CSS, 图片, 绝对居中

#include file 和 #include virtual的区别

有不少朋友问#include file 和 #include virtual的区别，介绍这方面的文章也有不少，在此将二者的区别再总结一下，仅供参考：
1。#include file 包含文件的相对路径，#include virtual包含文件的虚拟路径。
2。在同一个虚拟目录内，<!–#include file="file.asp"–>和<!–#include virtual="file.asp"–>效果是相同的，但假设虚拟目录名为myweb,则<!–#include virtual="myweb/file.asp"–>也可以通过调试，但我们知道<!–#include file="myweb/file.asp"–>是绝对要报错的。
3。如果一个站点下有2个虚拟目录myweb1和myweb2,myweb1下有文件file1.asp,myweb2下有文件file2.asp,如果file1.asp要调用file2.asp,那么在file1.asp中要这样写：<!–#include virtual="myweb2/file2.asp"–>，在这种情况下用#include file是无法实现的，用<!–#include file="myweb2/file2.asp"–>必然报错。相反，在myweb2的文件中包含myweb1中的文件也是一样。如果该被包含文件在某个文件夹下面，只要在虚拟路径中加上该文件夹即可。
4。不论用#include file 还是 #include virtual，在路径中用“/”还是“\”或者二者交叉使用都不会影响编译效果，程序会顺利执行。
5。以上情况不适用于2个站点文件的相互调用，而且在同一个站点内，<!–#include file="file.asp"–>和<!–#include virtual="file.asp"–>等效，但假设站点名为website,使用<!–#include virtual="website/file.asp"–>是错误的。

标签 PHP, XHTML+CSS