abstract：DOM實(shí)戰(zhàn)：模擬智能在線客服系統(tǒng)完成并優(yōu)化樣式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM實(shí)戰(zhàn)：模擬智能在線客服系統(tǒng)<
DOM實(shí)戰(zhàn)：模擬智能在線客服系統(tǒng)完成并優(yōu)化樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM實(shí)戰(zhàn)：模擬智能在線客服系統(tǒng)</title>
<style>
div:nth-child(1){
width: 450px;
height: 650px;
background-color: #f0c674;
margin: 10px auto;
color: #ff5500;
box-shadow: 2px 2px 2px #cccccc;
border-radius: 15px;
}
h2 {
text-align: center;
padding-top: 10px;
}
img {
width: 30px;
padding-left: 10px;
position: relative;
top: 5px;
}
div:nth-child(2){
width: 400px;
height: 490px;
background-color: ghostwhite;
margin: 10px auto;
border-radius: 10px;
border: 2px double #3C3C3C;
}
table {
margin: 10px auto;
}
textarea {
width: 300px;
margin-right: 15px;
/*border: none;*/
/*不可以調(diào)整*/
resize: none;
border-radius: 5px;
background-color: lavenderblush;
}
button {
border: none;
width: 75px;
height: 50px;
background-color: #ff5500;
box-shadow: 2px 2px 2px #3C3C3C;
border-radius: 10px;
color: white;
font-size: 1.5em;
font-family: 楷體;
}
button:hover{
/*鼠標(biāo)變成手*/
cursor: pointer;
background-color: lightgreen;
}
ul {
list-style: none;
line-height: 2em;
/*overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。*/
/*hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。*/
overflow: hidden;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>在線客服<img src="static/images/kf.jpg"></h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text" cols="50" rows="4"></textarea></td>
<td align="left"><button>提交</button></td>
</tr>
</table>
</div>
<script>
//獲取到頁(yè)面中的相關(guān)元素
let btn = document.getElementsByTagName('button').item(0)
console.log(btn);
let text = document.getElementsByName('text').item(0)
console.log(text);
let list = document.getElementsByTagName('ul').item(0)
console.log(list);
let num = 0;//計(jì)數(shù)器，用于滿10條內(nèi)容后清空列表
</script>
</body>
</html>運(yùn)行截圖：
總結(jié)，
通過(guò)案例熟悉使用css控制樣式，自己想要的樣式都能通過(guò)代碼實(shí)現(xiàn)；
Correcting teacher：天蓬老師Correction time：2019-07-01 17:40:08
Teacher's summary：樣式寫得不錯(cuò)........, 形式固然重要, 業(yè)務(wù)邏輯更重要.......