html问题解决

来源：互联网发布：口取纸打印软件编辑：程序博客网时间：2024/05/02 00:06

一般按钮的文字都是一行的。但是有的时候画面需要按钮中的文字换行。

刚开始有个开发人员说没法实现。\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 添加适当的类，将其变为蓝色：

[html] view plain copy
 print?
<!DOCTYPE html>  
<html>  
<head>  
  <style>  
  div { width:60px; height:60px; margin:10px; float:left;  
        border:2px solid blue; }  
  .blue { background:blue; }  
  </style>  
  <script type="text/javascript" src="/jquery/jquery.js"></script>  
</head>  
  
<body>  
  <div></div>  
  <div></div>  
  <div></div>  
  
  <div></div>  
  <div></div>  
  <div></div>  
  
  <script>$("body").find("div").eq(2).addClass("blue");</script>  
</body>  
</html>  

siblings()查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：

[html] view plain copy
 print?
<!DOCTYPE html>  
<html>  
<head>  
  <script type="text/javascript" src="/jquery/jquery.js"></script>  
</head>  
  
<body>  
  <div><span>Hello</span></div>  
  <p class="selected">Hello Again</p>  
  <p>And Again</p>  
  
<script>  
$("p").siblings(".selected").css("background", "yellow");  
</script>  
  
</body>  
</html>  

$("#table tr:gt(0)").hover(function(){
});

0 0