一般按钮的文字都是一行的。但是有的时候画面需要按钮中的文字换行。
刚开始有个开发人员说没法实现。\r\n 都用过了没有效果。其实google这个老师是非常强大的。
直接换行的方法:<input type="button" value="第一行文字 第二行文字" />
还有一种办法就是把按钮做成图片。这个应该是网站中经常使用的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.bg {
background: url("win8/32/fhmap.png") no-repeat;
height: 828px;
width: 901px;
display: block;
position: absolute;
}
.input1 {
position: absolute;
left: 444px;
top: 259px;
}
.input2 {
position: absolute;
left: 455px;
top: 120px;
}
.input3 {
position: absolute;
left: 250px;
top: 400px;
}
.input4 {
position: absolute;
left: 358px;
top: 100px;
}
.input5 {
position: absolute;
left: 352px;
top: 370px;
}
input {
z-index: 10;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
opacity: 0.7;
background-color: red;
color: white;
font-weight: bold;
width: 80px;
height: 80px;
}
</style>
<link rel="stylesheet" href="win8/ui/style/style.css" />
<link rel="stylesheet" type="text/css" href="css/spdb-main.css">
<script type="text/javascript" src="js/svg.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#jhfh").click(function(){
top.location.href="manage/list.html?id=jh";
});
})
</script>
</head>
<body style="overflow:auto;">
<div style="margin:auto;">
<input type="button" value="3" class="input1"> <input
type="button" value="2" class="input2"> <input
type="button" value="2" class="input3" id="jhfh"> <input
type="button" value="3" class="input4"> <input
type="button" value="1" class="input5">
<div class="bg" style="margin:0 auto;"></div>
</div>
</body>
</html>
eq() 方法将匹配元素集缩减值指定 index 上的一个。
通过为 index 为 2 的 div 添加适当的类,将其变为蓝色:
siblings()查找每个 p 元素的所有类名为 "selected" 的所有同胞元素:
$("#table tr:gt(0)").hover(function(){
});