文章目錄
1.限制input 輸入框只能輸入純數字、限制長度、默認顯示文字
加入oninput事件oninput = "value=value.replace(/[^\d]/g,'')"
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>input</title>
</head>
<body>
只能輸入純數字的輸入框:<input type="text" maxlength="5" name="" οninput="value=value.replace(/[^\d]/g,'')" placeholder="請輸入編號">
</body>
</html>
2.input輸入框自動獲取焦點
在該input標籤後添加autofocus=“autofocus”。
例如
<html>
<head></head>
<body>
用戶名：<input type="text" id="username" name="username" autofocus="autofocus"/><br/>
密碼：<input type="text" id="password" name="password"/><br/>
<input type="submit" name="submitBtn" value="提交"/>
</body>
</html>
3.用CSS讓背景有透明度文字不變
（1）背景爲純色背景非圖片
用background:rgba(x,x,x,x)來讓背景帶有透明度
四個參數的值是指:
red紅色;green綠色;blue藍色;alpha透明度
rgb三個參數有正整數值和百分數值2兩個取值範圍：
正整數值的取值範圍爲：0 - 255；
百分數值的取值範圍爲：0.0% - 100.0%。
a取值範圍在:0~1(數值越小,越透明)。
HTML代碼：
<body>
<div class="純色背景div"></div>
</body>
CSS代碼：
.純色背景div{
background:rgba(0,0,0,.6);
（2）背景爲圖片背景
用opacity(x)來設置背景的透明度。
x指的是alpha透明度，取值範圍也在 0~1(數值越小,越透明)。
css的opacity屬性可以讓很多元素都變透明,這裏要讓背景變透明而文字不變透明需要一點小技巧：將背景取出來單獨放個div再把這個div和原來的div重疊。
HTML代碼：
<body>
<div class="背景"></div>
<div class="其他內容">可得解脫處，唯神佛前，與山水間</div>
</body>
CSS代碼：
.背景{
background:url("bg.jpg") no-repeat;
background-size: 100% 100%;
height: 800px;
position: absolute;
opacity:0.6;
}
.其他內容{
height: 800px;
background-size: 100% 100%;
color:white;
}
完整代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
width: 100%;
padding:0;
margin: 0 auto;
text-align: center;
}
.bg{
height: 800px;
background: url("bg.jpg") no-repeat;
background-size: 100% 100%;
position: absolute;
opacity:0.6;
}
.box{
height: 800px;
background-size: 100% 100%;
}
p{
width: 300px;
line-height: 50px;
position:relative;
top: 50%;
font-size: 30px;
background: yellow;
color: #000000;
font:bold 50px Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="box">
<p>可得解脫處，唯神佛前，與山水間</p>
</div>
</body>
</html>
4.a標籤禁止點擊
在a標籤的樣式加上以下屬性：
<a style="pointer-events: none;"/>
5.文字兩種居中對齊
（1）平水居中：text-align:center;
text-align 屬性規定元素中的文本的水平對齊方式。
該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會得到不同的結果。
（2）垂直居中：line-height:height;
line-height 屬性設置行間的距離（行高），不允許使用負值。
具體示例：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html文字居中測試</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div class="box1">html文字水平居中</div>
<div class="box2">html文字垂直居中</div>
<div class="box3">html文字水平上下居中</div>
</body>
</html>
效果：
6.設置一個元素一直在頁面的最底部：
position:fixed; bottom:0px; left:0px;