<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>
<textarea></textarea>这个就是html中的留言框了，是大的，小的是：
<input type="text" />
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条）