网站制作博客 - 页面

列表ul li 专用样式

hoogl@126.com(Fishthink) — Fri,28 Aug 2009 16:00:48 +0800

主页级别的页面大部分的内容都是做在无序列表里面的，其庞大的使用规模，需要有完备的样式支持。

ul{zoom:1} 这个样式包括下面两个是zoom在ul里的应用

ul li{zoom:1;+margin-bottom:-4px} 针对ie下ul li 元素的margin-bottom:4px 的bug（bug出现条件：li 里有float 元素）使用了该样式的li其内可有浮左、浮右div，并且li内可兼容多行结构，这是样式ul.ll20 li无法实现的。

ul li{zoom:1;+margin-left:-16px} 这个样式的出现有些不得已，记得前面说过，为了避免ie6下的double margin bug，我们给所有的float元素额外加上了display;inline，这导致float属性的ul 在ie下出现意料之外的缩进问题，只能再增加这个样式来解决这一问题。

ul.ll20 li{line-height:20px;height:20px;+margin-bottom:-4px}

ul.ll23 li{line-height:23px;height:23px;+margin-bottom:-4px}

以上两个样式适用于固定高度的单行li，什么是单行li？指的是li中的文字无换行。

和height等值的line-height让 li中文字垂直居中。使用了这个样式的li其内可以有浮左、浮右div，是解决单行li兼容的比较好的方式。

ul.li20 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;

padding-left:15px}

ul.li23 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 10px no-repeat;

padding-left:15px}

这两个样式没什么好说的，分别针对li高度20px和23px的li背景样式，背景其实就是一个no repeat的方点。

ul.ll li{float:left;display:inline}

ul.lr li{float:right;display:inline}

想让一个个li象火车一样首位相接吗？用上面两个样式吧，让所有的li浮起来。

ul.ldl li{display:inline} 这个样式我不太喜欢，同样可以让li象火车一样首位相接，但是代价太大，所有的li都变成inline了，很多css样式对inline的元素无效，包括最基本的width、height、margin-top

ul.lbt li{border-top:1px dashed #CCC}

ul.lbl_1 li{border-left:1px solid #000}

两个给li加边框的样式，给了li 更好的分隔效果。

这样，ul li 专用样式部分就结束了。

网页设计中常用的一些标准尺寸

hoogl@126.com(Fishthink) — Thu,23 Jul 2009 23:51:29 +0800

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象.
页面标准按800*600分辨率制作，实际尺寸为778*434px
页面长度原则上不超过3屏，宽度不超过1屏
每个标准页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px
另外120*90，120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K
标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO使用。
三、120*90，主要应用于产品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的图像广告。
五、234*60，这种规格适用于框架或左右形式主页的广告链接。
六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
八、88*31，主要用于网页链接，或网站小型LOGO。
广告形式         像素大小                                最大尺寸            备注
BUTTON         120*60(必须用gif)                    7K
                         215*50(必须用gif)                    7K
通栏                 760*100                                    25K               静态图片或减少运动效果
                         430*50                                      15K
超级通栏         760*100 to 760*200              共40K            静态图片或减少运动效果
巨幅广告         336*280                                    35K
                         585*120
竖边广告         130*300                                    25K
全屏广告         800*600                                    40K               必须为静态图片，FLASH格式
图文混排                                                                                 各频道不同 15K
弹出窗口         400*300(尽量用gif)                 40K
BANNER         468*60(尽量用gif)                   18K
悬停按钮          80*80(必须用gif)                      7K
流媒体             300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间小于5秒60帧(1秒/12帧)
网页中的广告尺寸
1.首页右上，尺寸120*60      2.首页顶部通栏，尺寸468*60      3.首页顶部通栏，尺寸760*60
4.首页中部通栏，尺寸580*60    5.内页顶部通栏，尺寸468*60    6.内页顶部通栏，尺寸760*60
7.内页左上，尺寸150*60或300*300    8.下载地址页面，尺寸560*60或468*60
9.内页底部通栏，尺寸760*60     10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*100以上几种说法可能有点小的出入，大家可以探讨一下。
IAB和EIAA发布新的网络广告尺寸标准
在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式：160x600, 300x250, 180x150及728x90，还包括新公布的468x60 和120x600（擎天柱）2种。

javascript获取select的值全解

hoogl@126.com(Huison) — Wed,08 Jul 2009 17:13:51 +0800

javascript获取select的值全解

获取显示的汉字

document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text

获取数据库中的id

window.document.getElementById("bigclass").value

获取select组分配的索引id

window.document.getElementById("bigclass").selectedIndex

例子：

使用
document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text
的结果是：我试一试哈

使用
window.document.getElementById("bigclass").value
的结果是：4

使用
window.document.getElementById("bigclass").selectedIndex
的结果是：1

CSS hack:区分IE6，IE7，firefox

hoogl@126.com(Fishthink) — Wed,15 Apr 2009 20:25:04 +0800

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

[转]最新CSS兼容方案

hoogl@126.com(Fishthink) — Sat,07 Mar 2009 11:50:52 +0800

最新的CSS兼容方案，让你的样式完美兼容各大浏览器，这个方案主要是用来解决Safari的，Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。:)

.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
经FF2、OP9.21、OP9.10、Sa3.0.3(pc)、IE7、IE6测试通过，如果你在其他的浏览器版本上测试过，欢迎给我留言，把结果告诉我。

需要注意的是：IE7对样式的解释跟DTD是有关，在没有DTD的时候，IE7是能读取IE6的hack的。

[转][更新]最新CSS兼容方案

hoogl@126.com(Fishthink) — Sat,07 Mar 2009 11:44:53 +0800

在对浏览器兼容性要求越来越高的时候，大家是否正在寻找一个完整的解决方案呢？继《[原]最新CSS兼容方案》之后，更新的CSS hack出炉啦，包括FF、IE6、IE7、Opear、Safari，需要注意的是IE由于在不同的DTD上渲染的模式不同，“_”这个hack的使用要注意页面是否使用了DTD或XML申明（）。

.class{
background-color:# FFFF00;/*所有浏览器*/
* background-color:#00FF00;/*IE*/
_ background-color:# 00FFFF;/*IE6*/
}

@media all and(min-width:0){
.class{
background-color:#FF00FF; /*Opera */
} }/*只有Opera识别*/

@media all and (min-width:0){
.class{
background-color:#FF00FF; /*Opera和Sa */
html* .class{
background-color:# 808080; /*Sa*/
}
}}

已在实际工作中应用，欢迎大家提供更好的解决方案。

LI浮动后的清除方法

hoogl@126.com(Huison) — Mon,06 Oct 2008 19:02:54 +0800

程序代码

http://www.duibai.net.cn" target="_blank">对白

http://www.huison.cn/web.asp">网站制作

UL中又不能插入DIV来清除浮动,在UL上面加clear:both;又不好使!
在网上找了一种方法:

程序代码

http://www.duibai.net.cn" target="_blank">对白

http://www.huison.cn/web.asp">网站制作

下面这段话从蓝色摘过来的!

注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。
这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。

CSS代码

程序代码

overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}

float后,IE下margin双倍间距的问题

hoogl@126.com(Huison) — Wed,10 Sep 2008 16:28:23 +0800

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？
研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：
9.5.1 Positioning the float: the 'float' property这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。

最后看例子:
下面是照常显示IE Bug的例子

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下面是对浮动元素使用了"inline"修复

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

比较规范的CSS命名

hoogl@126.com(懒鱼) — Fri,29 Aug 2008 09:54:16 +0800

页头：header
登录条：loginBar
标志：logo
侧栏：sideBar
广告：banner
导航：nav
子导航：subNav
菜单：menu
子菜单：subMenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：register
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendLink
页脚：footer
版权：copyRight

1.css ID 的命名
外　套：　　wrap
主导航：　　mainNav
子导航：　　subnav
页　脚：　　footer
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainNav（globalNav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsideBar
右导航：　　rightsideBar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1Content
菜单容量：　menuContainer
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadCrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

鼠标放上文字滚动代码

hoogl@126.com(Huison) — Thu,17 Jul 2008 11:34:22 +0800

感谢蓝色理想论坛版主caiying2007,我只是在其基础上进行了改正

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>一段文字向左滚动</title>
<style>
*{font-size:12px;line-height:20px;margin:2px;padding:0;}
.ad{width:237px;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
span{*display:block}
</style>
</head>
<body>
<div class="ad" id="a2" onmouseover="startscroll(this)" onmouseout='clearTimeout(timer);stopScroll(this);' style="width:100px;overflow:hidden;"><span style='word-break:keep-all;' >请...避免标点,符号及中西文混n编~~~一一</span></div>
<div class="ad" id="a3" onmouseover="startscroll(this)" onmouseout='clearTimeout(timer);stopScroll(this);' style="width:100px;overflow:hidden;"><span style='word-break:keep-all' >请避免标,点符.号及中and西文混编</span></div>
<div class="ad" id="a1" onmouseover="startscroll(this)" onmouseout='clearTimeout(timer);stopScroll(this);' style="width:100px;overflow:hidden;"><span style='word-break:keep-all;' >pppppp+pppppp_ppppp'ppp'pppppp,ppppppp.pppppppppp</span></div>
<script type="text/javascript">
var timer,stops=0;
function startscroll(o){
if (stops==1)return
stops=1
	var w1=o.getElementsByTagName("span")[0].offsetWidth,w2=o.offsetWidth;
	if(w1<=w2)return;
	hs(o,w1-w2+10,0,w1-w2+10);
}
function hs(o,d,c,p){
	c++;var t=(c>0?-c:c);o.getElementsByTagName("span")[0].style.marginLeft=t+'px';
	if(c==d){if(d==0){timer=window.setTimeout(function(){hs(o,p,0,p)},2500);}else timer=window.setTimeout(function(){hs(o,0,-p,p)},2500);}
	else timer=window.setTimeout(function(){hs(o,d,c,p)},20);
}

function stopScroll(old){
	old.getElementsByTagName("span")[0].style.marginLeft=0+'px';
	stops=0;
}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]