1、文本框默認點擊特效:
點擊文本框，外圍會出現藍色陰影，取消該特效，為該文本框添加css樣式"outline:none; box-shadow:none",就取消了默認特效。必要時可以加!important增加優先級
2、實現百度搜索框點擊特效：
點擊文本框，文本框的邊框出現藍色實線，我學習到的實現方法：
基礎的html元素：
css:為需要該特效的文本框設置該css樣式
js:當鼠標點擊該文本框時，該文本框的類名改變
3、輸入框特殊點擊特效
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test2</title>
</head>
<body>
<div class="main">
<form style="margin-top:50px;">
<input type="text">
<span class="span">
<label>用戶名 :</label>
</span>
</form>
</div>
<style>
.main {
height: 500px;
width: 800px;
margin: auto;
}
.main form {
position: relative;
font-weight: blod;
}
.main input {
height: 50px;
width: 300px;
margin: auto;
border: 0;
box-shadow: none;
border-bottom: 1px solid #6a7989;
transition: border-bottom 0.5s;
}
.main .span {
position: absolute;
left: 0;
bottom: 0;
height: 50px;
}
.main label {
font-weight: bold;
color: #6a7989;
line-height: 50px;
display: block;
}
.main input:focus {
outline: none;
border-bottom: 2px solid aqua;
}
</style>
<script>
window.onload = function() {
var span = document.getElementsByTagName('span');
var input = document.getElementsByTagName('input');
input[0].onfocus = function() {
span[0].style.bottom = '30px';
}
input[0].onblur = function() {
span[0].style.bottom = '0';
}
}
</script>
</body>
</html>
原理：
應用position定位文本在特定的位置上，用onfocus和onblur等綁定聚焦及失焦事件改變css屬性
總結：
學習了js選取html元素的方法：
1 document.getElementById("id");返回一個
2 document.getElementsByClassName("classname");返回一個類數組
3document.querySelector("選擇器");返回一個//querSelectorAll;返回一個數組
學習了css的display屬性：
display：inline;行元素,不換行
display:block;塊元素，可調寬高
display:inline-block;行內的塊，有兩者的優點。
寫這些，相當於對我的一個記錄，如果我的表述有誤，請大家多多指教。