WEB前端开发_WEB前端研究-Jerman(深圳)

06.03

什么是块元素、内联元素（行内元素）、可变元素？常用的区分

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验。

所属分类:HTML基础及探讨+阅读全文

06.03

CSS使页面翻转，挺有意思的，备着愚人节用！

具体的实现通过ie滤镜和css3旋转，具体效果运行下面代码！

[提示:可以修改后运行]

所属分类:CSS基础及常用代码+阅读全文

06.02

jQuery美化DIV滚动条,兼容各浏览器

jQuery美化滚动条,兼容各浏览器，主要应用于改变DIV滚动条的样式

貌似不能应用在BODY或Iframe上，有兴趣的可自己测试或修改

下载 jscroll.js

<!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=utf-8" />
<title>jquery滚动条jscroll美化滚动条,自定义滚动条</title>
<style>
body {
padding:10px 0 0px 0;
margin:0;
font-size:12px;
color:#666666;
line-height:20px;
}
p.text {
padding:10px;
margin:10px;
background:#f5f5f5;
border:1px solid #ccc;
}
.fontRed {
color:#FF0000
}
.title {
font-family:Verdana, Arial;
font-weight:bold;
font-size:14px;
padding:0 20px
}
.demo {
width:500px;
margin:30px;
font-size:12px;
padding:1px;
border:1px solid #ccc;
}
.demo2 {
border:1px solid #ccc;
padding:1px;
background:#fff;
width:700px;
margin:20px;
}
.logo h1, .footer h1 {
height:1px;
overflow:hidden;
padding:0;
margin:0;
line-height:20px;
font-size:12px;
display:block
}
.footer {
border-top:1px dotted #ccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#efefef
}
.footer .copyRight {
padding:20px;
font-size:11px;
}
.footer .copyRight p a {
text-decoration:none;
}
pre.text {
padding:10px;
margin:10px;
background:#f5f5f5;
border:1px solid #ccc;
}
.img {
border:1px solid #efefef;
padding:1px;
background:#fff;
width:99px;
margin:0 0 0 20px
}
#tt, #cc, #ee {
background:#f5f5f5;
height:100px;
}
.download {
font-size:18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:20px
}
</style>
<script language='javascript' src='http://www.anyweb.com.cn/js/jquery-1.4.1.js'></script>
<script language='javascript' src='http://www.anyweb.com.cn/js/jscroll.js'></script>
<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------*/
$(document).ready(function(){
$("#tt").jscroll();
$("#cc").jscroll({W:"12px"});
$("#ee").jscroll({W:"12px",Btn:{btn:false}});
/*---------------------------------------------------------以下为自定义滚动条样式，设置时注意逗号--------------*/
$(".dd").jscroll({ W:"15px"//设置滚动条宽度
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg.gif)"//设置滚动条背景图片地址
,Bg:"right 0 repeat-y"//设置滚动条背景图片position,颜色等
,Bar:{Pos:"bottom"//设置滚动条初始化位置在底部
,Bd:{Out:"#bcbcbc",Hover:"#ccc"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
,Btn:{btn:true//是否显示上下按钮 false为不显示
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}//设置上按钮背景：鼠标离开(默认)，经过，点击
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
,Fn:function(){}//滚动时候触发的方法
});
$(".ff").jscroll({ W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg2.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
$(".gg").jscroll({ W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg3.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Bd:{Out:"#bcbcbc",Hover:"#ccc"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
$(".hh").jscroll({ W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg4.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Bd:{Out:"#bcbcbc",Hover:"#ccc"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
$(".ii").jscroll({ W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg5.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Bd:{Out:"#064697",Hover:"#064697"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script>
</head>
<body>
<div style="height:650px; overflow:scroll">
<p class="text"><b>可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。</b><span class="fontRed">支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容firefox,谷歌</span></p>
<p class="text">$("#tt").jscroll();//默认调用 </p>
<p class="title">demo:</p>
<div class="demo">
<div id="tt">
<div style="padding:5px;"> <b>顶部</b>
<p>此处id为dd</p>
<p>www.winwill.com</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<b>底部</b> </div>
</div>
</div>
<p class="text">$("#cc").jscroll({W:"12px"});//设置了滚动条宽度</p>
<p class="title">demo:</p>
<div class="demo">
<div id="cc" >
<div style="padding:5px;"> <b>顶部</b>
<p>此处id为cc</p>
<p>www.winwill.com</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<b>底部</b> </div>
</div>
</div>
<p class="text">$("#ee").jscroll({W:"12px",Btn:{btn:false}});//设置了滚动条宽度,去掉了上下按钮,比有按钮好看多了，当然按钮是为了设置背景用的hoho</p>
<p class="title">demo:</p>
<div class="demo">
<div id="ee">
<div style="padding:5px;"> <b>顶部</b>
<p>此处id为ee</p>
<p>www.winwill.com</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<b>底部</b> </div>
</div>
</div>
<p style="text-align:left; margin-left:10px;">/*-----------------以下为自定义滚动条样式，设置时注意逗号--------------*/</p>
<pre class="text">
$(".dd").jscroll({ W:"12px"//设置滚动条宽度
,BgUrl:""//设置滚动条背景图片地址
,Bg:"#ccc"//设置滚动条背景图片position,颜色等
,Bar:{  Pos:"bottom"//设置滚动条初始化位置在底部
,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
,Btn:{  btn:true//是否显示上下按钮 false为不显示
,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
,Fn:function(){}//滚动时候触发的方法
});
</pre>
<p class="title">demo:(滚轴初始化位置：底部)</p>
<div class="img"><img src="http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg.gif" border="0" alt="所用图片" /></div>
<div class="demo2" >

<div class="dd" style="height:200px;">

<div style="padding:5px">

<b>顶部</b>
<p>此处class为dd</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>此处class为dd</p>
<p>www.winwill.com</p>
<b>底部</b> </div>
</div>
</div>
<div class="img"><img src="http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg2.gif" border="0" alt="所用图片" /></div>
<div class="demo2" >

<div class="ff" style="height:200px;">

<div style="padding:5px">

<pre style="padding:0; margin:0; color:#4174a3"><script type="text/javascript">
$(document).ready(function(){
$(".ff").jscroll({
W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg2.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script></pre>
</div>
</div>
</div>
<div class="img"><img src="http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg3.gif" border="0" alt="所用图片" /></div>
<div class="demo2"  style="  background:#fff;">
<div class="gg" style="height:200px;">

<div style="padding:5px">

<pre style="padding:0; margin:0; color:#b5b5b5; font-family:Verdana, Arial, Helvetica, sans-serif"><script type="text/javascript">
$(document).ready(function(){
$(".ff").jscroll({
W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg3.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script></pre>
</div>
</div>
</div>
<div class="img"><img src="http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg4.gif" border="0" alt="所用图片" /></div>
<div class="demo2"  style="background:#081622;">
<div class="hh" style="height:200px;">

<div style="padding:5px">

<pre style="padding:0; margin:0; color:#b5b5b5; font-family:Verdana, Arial, Helvetica, sans-serif"><script type="text/javascript">
$(document).ready(function(){
$(".hh").jscroll({
W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg4.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script></pre>
</div>
</div>
</div>
<div class="img"><img src="http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg5.gif" border="0" alt="所用图片" /></div>
<div class="demo2"  style="background:#004fb1;">
<div class="ii" style="height:200px;">

<div style="padding:5px">

<pre style="padding:0; margin:0; color:#b5b5b5; font-family:Verdana, Arial, Helvetica, sans-serif"><script type="text/javascript">
$(document).ready(function(){
$(".ii").jscroll({
W:"15px"
,BgUrl:"url(http://www.anyweb.com.cn/up_files/image/blog/2011/s_bg5.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Pos:"bottom"
,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
,Fn:function(){}
});
});
</script></pre>
</div>
</div>
</div>
</div>
</body>
</html>

[提示:可以修改后运行]

所属分类:jQuery框架+阅读全文

06.02

jQuery控制滚动条到DIV最底端

<!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>无标题文档</title>
<script language="Javascript" type="text/javascript" src="http://www.anyweb.com.cn/js/jquery-1.4.1.js"></script>
</head>
<body>
<div id="scrollDiv" style="height:100px; width:500px; border:#ff0000 solid 1px; overflow-y:scroll; overflow-x:hidden;">
<br />f
<br />fdfd
<br />fdf
<br />safd
dsa<br />fd<br />
<br />d
<br />sf
<br />dsasffds
<br />fdfa
<br />d
<br />dsafdf
<br />f
<br />fd
<br />d
<br />fd
<br />f
<br />fdfd
<br />fdf
<br />safd
dsa<br />fd<br />
<br />d
<br />sf
<br />dsasffds
<br />fdfa
<br />d
<br />dsafdf
<br />f
<br />fd
<br />d
<br />fd
<br />f
<br />fdfd
<br />fdf
<br />safd
dsa<br />fd<br />
<br />d
<br />sf
<br />dsasffds
<br />fdfa
<br />d
<br />dsafdf
<br />f
<br />fd
<br />d
<br />fd
</div>
<button onclick="$('#scrollDiv').scrollTop(document.getElementById('scrollDiv').scrollHeight);">滚动到底端</button>
<button onclick="$('#scrollDiv').scrollTop(0);">滚动到顶端</button>
</body>
</html>

[提示:可以修改后运行]

所属分类:jQuery框架+阅读全文

05.31