从留言板开始做网站（三）——CSS样式代码

在这里，我们正式开始为留言板写样式，将留言显示的更为美观。

首先，留言显示区，我们采用固定的宽度，用户昵称与时间在一排，内容显示在第二行，每条留言之间设定一条分隔线，然后文字颜色可以稍微调整下，同事还可以加个暖色调的背景色。

/*Main*/
.wrap {
    margin: 0 auto;
    width: 56.25em;
}

/*mes-board*/
.mes-board {
    margin: 1.875em 0;
    border: 1px solid #aaa;
    padding: 0 .7em;
    background-color: #fcf;
}
.mes-board li { padding: .7em 0; }
.mes-board li + li { border-top: 1px dashed #fff; }
.mes-board h4 {
    display: inline;
    margin-right: 2px;
    font-weight: 400;
    color: #66f;
}
.mes-board small { color: #999; }
.mes-board p {
    padding: 1em 0;

}

先看下效果：

比原来的是不是美观了一些（虽然看上去还是很烂）。

.wrap {
    margin: 0 auto;
    width: 56.25em;
}

在css代码里，应该注意到了，我把距离和宽度的单位都设置为了em，这是一个相对单位，我之前用的都是px和百分比作为单位，不过看到有个前端前辈说，用em比较好，所以我也要从现在开始尽量用这个单位，这个单位和px的转换为：1em=16px，或许某些浏览器会不同，他是根据父元素的文字大小来计算的。

margin: 0 auto; 这个是比较常见的，将元素居中的方法。

.mes-board li + li { border-top: 1px dashed #fff; }

这里我用了+  加号，这个是CSS里面的相邻兄弟选择器，就是会选择与加号左边在同个父级下的兄弟元素（即同级元素），除了自己外（加号左边）其他兄弟元素应用css代码所定义的属性。就像我写的这里，就是除了第一个<li>标签外，其他的<li>都将在顶部定义一条虚线的边框。这是为了最后一个<li>的底部不会出现边框，以免和外边框重叠，这样也比较美观一点。

.mes-board h4 {
    display: inline;
    margin-right: 2px;
    font-weight: 400;
    color: #66f;
}

display:inline; 将<h4>这个块级元素变为行级元素，而<small>也是一个行级元素，两者可以共处一行。我在这里将文字的粗细用数字来表示，这个也是代码规范所建议的，目前大多浏览器仅支持400和700两个数字，即normal和blod。代码规范里同样也建议，颜色代码能够简写的就简写。

下面应该回到index.php文件，可以开始动手写留言发送去的html代码了。

信息发送，需要用到表单的功能、以及数据库的存储。我们先写表单的功能，然后再用CSS美化下。

<section class="mes-send">
    <form method="post" action="send.php">
        <div class="form-group">
            <label for="user_name">姓名：</label>
            <input type="text" id="user_name" name="user_name" placeholder="用户名称">
         </div>
         <div class="form-group">
            <label for="user_mes">留言：</label>
            <textarea id="user_mes" name="user_mes"></textarea>
         </div>
         <input type="submit" value="提 交">
    </form>
</section>

这里我用了<section>语义化标签，这是HTML5的新标签，对于他们的理解，其实并不强求，如果是对SEO有强迫症的同学，可以看下： HTML5的革新——语义化标签

<form>是HTML的表单标签，属性method定义表单的提交方式,有get和post两种方式，两者的的不同点网上大牛说的很多，简单点就是get是会把数据写入到action所指向的URL后面的，这样就会被人看到，并不安全。而post则是放在表单的数据集合中，发送到action所指向的文件进行处理，不会出现在URL中。我们用的是post的方式，action就是表单提交后，处理表单数据的文件地址。如果有文件或者图片上传的内容，还需要添加一个属性：enctype="multipart/form-data"  。

在<label>中有个for属性，这与<input>的id名相对应，就会有点击<label>名称，则会焦点在相对应的输入框中的效果。

<input>是文字输入框，根据type的不同，对输入的内容也会有所限制，但是某些type并不被浏览器所接受，一般使用的type为：text、password、number、email 、submit、radio、checkbox、hidden等等。placeholder属性用来提示用户的输入内容，点击输入框则会消失。

<textarea>是文字域，可输入多行文字，可以用属性rows来定义默认的高度。

最后的type为submit，就是提交按钮啦。

表单内的name属性就是表单提交到action要处理的数据名。

这是CSS美化前的表单外观，非常的简陋，这样的用户体验是非常不好的，因此我们需要用CSS将他美化。

/*mes-send*/
.mes-send {
    padding: .65em;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.form-group { padding: 1.25em; }
.form-group label { vertical-align: top; }
.mes-send input[type="text"],
.mes-send textarea {
    padding: 1px;
    width: 40%;
    border: 1px solid #b7b7b7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.mes-send input { height: 2em; }
#btn {
    margin-left: 1.25em;
    padding: 5px;
    border: none;
    -webkit-border-radius: 1.25em;
    -moz-border-radius: 1.25em;
    border-radius: 1.25em;
    width: 15%;
    font-size: 12pt;
    color: #fff;
    background-color: #66f;
    cursor: pointer;
}
#btn:hover { background-color: #03c; }

添加样式后的效果：

.mes-send {
    padding: .65em;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

-webkit-border-radius: 5px;和 -moz-border-radius: 5px; 是为了兼容webkit内核浏览器（谷歌）和moz内核的浏览器（火狐），还有-ms-，-o-分别代表IE和欧朋。

.mes-send input[type="text"],
.mes-send textarea {
    padding: 1px;
    width: 40%;
    border: 1px solid #b7b7b7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

这里的input[type="text"]使用了属性选择器，意思是选择type="text"的input。

#btn:hover { background-color: #03c; }

这里使用了CSS的伪类，还有其他很多伪类，要了解的同学可以点击这里： CSS的伪类