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="data: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="data: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="data: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="data: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="data: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;
}/*留言设置结束*/

图片显示

仿空间留言板简易界面设置相关推荐

web前端学习--仿QQ空间留言板功能
主要技术要点: css:利用position属性和margin属性实现基本布局. jq/js:留言板功能使用prepend实现最新的留言在顶部显示. 其中易出错的地方已经在源代码中有注释了,欢迎大家批 ...
html QQ空间留言版,qq空间留言板寄语句子
qq空间留言板寄语句子 qq空间写你的留言寄语,陈述自己的内心.以下是由小编整理关于qq空间留言板寄语,希望大家喜欢! qq空间留言板寄语(一) 如果沵是刘易阳,那么俄就是童佳倩. 为什么相爱却不能相 ...
在好友QQ空间留言板上留图片
若您需要在好友空间留言板上发表图片,是需要您去设置个性签名的.自空间留言板改版后,已不再支持将图片直接放到空间留言中,只能将图片设置为个性签名,之后再进入好友空间留言.(注:签名更改后,之前留言过的留 ...
php+mysql留言板（模仿qq空间留言板）
这是一个模仿QQ空间里面的留言板,所写的一个简单留言板.运用的知识有PHP,mysql,还有一些简单的编程思想,这个里面没有管理员的功能.希望和大家一起交流一下. 首先建立一个Message的文件,里 ...
python基于selenium实现自动删除qq空间留言板
py大法好,让你解放双手. 脚本环境 python环境,selenium库,Chrome webdriver驱动等. 源码 # coding=utf-8 import datetime import ...
qq空间留言板删除 php,PHP实现QQ空间自动回复说说的方法
本文实例讲述了PHP实现QQ空间自动回复说说的方法.分享给大家供大家参考,具体如下: header("Content-type: text/html; charset=utf-8" ...
qq空间留言板删除 php,qq空间批量删除留言说说工具发扬红军传统，锻造精锐师...
1.好朋友就像天上的星星.你可能不会经常看到他们,但你知道他们会一直在那里. 2.当我与上帝接触时,甜蜜一定是苦涩的. 3.如果生命是上帝给我的最好的礼物,那么没有你的生活将是上帝在我的使命中给我的最 ...
Kubernetes实战实现 Guestbook 留言板-简易版详解
1.基础信息系统版本:CentOS Linux release 7.6 kubernetes版本:kubernetes1.14.0 Docker版本: Docker CE 19.03.5 此 Jav ...
qq空间留言板php,留言板留言大全爱情 qq空间留言板大全
1.我的心在天堂和人间,因为有你的微笑:令人陶醉的眼睛:天上的声音:一个移动的图:就像光明精灵在清晨柔和的阳光下唱歌跳舞. 2.拿什么来爱你?你不经意的一笑,灿烂了我整个冬天:你转身,我已泪流,季节开 ...

仿空间留言板简易界面设置

html

css

图片显示

仿空间留言板简易界面设置相关推荐

最新文章

热门文章