第一个使用第三方软件:比如畅言、多说等,怎么用百度一下,然后进入官网去看它的说明,很简单的!不需要什么数据库啊 后台语言,直接复制过来调用就可以了!
第二种就是自己写一个:前提你要懂一种后台语言,然后就是简单的数据库 *** 作,还有服务器的搭建!这个比较恼火!
第三种嘛!就是你使用CMS系统建站的,你在系统设置里面开启留言功能就可以了,然后在前台页面调用!目前比较火的:phpwin 帝国CMS 织梦CMS等等 WP也不错!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 align="center" style="color: red">用户留言簿</h1>
<hr color="red" />
<form action="baidu.html" method="post">
<table border="1" cellspacing="0" bordercolor="black" align="center" width="700px" height="300px" style="color: blue">
<tr>
<td width="100" height="50">用 户 名:</td>
<td><input type="text" name="name" /></td>
<td>密 码:</td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td width="100" height="50">电子信箱:</td>
<td><input type="text" name="email" /></td>
<td>民 族:</td>
<td>
<select name="名族">
<option value="汉族" selected="selected">汉族</option>
<option value="少数名族">少数民族</option>
</select>
</td>
</tr>
<tr>
<td width="100" height="50">性 别:</td>
<td><input type="text" name="sex" />
<input type="radio" name="sex" value="男" checked="checked" />
<input type="radio" name="sex" value="女" />
</td>
<td>爱 好</td>
<td>
<input type="checkbox" name="lanqiu" value="aihao" />篮球
<input type="checkbox" name="zuqiu" value="aihao" />足球
<input type="checkbox" name="paiqiu" value="aihao" />排球
<input type="checkbox" name="qita" value="aihao" />其它
</td>
</tr>
<tr>
<td width="100" height="100">留 言:</td>
<td colspan="4">
<textarea name="liuyan" rows="5" cols="50">请多多指教</textarea>
</td>
</tr>
<tr>
<td height="50" colspan="5" align="center">
<input type="submit" value="确定" />
<input type="reset" value="重写" />
</td>
</tr>
</table>
</form>
</body>
</html>
html+css制作的只是前台页面
CSS代码
这里重点注意的就是 .ds-avatar 的背景要和页面背景一致,这样就能展示出凹进去的效果。
body {background:#333}
.ds-post-main {position:relative width:500px}
.ds-avatar {position:absolute top:20px width:31px height:31px padding:5px background:#333border-radius:50%}
.ds-avatar a {display:block width:31px height:31px background:#01cc01 border-radius:50%}
.ds-comment-body {margin-left:20pxpadding:10px 10px 10px 30px height:80pxbackground:#01644f}
HTML代码
这是多说留言评论的结构,其实wordpress也可以这样的。
<div class="ds-post-main">
<div class="ds-avatar">
<a href="#nogo" > </a>
</div>
<div class="ds-comment-body"> </div>
</div>
美化留言评论样式
添加质感:这里主要使用CSS3的圆角(border-radius)、阴影(box-shadow)来实现质感
交互设计:达人使用的交互只是一个简单的CSS3旋转动画(transform:rotate),当然可以使用更多的动画效果来,不过不建议搞得过于花哨。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)