html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link href="css/留言板.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<!-- 顶部导航栏开始 -->
<div class="header">
<div class="inner">
<div class="logo"> <!-- 放logo 左浮动 -->
<a href="#">班级通讯录</a>
</div>
<div class="nav"> <!-- 导航栏 右浮动 -->
<ul>
<li><a href="main.html">首页</a></li>
<li><a href="message.html">个人中心</a></li>
<li><a href="#">留言板</a></li>
<li><a href="pletter.html">私信</a></li>
<li><a href="#">与我有关</a></li>
<li><a href="#">好友</a></li>
</ul>
</div>
<div class="personal">
<dl>
<dd>
<span>
<img src="images/22.jpg" height="55" width="55" alt="">
冉姽
</span>
</dd>
</dl>
</div>
</div>
</div>
<!-- 顶部导航栏结束 -->
<!-- 留言板部分 -->
<div class="jiyu">
<h4>主人寄语</h4> <hr />
<textarea class="yangshi" name="" id="" cols="111" rows="6" >谢谢你来给我留言！</textarea>
</div>
<div class="lyshezhi">
<table cellspacing="30" >
<tr height="60">
<td>留言（10）</td>
<td>
<select name="" id="">
<option value="">留言板设置</option>
<option value="">留言审核</option>
<option value="">批量管理</option>
<option value="">显示签名档</option>
</select>
</td>
</tr>
</table>
</div>
<div class="liuyan"><hr />
<img src="images/tx1.jpeg" />
<span><a href="#">棒棒冰</a></span>
<div class="hua">
<span>你今天真好看！</span>
</div>
<a href="#" class="hf">回复</a>
</div>
<div class="liuyan"><hr />
<img src="images/tx2.jpg" />
<span><a href="#">悄悄兔</a></span>
<div class="hua">
<span>你今天真好看！</span>
</div>
<a href="#" class="hf">回复</a>
</div>
<div class="liuyan"><hr />
<img src="images/tx1.jpeg" />
<span><a href="#">棒棒冰</a></span>
<div class="hua">
<span>你今天真好看！</span>
</div>
<a href="#" class="hf">回复</a>
</div>
<div class="liuyan"><hr />
<img src="images/tx1.jpeg" />
<span><a href="#">棒棒冰</a></span>
<div class="hua">
<span>你今天真好看！</span>
</div>
<a href="#" class="hf">回复</a>
</div>
<!-- 留言板结束 -->
</form>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
body {
background: rgba(0,0,0,.4) url(../images/t.png) no-repeat center center fixed ;
background-size: cover;
/*padding-top: 40px;*/
}
li {
list-style: none; /* 取消li 的小点 */
}
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;}
/* 顶部导航栏开始啦 */
.header {
height: 100px;
background-color: #ede5d0;
}
.inner {
width: 1200px;
height: 100px;
/*background-color: pink; */
margin: 0 auto;
line-height: 100px;
}
.logo a {
float: left;
font-size: 30px;
text-decoration: none;
color: #000;
margin-left: -200px;
}
.nav {
float: right;
}
.nav ul {
overflow: hidden;
}
.nav li {
float: left;
margin: 0 20px;
}
.nav li a {
color: #333;
text-decoration: none;
}
.nav li a:hover {
color: #b2a998;
}
.personal dt, .personal dd {
float: left;
}
.personal span img {
vertical-align: middle;
border-radius: 50%;
margin-right: 10px;
/*margin-top: 6px;*/
transition: all 0.6s;
}
.personal span img:hover {
transform: rotate(-360deg);
}
/*留言设置开始*/
.jiyu {
width: 800px;
/*margin: 0 auto;*/
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
.jiyu hr {
margin: 10px auto;
}
.jiyu textarea {
border: none;
font-size: 14px;
resize: none;
}
.yangshi {
color: #333;
}
.lyshezhi {
width: 800px;
height: 70px;
margin: auto;
margin-top: -30px;
margin-bottom: 5px;
/*border: 1px solid pink;*/
}
.liuyan {
height: 200px;
width: 800px;
/*border: 1px solid red;*/
margin: 0 auto;
/*line-height: 200px;*/
}
.hua span{
display: block;
text-indent: 2em;
margin-left: 200px;
margin-top: -30px;
/*border: 1px solid red;*/
}
/*.liuyan textarea {
border: none;
resize: none;
font-size: 15px;
text-indent: 2em;
}
*/
.liuyan span a {
color: #26709A;
text-decoration: none;
}
.liuyan span a:hover {
text-decoration: underline;
}
.hf {
float: right;
margin-top: 40px;
margin-right: 20px;
color: #26709A;
text-decoration: none;
}
.hf:hover {
text-decoration: underline;
}
/*留言设置结束*/
图片显示
