Rising Sun

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  148 随笔 :: 0 文章 :: 22 评论 :: 0 Trackbacks

#

翻译自:In Search of the Holy Grail
原文:http://www.alistapart.com/articles/holygrail
这个翻译的页面版权归greengnn所有,转载请注明出处
第一步:创建一个结构

xhtml开始于header, footer, and container
<div id="header"></div>

<div id="container"></div>

<div id="footer"></div>

CSS先定义container,给将要加入的sideleft,和sideright留下个位置
#container {
 padding-left: 200px; /* LC width */
 padding-right: 150px; /* RC width */
}

我们的布局现在看起来是这样的

uploads/200602/13_074820_diagram_01.gif


图1——创建框架

第二步:增加内容元素

在第一步基础上增加内容元素<div id="header"></div>

<div id="container">
 <div id="center" class="column"></div>
 <div id="left" class="column"></div>
 <div id="right" class="column"></div>
</div>

<div id="footer"></div>

然后分别定义widths和float 让元素排列在一条线上,还有清除footer的浮动对齐
#container .column {
 float: left;
}
#center {
 width: 100%;
}
#left {
 width: 200px; /* LC width */
}
#right {
 width: 150px; /* RC width */
}
#footer {
 clear: both;
}

这里给center元素定义了100% width,让它占满montainer的可用空间,现在的布局变成了这样

uploads/200602/13_074922_diagram_02.gif


图2:增加内容元素

第三步:把left放到正确的位置

要把left放到正确的位置,我们分两步

1.让left和center在同一水平线#left {
 width: 200px; /* LC width */
 margin-left: -100%;
}

看看效果

uploads/200602/13_075000_diagram_03.gif


图3——left移动完成一半

2.用相对定位,把left继续移动到正确的位置#container .columns {
 float: left;
 position: relative;
}
#left {
 width: 200px; /* LC width */
 margin-left: -100%;
 right: 200px; /* LC width */
}

上一步,left还需要左移200px,就可以了,所以就采用相对定位,将他再向左推200px,就达到了想要的效果。让left距离他右边元素center 200px后,行了,left终于到自己位置上了。

uploads/200602/13_075037_diagram_04.gif


图4——left到了自己的位置

第四步:让right也到自己的正确的位置上

从上图看,我们只需要把right推倒container的padding-right里面,看看怎么做
#right {
 width: 150px; /* RC width */
 margin-right: -150px; /* RC width */
}

好了,现在元素们都正确归位了。

uploads/200602/13_075115_diagram_05.gif


图5——right到了自己正确的位置

第五步:解决bug让布局更完美
如果浏览器类型变更,center就变得比left小了,完美的布局就被打破,我们给body 设置一个min-width
来解决这个问题,因为IE不支持他,所以不会有负面影响,调整如下
body {
 min-width: 550px; /* 2x LC width + RC width */
}

这时在IE6(完全打开的窗口)下,left元素距离左侧又太远了,再调整
* html #left {
 left: 150px; /* RC width */
}

这些大小调整是根据上面已经定义的宽度来的,你调整的时候也要根据自己的实际情况。

现在增加padding

内容文字贴着容器的边,相信你看得时候,不会很舒服,调整一下
#left {
 width: 180px; /* LC fullwidth - padding */
 padding: 0 10px;
 right: 200px; /* LC fullwidth */
 margin-left: -100%;
}

当然不能只增加left就算完事,要给一系列元素都必须加上,也要调整增加padding,带来的新的bug,调整如下
body {
 min-width: 630px; /* 2x (LC fullwidth +
 CC padding) + RC fullwidth */
}
#container {
 padding-left: 200px; /* LC fullwidth */
 padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
 position: relative;
 float: left;
}
#center {
 padding: 10px 20px; /* CC padding */
 width: 100%;
}
#left {
 width: 180px; /* LC width */
 padding: 0 10px; /* LC padding */
 right: 240px; /* LC fullwidth + CC padding */
 margin-left: -100%;
}
#right {
 width: 130px; /* RC width */
 padding: 0 10px; /* RC padding */
 margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
 clear: both;
}

/*** IE Fix ***/
* html #left {
 left: 150px; /* RC fullwidth */
}
header和footer的padding可以随意增加,这里就不提了,还有长度单位用em更具亲和力(em可以让用户使用浏览器来调整自己需要的字体大小)
但是不能混合使用,选择em和px的时候明智些,察看效果

元素等高问题
采用http://www.positioniseverything.net/articles/onetruelayout/equalheight
有人翻译过来的:http://www.blueidea.com/tech/web/2006/3210.asp
里提到的方法,就不具体解释了。
#container {
 overflow: hidden;
}
#container .column {
 padding-bottom: 20010px; /* X + padding-bottom */
 margin-bottom: -20000px; /* X */
}
#footer {
 position: relative;
}

再解决opera 8的bug,代码调整如下
<div id="footer-wrapper">
 <div id="footer"></div>
</div>
* html body {
 overflow: hidden;
}
* html #footer-wrapper {
 float: left;
 position: relative;
 width: 100%;
 padding-bottom: 10010px;
 margin-bottom: -10000px;
 background: #fff; /* Same as body
 background */
}
posted @ 2007-06-14 10:00 brock 阅读(234) | 评论 (0)编辑 收藏

<style>
body{
margin:0 auto;
}
#ddd{
margin:0 auto;
padding: 3px;
background:#00FFCC;
border:solid 1px;
height: 300px;
}
#ddd h4{
margin:0px;
background:#6666FF;
line-height:20px;

}
#ddd ul{
margin:0px;
padding: 3px;
list-style:none;
}
#ddd ul li {

float:left;
}

#ddd a:visited{
background:#999999 url(../Mcredits.gif);
}
#ddd a:link{
background:#999999 url(../credits.gif);
}
#ddd a:hover{
background:#ff0000;
}

#leftmenu
{
    position: absolute;
    left: 0px;
    width: 400px;
    height: auto;
    background-color: WhiteSmoke;
    padding-top: 0px;
}

#leftmenu h3
{
    font-size: 11.5;
    margin: 0px;
    margin-top: 10px;
    padding-bottom: 2px;
    padding-left: 3px;
    border-top: solid 1px Gainsboro;
    padding-top: 3px;
}

#leftmenu ul
{
list-style:none;

    margin: 0px;
    padding-left: 5px;
    margin-left: 5px;
    margin-bottom: 10px;
    font-size: 11.5;
}
#leftmenu ul li
{
margin:0px;
float:left;
}

#leftmenu a
{
    padding: 1px;
    text-decoration: none;
}

#leftmenu a:active, #leftmenu a:visited, #leftmenu a:link
{
}

#leftmenu a:hover
{
    font-style: italic;
}


</style>
posted @ 2007-06-13 18:13 brock 阅读(216) | 评论 (0)编辑 收藏

初试javax.mail

最近在项目中用到发送邮件的功能,由于以前没有接触过,找了很多资料才终于把它弄出来,今天写下这些,算是做个总结吧。
1、首先定义一个邮件的数据结构类
public class EmailData() {
     String from   = null;  //发件人
     String[] recipients = null;  //收件人,可以多个
     String subject   = null;  //邮件主题
     String content   = null;  //邮件内容
     String contentType  = null;  //邮件内容格式(文本或html)
     String fileName  = null;  //附件文件名(目前只提供一个附件)
 
     //下面是相应的setter/getter方法,省略..
}
2、发送不带附件的邮件(包括文本格式和html两种格式)
public void postMail(EmailData emailData)
 throws MessagingException,Exception {
  
 String from   = emailData.getFrom();
 String[] recipients = emailData.getRecipents();
 String subject   = emailData.getSubject();
 String content   = emailData.getContent();
 String contentType = emailData.getContentType();
 String fileName  = emailData.getFileName();
 
    if (recipients != null && recipients.length > 0) {

     Properties props = new Properties();
     //设置邮件服务器地址,连接超时时限等信息
     props.put("mail.smtp.host", "10.30.1.233"); //10.30.1.233邮件服务器
     props.put("mail.smtp.connectiontimeout", "10000"); //
  props.put("mail.smtp.timeout", "10000");   //
    
     //创建缺省的session对象
     Session session = Session.getDefaultInstance(props, null);
 
     //创建message对象
     Message msg = new MimeMessage(session);
 
     //设置发件人和收件人
     InternetAddress addressFrom = new InternetAddress(from);
     msg.setFrom(addressFrom);  
     InternetAddress[] addressTo = new InternetAddress[recipients.length];
     for (int i = 0; i < recipients.length; i++){
         addressTo[i] = new InternetAddress(recipients[i]);
     }
     msg.setRecipients(Message.RecipientType.TO, addressTo);
  
  //设置邮件标题,中文编码
     subject = MimeUtility.encodeText(new String(subject.getBytes(), "GB2312"), "GB2312", "B");
     msg.setSubject(subject);
    
     //设置邮件内容,区分文本格式和HTML格式
     if (contentType == null || contentType.equals("text")) {
      msg.setText(content);
  } else if (contentType.equals("html")) {
   //给消息对象设置内容
   BodyPart bodyPart1 = new MimeBodyPart(); //新建一个存放信件内容的BodyPart对象
   mdp.setContent(content, "text/html;charset=gb2312");//给BodyPart对象设置内容和格式/编码方式
   Multipart mmp = new MimeMultipart();//新建一个MimeMultipart对象用来存放BodyPart对象(事实上可以存放多个)
   //设置邮件附件
   BodyPart bodyPart2 = new MimeBodyPart(); 
   FileDataSource fileDataSource = new FileDataSource(fileName);
   bodyPart2.setDataHandler(new DataHandler(fileDataSource));       
   bodyPart2.setFileName("=?GB2312?B?"+enc.encode(fileName.getBytes())+"?=");
   
     
   Multipart multipart = new MimeMultipart();
   multipart.addBodyPart(bodyPart1);
   multipart.addBodyPart(bodyPart2);
   
   mmp.addBodyPart(mdp);//将BodyPart加入到MimeMultipart对象中(可以加入多个BodyPart)
   msg.setContent(mmp);//把mm作为消息对象的内容
  }
     
     //设置邮件发送时间
        msg.setSentDate(new java.util.Date());
        //调用抽象类的静态方法send()发送邮件
     Transport.send(msg);
    }
}

3、发送带附件的邮件稍微复杂一些,跟发送普通邮件的区别主要如下:
   //设置邮件内容
   BodyPart bodyPart1 = new MimeBodyPart();
   bodyPart1.setDataHandler(new DataHandler( new MailDataSource(content,"text/html")));
   
   //设置邮件附件
   BodyPart bodyPart2 = new MimeBodyPart(); 
   FileDataSource fileDataSource = new FileDataSource(fileName);
   bodyPart2.setDataHandler(new DataHandler(fileDataSource));       
   //需要对附件文件名称进行转码,不然会出现乱码
   bodyPart2.setFileName("=?GB2312?B?"+enc.encode(fileName.getBytes())+"?=");
        
   Multipart multipart = new MimeMultipart();
   multipart.addBodyPart(bodyPart1);
   multipart.addBodyPart(bodyPart2);

   //将Multipart加入到信件
   newMessage.setContent(multipart);

4、以下是转载的关于java mail的介绍
Session
--------------------------------------------------------------------
 Session 定义了一个基本的邮件会话,任何工作都是基于这个Session的。Session 对象需要一个 java.util.Properties 对象来得到类似 邮件服务器,用户名,密码这样的信息。
 
 Session 的构造函数是私有的,你可以通过 getDefaultInstance() 方法来取得一个单一的可以被共享的默认session 如:

  Properties props = new Properties();
  // 填写一些信息
  Session session = Session.getDefaultInstance(props,null);

 或者,你可以使用 getInstance() 方法来创建一个唯一的 session如:

  Properties props = new Properties();
  // 填写一些信息
  Session session = Session.getInstance(props,null);
 
 在这两种方法中 其中的 null 参数是一个 Authenticator 对象,在这里没有被使用的,所以就是null
 
 在大多数案例中,使用一个共享session 已经做够了。

Message
----------------------------------------------------------------
 一旦你创建了Session对象,那么下面要做的就是创建 message 来发送。Message 是一个抽象类,在大部分应用中你可以使用它的子类 javax.mail.internet.MimeMessage 。MimeMessage 是一个理解在不同RFCs中定义的MIME类型以及headers的e-mail message&nbsp;。 Message headers 必须使用 US-ASCII 字符集。

 可以用如下的方法创建一个 Message 
  MimeMessage message = new MimeMessage(session);
 我们注意到,这里需要用session对象作为构造函数的参数。当然,还有其它的构造函数,比如从用RFC822格式化过的输入流来创建message。

 一旦你得到了 message ,你就可以来设置它的各个部分(parts)。设置内容(content)的基本的机制是使用setContent() 方法。

  message.setContent("Email Content. ","text/plain");

 如果,你能够明确你的使用MimeMessage来创建message 并且只是使用普通的文本(plain text) 那么你也可以使用 setText() 方法,setTest()方法只需要设置具体的内容,它默认的MIME类型是 text/plain
  
  message.setText("Email Content. ");
 
 对于普通文本类型的邮件,有一种机制是首选( message.setText("Email Content. "))的设置内容的方法。如果要创建其它类型的message ,比如 HTML类型的message  那么还是需要使用前者 ( message.setContent("Email Content. ","text/html"); )

 设置主题(subject ),使用setSubject() 方法
  
  message.setSubject(" Subject ");

Address 
----------------------------------------------------------------
 
 当你已经创建Session 以及 Message,并且已经为message 填充了内容,那么接下来要做的就是给你的邮件添加一个地址(Address)。 就像Message一样,Address也是一个抽象类,我们可以使用它的一个子类javax.mail.internet.InternetAddress 。

 创建一个地址非常简单

  Address address = new InternetAddress("suixin@asiainfo.com");

 如果,你希望在出现邮件地址的地方出现一个名称,那么你只需要再多传递一个参数。

  Address address = new InternetAddress("suixin@asiainfo.com","Steve");

 你需要为 message 的from以及 to 字段创建address对象。为了识别发送者,你需要使用setFrom() 和 setReplyTo() 方法。
  
  messge.setFrom(address);

 如果你的message 需要显示多个 from 地址,可以使用 addFrom() 方法

  Address address[] = {....};
  message.addFrom(address);

 为了辨识message 的收件人,你需要使用 setRecipient() 方法。这个方法除了address参数之外,还需要一个Message.RecipientType 。

 message.addRecipient(type,address);

 Message.RecipientType有几个预先定义好的类型
 
 Message.RecipientType.TO  收件人
 Message.RecipientType.CC  抄送
 Message.RecipientType.BCC  暗送

 如果你的一封邮件,需要发送给你的老师,并还要给你的几个同学,那么你可以这样

 Address toAddress = new InternetAddress("teacher@17288.com");
 Address[] ccAddress = {new InternetAddress("schoolmate1@17288.com"),new InternetAddress("schoolmate2@17288.com")};

 message.addRecipient(Message.RecipientType.To, toAddress);
 message.addRecipient(Message.RecipientType.CC, ccAddress);
 
 JavaMail 没有提供电子邮件地址有效性的检测。这些超越了JavaMail API的范围。

Authenticator
 
 通过Authenticator设置用户名、密码,来访问受保护的资源,这里的资源一般指的是邮件服务器。
 
 Authenticator也是一个抽象类,你需要自己编写子类已备应用。你需要实现getPasswordAuthentication()方法,并返回一个PasswordAuthentication实例。你必须在 session被创建时, 注册你的 Authenticator。这样,当需要进行认证是,你的Authenticator就可以被得到。

  Properties props = new Properties();
  //设置属性
  Authenticator auth = new YourAuthenticator();
  Session session = Session.getDefaultInstance(props, auth);
 
Transport
----------------------------------------------------------------

 发送消息最后的一步就是使用Transport类,你可以通过两种方法来进行发送。
 Transport 是一个抽象类,你可以调用它静态的send() 方法来发送

  Transport.send(message);

 或者,你可以为你使用的协议从session中取得一个指定的实例,

  Transport transport = session.getTransport("smtp");
  transport.sendMessage(message, message.getAllRecipients());
  transport.close();

Store and Folder
 
 这两个类重要用于取得信息。在创建了Session之后,需要连接到一个 Store ,你需要告诉Store  你使用的是什么协议。

  // Store store = session.getStore("imap");
  Store store = session.getStore("pop3");
  store.connect(host, username, password);

 在连接到一个 Store 后,你可以得到一个 Folder,当然,这个Floder必须是打开的。

  Folder folder = store.getFolder("INBOX");
  folder.open(Folder.READ_ONLY);
  Message message[] = folder.getMessages();

 如果使用POP3那么,INDEX是唯一可用的文件夹。如果使用的是IMAP,你就可以使用其它的文件夹。 

posted @ 2007-04-29 10:33 brock 阅读(191) | 评论 (0)编辑 收藏

<!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=gb2312" />
<title>written by misshjn</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(value){
    var opt = document.getElementById("ss").innerHTML.toString();
    var re = new RegExp(value,"g");
    opt = opt.replace(/<OPTION|<\/OPTION>| selected|value/g,"").match(/=.*?>/g).toString().replace(/=|>/g,"").replace(re,"┢").replace(/[^,┢]/g,"").indexOf("┢");
    document.getElementById("ss").getElementsByTagName("option")[opt].selected = true;
}
function randomselect(){
    document.getElementById("ss").getElementsByTagName("option")[Math.floor(Math.random()*document.getElementById("ss").getElementsByTagName("option").length)].selected = true;
}
//-->
</SCRIPT>
</head>
<body>
<!--
<select id="ss">
<option value="1998">1998年</option>
<option value="1999">1999年</option>
<option value="2000">2000年</option>
<option value="2001">2001年</option>
<option value="2002">2002年</option>
<option value="2003">2003年</option>
<option value="2004">2004年</option>
<option value="2005">2005年</option>
</select>
-->

<SCRIPT LANGUAGE="JavaScript">
<!--
var opts;
for (i=1900; i<2008; i++){
    opts +="<option value='"+i+"'>第 "+i+" 年</option>";
}
document.write("<select id='ss'>"+opts+"</select>");
//-->
</SCRIPT>

<input type="button" value="选中 value=2001 的选项" onclick="test('2001')">
<input type="button" value="随机选择" onclick="randomselect()">
</body>
</html>
posted @ 2007-04-18 10:43 brock 阅读(1571) | 评论 (0)编辑 收藏

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

  • property:value1; 表示所有边都是一个值value1;
  • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  • property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

  • border-width:1px;
  • border-style:solid;
  • border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  • background-color:#f00;
  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

字体(fonts)

字体的属性如下:

  • font-style:italic;
  • font-variant:small-caps;
  • font-weight:bold;
  • font-size:1em;
  • line-height:140%;
  • font-family:"Lucida Grande",sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

  • list-style-type:square;
  • list-style-position:inside;
  • list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

posted @ 2006-12-30 11:05 brock 阅读(328) | 评论 (1)编辑 收藏

  • 原文作者:Roger Johansson
  • 作者简介:住在瑞典哥德堡,1994年开始接触和参与web设计,456 Berea Street是他的住址,因此采用这个名字作为他的个人主页域名
  • 原文出处:www.456bereastreet.com
  • 原文发表时间:2005年3月15日
  • 阿捷说明:此文原名"CSS tips and tricks",有2篇,我将它们合并翻译在本文中。
作者Roger Johansson照片

最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS,影响CSS的效率发挥。我来分析总结一下错误所在,帮助大家更加容易使用CSS。

本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充。

一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。

二.明确定义单位,除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

五.默认值

通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

* {
margin:0;
padding:0;
}

六.不需要重复定义可继承的值

CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中,你已经定义了元素p,又定义了一个class"update"

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中,class="update"将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中,我们可以这样调用

<div class="one two"></div>

这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>

这段代码的CSS定义是:

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

<ul id="subnav">
<li> <a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a> </li>
<li> <a href="#"> Item 1</a> </li>
</ul>

样式定义是:

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号

为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:

background:url("images/***.gif") #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号,反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如:定义所有标题的字体、颜色和margin,你可以这样写:

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link :visited :hover :active。抽取第一个字母是"LVHA",你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。

十三.清除浮动

一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts

十四.横向居中(centering)

这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:

你可以这样定义使它横向居中:

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

@import url("main.css");

然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:

@import "main.css";

这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart

十六.针对IE的优化

有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。

  • 1.注释的方法
    • (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):
      html>body p {
      /* 定义内容 */
      }
    • (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
      * html p {
      /* declarations */
      }
    • (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用"反斜线"技巧:
      /* \*/
      * html p {
      declarations
      }
      /* */
  • 2.条件注释(conditional comments)的方法

    另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

十七.调试技巧:层有多大?

当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式:

selector1,
selector2 {
property:value;
}

当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。

我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。

最后,关闭的大括号}单独写一行。

空格和换行有助与阅读。

posted @ 2006-12-30 11:04 brock 阅读(272) | 评论 (0)编辑 收藏

未标题.gif
posted @ 2006-11-15 14:16 brock 阅读(184) | 评论 (0)编辑 收藏

<script language="JavaScript">
function open_window() {
window.frames["ifr"].location.reload();
}
</script>
<iframe src="http://bbs.blueidea.com/" width=200 height=100 id="ifr" name="ifr"></iframe>

<a href="#" onclick="open_window();">刷新</a>




window.opener.location.href=window.opener.location.href


window.opener.location.href=window.opener.location.href
就是弹窗的父页面重定向到自己
window.opener.location..reload()

posted @ 2006-10-25 11:20 brock 阅读(213) | 评论 (0)编辑 收藏

程序写写忘了最简单的东西 <%=g_user%> 
posted @ 2006-10-19 10:56 brock 阅读(164) | 评论 (0)编辑 收藏

在导出数据生成excel时,定义excel单元格格式为文本。
最好拿你的导出代码贴出来看看,主要是生成excel时代码

--------------------------------------------------------------------------------

参考一下.
<% @ page contentType = " text/html; charset=gb2312 " %>
<% @ page  import = " java.io.* " %>
<% @ page  import = " org.apache.poi.hssf.util.HSSFColor " %>
<% @ page  import = " org.apache.poi.hssf.util.Region " %>
<% @ page  import = " org.apache.poi.hssf.usermodel.* " %>
<%
// 初始化
// 工作簿
HSSFWorkbook wb = new  HSSFWorkbook();
// 工作表
HSSFSheet sheet = wb.createSheet();
wb.setSheetName(
0 , " Excel演示! " ,HSSFWorkbook.ENCODING_UTF_16);
// 准备完成
// 建样式
// 标题字
HSSFFont font_Header = wb.createFont();
font_Header.setFontName(
" headerFont " );
font_Header.setFontHeightInPoints((
short ) 12 );
HSSFCellStyle cellStyle_Header
= wb.createCellStyle();
cellStyle_Header.setAlignment(HSSFCellStyle.ALIGN_CENTER);
cellStyle_Header.setFont(font_Header);
// 通用行
HSSFCellStyle cellStyle_Normal = wb.createCellStyle();
cellStyle_Normal.setAlignment(HSSFCellStyle.ALIGN_LEFT);
// cellStyle_Normal.setBorderBottom(HSSFCellStyle.BORDER_THIN);
// cellStyle_Normal.setBorderLeft(HSSFCellStyle.BORDER_THIN);
// cellStyle_Normal.setBorderRight(HSSFCellStyle.BORDER_THIN);
// cellStyle_Normal.setBorderTop(HSSFCellStyle.BORDER_THIN);
// 表格头
HSSFCellStyle cellStyle_Column = wb.createCellStyle();
cellStyle_Column.setAlignment(HSSFCellStyle.ALIGN_CENTER);
cellStyle_Column.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
cellStyle_Column.setBorderBottom(HSSFCellStyle.BORDER_THIN);
cellStyle_Column.setBorderLeft(HSSFCellStyle.BORDER_THIN);
cellStyle_Column.setBorderRight(HSSFCellStyle.BORDER_THIN);
cellStyle_Column.setBorderTop(HSSFCellStyle.BORDER_THIN);
cellStyle_Column.setFillPattern(HSSFCellStyle.BIG_SPOTS);
cellStyle_Column.setFillBackgroundColor((
short )HSSFColor.WHITE.index);
cellStyle_Column.setFillForegroundColor(HSSFColor.GREY_25_PERCENT.index);
// 数据行
HSSFCellStyle cellStyle_Cell = wb.createCellStyle();
cellStyle_Cell.setAlignment(HSSFCellStyle.ALIGN_LEFT);
cellStyle_Cell.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
cellStyle_Cell.setBorderBottom(HSSFCellStyle.BORDER_THIN);
cellStyle_Cell.setBorderLeft(HSSFCellStyle.BORDER_THIN);
cellStyle_Cell.setBorderRight(HSSFCellStyle.BORDER_THIN);
cellStyle_Cell.setBorderTop(HSSFCellStyle.BORDER_THIN);
cellStyle_Cell.setWrapText(
true );
// 样式结束
// 置标题
HSSFRow row = sheet.createRow(( short ) 0 );
HSSFCell cell
= row.createCell(( short ) 0 );
cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
cell.setCellValue(
" Excel演示! " );
sheet.addMergedRegion(
new  Region( 0 ,( short ) 0 , 0 ,( short ) 5 ));
cell.setCellStyle(cellStyle_Header);
// 完成标题
// 行信息
row = sheet.createRow(( short ) 1 );
cell
= row.createCell(( short ) 0 );
cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
cell.setCellValue(
" FieldName " );
cell.setCellStyle(cellStyle_Normal);
cell
= row.createCell(( short ) 1 );
cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
cell.setCellValue(
" FieldValue " );
sheet.addMergedRegion(
new  Region( 1 ,( short ) 1 , 1 ,( short ) 2 ));
cell.setCellStyle(cellStyle_Normal);
cell
= row.createCell(( short ) 3 );
cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
cell.setCellValue(
" FieldName " );
cell.setCellStyle(cellStyle_Normal);
cell
= row.createCell(( short ) 4 );
cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
cell.setCellValue(
" FieldValue " );
sheet.addMergedRegion(
new  Region( 1 ,( short ) 4 , 1 ,( short ) 5 ));
cell.setCellStyle(cellStyle_Normal);
// 表数据
for ( int  mIndex = 2 ;mIndex < 10 ;mIndex ++ )
{
row
= sheet.createRow(( short )mIndex);
for ( int  nIndex = 0 ;nIndex < 6 ;nIndex ++ )
{
cell
= row.createCell(( short )nIndex);
cell.setEncoding(HSSFWorkbook.ENCODING_UTF_16);
cell.setCellValue(
" 00.00 " );
cell.setCellStyle(cellStyle_Cell);
}

}

// 全局调
sheet.setHorizontallyCenter( true );
for ( int  kIndex = 0 ;kIndex < 10 ;kIndex ++ )
{
sheet.setColumnWidth((
short )kIndex,( short ) 4500 );
}

sheet.setMargin(HSSFSheet.BottomMargin,(
double ) 0.5 );
sheet.setMargin(HSSFSheet.LeftMargin,(
double ) 0.1 );
sheet.setMargin(HSSFSheet.RightMargin,(
double ) 0.1 );
sheet.setMargin(HSSFSheet.TopMargin,(
double ) 0.5 );
// 调整结束
// 输出Excel
OutputStream outData = null ;
outData
= response.getOutputStream();
response.setContentType(
" application/vnd.ms-excel " );
wb.write(outData);
outData.flush();
response.flushBuffer();
// 完成
%>
posted @ 2006-09-19 15:59 brock 阅读(392) | 评论 (0)编辑 收藏

仅列出标题
共15页: First 上一页 7 8 9 10 11 12 13 14 15 下一页