<![CDATA[Radys Blog - 设计制作]]> http://www.radys.cn/ zh-cn PBlog2 v2.4 Radys Blog http://www.radys.cn/images/logos.gif http://www.radys.cn/ Radys Blog http://www.radys.cn/article.asp?id=226 <![CDATA[使footer固定到页面的底部]]> hycqq@163.com(Rady) Fri,28 Aug 2009 13:42:33 +0800 http://www.radys.cn/article.asp?id=226 使用css有多种方法让footer紧贴页面的底部。但是，目前为至，它们都使用了又长又臭的hack或者许多额外html标签；这个方法只用了15行css，简洁的html标签，更妙的是css都是符合标准的css，兼容主流浏览器,包括IE5+，Firefox，Safari，Opera。

查看实例代码：http://ryanfait.com/sticky-footer/

如果在你的网站上使用footer
添加以下几行css代码到你的样式表。.wrapper的边框的负值大小与.fotter和.push一样。负值必须与。fo.footer的高度一致（包括你加任何填充和边框的值）

  1. * {
  2.     margin: 0;
  3. }
  4. html, body {
  5.     height: 100%;
  6. }
  7. .wrapper {
  8.     min-height: 100%;
  9.     height: auto !important;
  10.     height: 100%;
  11.     margin: 0 auto -4em;
  12. }
  13. .footer, .push {
  14.     height: 4em;
  15. }

和下面一样的html结构。除非使用css绝对定位，否则在.content和.footer div标签中间不要添加任何内容

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="layout.css" ... />
  4.     </head>
  5.     <body>
  6.         <div class="wrapper">
  7.             <p>Your website content here.</p>
  8.             <div class="push"></div>
  9.         </div>
  10.         <div class="footer">
  11.             <p>Copyright (c) 2008</p>
  12.         </div>
  13.     </body>
  14. </html>

修复调试
“给元素添加边框会让footer混乱不已。”
简单的使用padding替换，就可以让你高枕无忧。

“我把这些放到我的站点了，但是它不能在浏览器***中正常显示，你的代码有错误。”
请检查上面的例子在那个浏览器中是否正常，如果它工作正常，那么请你仔细检查你自己的代码吧。

“我不懂设计，你能帮我吗？”
我网站援助是按小时收费的，最便宜的收费是50美元。不过，网上有许多网页设计论坛，你可以免费从哪得到帮助，如果你真的希望我来搞定它，请发email给我，我们商讨价格。

The height: auto !important; and height: 100%; properties

我收到一封邮件通知我说去了wrapper选择器中height: auto !important; 和 height: 100%; footer搬弄同样表现正常。这是一个IE 6的min-height hack，如果你想让footer在IE6下也固定在底部就不要删除。

以内容为翻译作品，仅供自己学习英语之用。
原文地址：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

]]> http://www.radys.cn/article.asp?id=219 <![CDATA[一点一滴优化页面大小]]> hycqq@163.com(Rady) Wed,29 Jul 2009 16:40:29 +0800 http://www.radys.cn/article.asp?id=219    最页面的大小控制不只是减少几KB字节的问题，更是网页设计做事的认真态度，看看这几个小技巧或许可以起到抛砖引玉的作用，你可能想到更好的办法减小页面的大小。

   1. 列表页面<br/>可以用CSS display:block替换

   2. <div class="clear"></div>用<br class="class"/>替换

   3.去除页面中不必要的空格

   4.去除页面中调试代码

]]> http://www.radys.cn/article.asp?id=94 <![CDATA[DOS Attrib 命令使用]]> hycqq@163.com(hycn) Thu,10 Jul 2008 11:24:57 +0800 http://www.radys.cn/article.asp?id=94 　使用DOS下批处理命令attrib可以解决。

    attrib指令的格式和常用参数为

ATTRIB [+R | -R] [+A | -A ] [+S | -S] [+H | -H] [[drive:] [path] filename] [/S [/D]]

  +   设置属性。
  -    清除属性。
  R   只读文件属性。
  A   存档文件属性。
  S   系统文件属性。
  H   隐藏文件属性。

  [drive:][path][filename]
      指定要处理的文件属性。
  /S  处理当前文件夹及其子文件夹中的匹配文件。
  /D  也处理文件夹。

  打开DOS命令窗口
输入以下命令
attrib [路径] -s -h +a /s /d
如我文件夹路径是
　D:\Test\
我的输入就是
  attrib D:\Test\ -s -h +a /s /d
/s所有的文件 /d也对目录进行处理，只用/d不起作用
按回车搞定。

当然也可以把批处理命令写成bat文件]]> http://www.radys.cn/article.asp?id=91 <![CDATA[The IE Doubled Float-Margin Bug]]> hycqq@163.com(hycn) Tue,08 Jul 2008 14:48:46 +0800 http://www.radys.cn/article.asp?id=91
    带有float的margin加display: inline，解决双margin的Bug
    更详细的解释请参考
    http://www.positioniseverything.net/explorer/doubled-margin.html
]]> http://www.radys.cn/article.asp?id=72 <![CDATA[绿色虚拟光驱，一款非常易用小巧的虚拟光驱]]> hycqq@163.com(hycn) Sun,25 Nov 2007 01:44:26 +0800 http://www.radys.cn/article.asp?id=72 　　这款绿色虚拟光驱我很早就开始使用，这款小小的虚拟光驱只有400多K，绿色免安装，解压后直接使用，软件界面友好方便使用。真为绿色软件中的极品。

      迷你虚拟光驱的官方网站http://www.138soft.com/

　　现在就下载

]]> http://www.radys.cn/article.asp?id=53 <![CDATA[DIV+CSS实现多风格选择的方法]]> hycqq@163.com(hycn) Wed,24 Oct 2007 01:42:37 +0800 http://www.radys.cn/article.asp?id=53     DIV和CSS实现满足用户个性化的要求变得很容易，今天向大家介绍一种CSS DIV布局，搭配JS实现页面多风格的技术。

   通过这个技术你完全可以自己动手建立一个多风格技术页面和网站了

  1. styleswitcher.js

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);


2、CSS调用：

CODE:
<link rel="stylesheet" type="text/css" href="default.css" /> //默认的样式这样调用
<link rel="stylesheet" type="text/css" href="one.css" title="name_one" /> //其他的样式这样调用
<link rel="stylesheet" type="text/css" href="two.css" title="name_two" />
...



3、JS调用：

CODE:

<script type="text/javascript" src="styleswitcher.js"></script>


4、风格选择的实现：
写在页面的body中

CODE:
<a href="#"
onclick="setActiveStyleSheet('',1);
return false;">默认样式</a>
<a href="#"
onclick="setActiveStyleSheet('name_one',1);
return false;">样式一</a>
<a href="#"
onclick="setActiveStyleSheet('name_two',1);
return false;">样式二</a>
   
或许这些内容对你也有帮助 国外CSS学习精品网站   兼容多种浏览器的css四级菜单
]]>