📄 6.html
字号:
<!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>Chainable Transition Effects</title>
<script type="text/javascript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pane-list li").hover(
function(){
$(this).css({"border":"1px solid #000","color":"blue"});
},function(){
$(this).css({"border":"1px solid #FFF","color":"#000"});
}).click(function(){
window.location=$(this).find("a").attr("href");return false;
});
}); //close doc ready
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 470px;
}
a {
color: #333300;
text-decoration: none;
}
a:visited {
color: #333300;
}
a:hover {
color: #333300;
text-decoration: underline;
}
h3 {
margin: 0;
padding: 0 0 .3em;
}
p {
margin: 0;
padding: 0 0 .5em;
}
.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #eee;
padding: 10px 20px 10px;
cursor: pointer;
border:1px solid #FFF;
}
.pane-list li:hover {
background: #f6ffe9;
}
</style>
</head>
<body>
<ul class="pane-list">
<li>
<h3><a href="http://www.cssrain.cn">go cssrain blog</a></h3>
<p>the jquery fans blog.</p>
</li>
<li>
<h3>Best Web jquery</h3>
<p>Featuring the best <a href="http://www.cssrain.cn">cssrain</a></p>
</li>
<li>
<h3>cssrain</h3>
<p>love this web .<a href="http://www.cssrain.cn">cssrain</a></p>
</li>
</ul>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -