义乌小白
义乌小白

从留言板开始做网站（三）——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;

}
先看下效果：

从留言板开始做网站（三）——CSS样式代码_第1张图片

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

.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代码所定义的属性。就像我写的这里，就是除了第一个
  • 标签外，其他的
  • 都将在顶部定义一条虚线的边框。这是为了最后一个
  • 的底部不会出现边框，以免和外边框重叠，这样也比较美观一点。 

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

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

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

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

    
    
    
        
    
            
            
         
    
         
    
            
            
         
    
         
    
    

     这里我用了
    语义化标签，这是HTML5的新标签，对于他们的理解，其实并不强求，如果是对SEO有强迫症的同学，可以看下： HTML5的革新——语义化标签 
  
     
  
    是HTML的表单标签，属性method定义表单的提交方式,有get和post两种方式，两者的的不同点网上大牛说的很多，简单点就是get是会把数据写入到action所指向的URL后面的，这样就会被人看到，并不安全。而post则是放在表单的数据集合中，发送到action所指向的文件进行处理，不会出现在URL中。我们用的是post的方式，action就是表单提交后，处理表单数据的文件地址。如果有文件或者图片上传的内容，还需要添加一个属性：enctype="multipart/form-data"  。
     
  
    在
     
  
    是文字输入框，根据type的不同，对输入的内容也会有所限制，但是某些type并不被浏览器所接受，一般使用的type为：text、password、number、email 、submit、radio、checkbox、hidden等等。placeholder属性用来提示用户的输入内容，点击输入框则会消失。