在线客服前端布局

Original 2019-03-16 22:35:11 323
abstract:代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOM实战:模拟智能在线客服系统</title><style type="text/css">div:nth-chil

代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DOM实战:模拟智能在线客服系统</title>


<style type="text/css">

div:nth-child(1){

width: 450px;

height: 650px;

background: lightskyblue;

color:#333;

margin:30px auto;

box-shadow: 2px 2px 2px #808080;

}


h2{

text-align: center;

margin-bottom: -10px;

}


div:nth-child(2){

width:400px;

height:500px;

background: #efefef;

border: 4px double green;

margin: 20px auto 10px;

}


ul{

list-style:none;

padding:15px;

line-height: 2em;


}


table{

width:90%;

height:80px;

margin:0 auto;

}


textarea{

width:280px;

height:56px;

overflow: hidden;

border:none;

resize:none;

padding:2px;

background-color: lightyellow;

}


button{

width:80px;

height:59px;

line-height: 60px;

background-color:seagreen;

border:none;

color:white;

}


button:hover{

cursor:pointer;

background-color:orange;

}

</style>

</head>

<body>

<div>

<h2>在线客服</h2>

<div contenteditable="true">

<ul>

<li></li>

</ul>

</div>


<table>

<tr>

<td align="right"><textarea name="text" id="" cols="30" rows="5"></textarea></td>

<td align="right"><button type="button">发送</button></td>

</tr>

</table>

</div>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-03-18 09:20:17
Teacher's summary:完成的不错。页面最麻烦的就是刚开始。 继续加油

Release Notes

Popular Entries