如何用html+css制作一个留言板

html-css026

如何用html+css制作一个留言板,第1张

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），当然可以使用更多的动画效果来，不过不建议搞得过于花哨。

需要 先给一个宽度 才能用  margin:0px auto 的

码代码中...

占位 <!--这是HTML的-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<link href="style.css" rel="stylesheet" type="text/css" />

<title>无标题文档</title>

</head>

<body>

<div id="daohanglan">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

</div>

</body>

</html> /*这是CSS的*/

body{

margin:0px

}

#daohanglan{

padding:0px

height:20px

width:700px

margin:0px auto

}

#daohanglan ul li a {

text-align:center

width:100px

display:block

text-decoration:none

background-color:#999

color:#FFF

}

#daohanglan ul li {

float:left

list-style:none

}

#daohanglan ul{

padding:0px

margin:0px

}

#daohanglan ul li a:hover{

background-color:#666}

微信小程序现在很火，于是也就玩玩，做了一个简易的留言板，让大家看看，你们会说no picture you say a j8 a,好吧先上图。

样子就是的，功能一目了然，下面我们就贴实现的代码，首先是HTML页面，好吧，其实微信小程序的是wxml（微信ml）总感觉怪怪的，有木有。

微信小程序里把div改成了view，听说div也可以用，没有实验过，不知道真假。不过就这样吧，反正原理都一样，页面效果主要看css，又错了，是wxss（微信ss）说实话总觉得……这种感觉不好多说。

看我们的布局代码，超简单，完全和css一样

才36行，现在一看，好吧，真特么简单。微信小程序的功能实现主要看js部分，好在这个他们没有叫（wxjs），微信小程序的js写法，怎么说呢，假如你会vue.js React或者是AngularJS，完全是玩一样的就会了，好吧，不过这三个我暂时都不会！！！！！！！！！！！！！！！

完美的36行，早知道wxml注释写一堆应该也凑个36，这个数字多顺啊。

哈哈哈，好了，所有的功能代码都在这里了，大家赶快也去玩玩吧。