JiangLan's Blog - Html&Css

自定义网页滚动条

llk39@163.com(江蓝) — Thu,09 Oct 2008 06:45:19 +0800

一直没怎么用过，只支持IE，今天用了下，顺便收藏了图例：

参考:
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm ;

说明：

scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色；
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色；
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色；
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色；
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色；
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色

备注：
color为你要设置的颜色代码，可以是16进制的，比如#FF0000，可以是以RGB表示的，比如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都用上才会生效。

进入网页加入渐显切换效果

llk39@163.com(江蓝) — Sat,30 Aug 2008 08:44:36 +0800

HTML代码

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

图片在Div中垂直、水平居中的最简单方法

llk39@163.com(江蓝) — Sat,30 Aug 2008 08:16:41 +0800

HTML代码

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

做网页常用的三种注释方法

llk39@163.com(江蓝) — Sat,30 Aug 2008 08:05:00 +0800

网页中良好的注释，会让你的网页清晰可读，方便修改和供他人使用。本文只列举最常用的方法，思路会有些局限，待日后补充。

一、css的注释方法

程序代码

二、js的注释方法

程序代码

三、html的注释方法

 程序代码

内容

免激活Flash(透明) JS代码

llk39@163.com(江蓝) — Tue,15 Apr 2008 21:05:33 +0800

JS代码：

程序代码

// JavaScript Document
function swf(){
document.write('http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="250">');
document.write('images/images/1.swf">');
document.write('');
document.write('images/images/1.swf" width="700" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent">');
document.write(' ');
}

上面代码只需要改变高度，宽度和文件的路径。红色标记地方

调用函数页面：
//此句调用JS文件
//此句写放FLASH的地方

两款导航条代码

llk39@163.com(江蓝) — Mon,19 Nov 2007 09:55:49 +0800

HTML代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style></head>

<body>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1"></td>
    <td align="center" background="attachments/month_0711/lan_bg.gif" class="STYLE1"><a href="#" target="_blank">电影猪</a>   |   <a href="#" target="_blank">火狐浏览器</a>  |    <a href="#" target="_blank">动作电影</a>   |   <a href="#" target="_blank">爱情电影</a>   |   <a href="#" target="_blank">喜剧电影</a>    |    <a href="#" target="_blank">恐怖电影</a>    |    <a href="#" target="_blank">科幻电影</a>   |   <a href="#" target="_blank">国产剧</a>   |   <a href="#" target="_blank">日韩剧</a>  |   <a href="#" target="_blank">港台剧</a></td>
    <td width="1"></td>
  </tr>
</table>
</body>
</html>

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

HTML代码

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

正确使用position属性

llk39@163.com(江蓝) — Thu,15 Nov 2007 16:50:29 +0800

　　Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成。

　　Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。

　　position:static　无定位
　　该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
　　如：#nav { position:static; }

　　position:absolute　绝对定位
　　使用position:absolute，能够很准确的将元素移动到你想要的位置，让我将nav移动到页面的右上角。我们可以这样写：nav { position:absolute; top:0; right:0; width:200px; }
　　使用绝对定位的nav层前面的或者后面的层会认为这个层并不存在，也就是在z方向上，它是相对独立出来的，丝毫不影响到其它z方向的层。所以position:absolute用于将一个元素放到固定的位置很好用，但是如果需要层相对于附近的层来确定位置就无能为力了。只能用下面讨论到的相对定位了。
　　这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

　　position:fixed　相对于窗口的固定定位
　　这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
　　请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

　　position:relative　相对定位
　　所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。如果要让nav层向下移动20px,左移40px:
　　我们可以这样写：#nav { position:relative; top:50px; left:50px; }
但您需要注意下面的情况，相对定位紧随他的层woaicss是不会出现在nav的下方，而是和nav发生一定的重叠！

　　

　　由此可知position:relative并不是很好用的哦，nav已经移走了，相对于原来的位置，向右向左各移了50px。但我们的另一个容器woaicss什么也没有察觉，当作nav是在原来的位置上(即0 0的位置，而不是50 50)，不依不饶的紧跟在nav的后面。大家在使用时要注意方法与总结经验。

一些Div+Css命名规范

llk39@163.com(江蓝) — Fri,09 Nov 2007 13:06:41 +0800

1、一些DIV+CSS命名规范
外套：            wrap
主导航：        mainnav
子导航：        subnav
页脚：            footet
整个页面：        content
页眉：            header
页脚：            footer
商标：            label
标题：            title
主导航：        mainbav（globalnav）
顶导航：        topnav
边导航：        sidebar
左导航：        leftsidebar
右导航：        rightsidebar
旗志：            logo
标语：            banner
菜单内容1：        menu1 content
菜单容量：        menu container
子菜单：        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

阻止机器人搜索你的邮址的方法

llk39@163.com(江蓝) — Tue,23 Oct 2007 14:18:58 +0800

HTML代码

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

　　我们看到：在上面显示中，电子邮件是正常的。但是Robot和查看源代码却只能找到：moc.361@93kll！

注释：

 程序代码
unicode-bidi      版本：CSS2　 兼容性：IE5+　继承性：无
--------------------------------------------------------------------------------
 
语法：
unicode-bidi : normal | bidi-override | embed 
取值：
normal  : 默认值。对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作 
bidi-override  : 严格按照 direction 属性的值重排序。忽略隐式双向运算规则 
embed  : 对象打开附加的嵌入层， direction 属性的值指定嵌入层，在对象内部进行隐式重排序 


direction        版本：CSS2　 兼容性：IE5+　继承性：有
--------------------------------------------------------------------------------
 
语法：
direction : ltr | rtl | inherit 
取值：
ltr  : 默认值。文本从左到右流入 
rtl  : 文本从右到左流入 
inherit  : 文本流入方向由继承获得

表单提交到弹出窗口

llk39@163.com(江蓝) — Sun,21 Oct 2007 15:27:54 +0800

 程序代码

.....