从留言板开始做网站（三）—

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

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

/*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的伪类

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

我优化了李笑来的MarkdownHere，附css样式代码，文章排版再也不用愁了
Markdownhere 是李笑来制作的一套 CSS 主题,已开源在 GitHub 上,对于中文的显示效果比较友好,字距.行距比直接套用英文模板更加自然,是为数不多的优质中文 CSS 主题. 使用Ma ...
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅甘肃蚤缀.垫状棘豆垫状驼绒藜 ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
根据html除去多余css样式在线,利用css-redundancy-checker去除冗余、无用、废弃的css样式代码...
背景为网站写CSS样式的时候,经常会遇到CSS样式的修改或者网页设计的改变,而这些网页在经过无数次的修改之后,可能有些样式已经用不到了,css文件中可能存在着一些没用的CSS代码.这些无用的CSS代 ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
花钱购买制作精美的留言板或者留言板设计的HTML + CSS + DIV 源码
比较高质量的设计了整套的留言板,例如留言显示效果,回复效果,后台管理效果等,代码质量不高问题不严重,就是想要设计的质量高的留言板, 最高愿意支付1000元设计费,不是自己不会写程序,也不是做不出来一个 ...
学校留言板网页html和css,html,css,js,简单的网页留言板
效果如图: 实现代码如下: html代码: 简单的网页留言板简单的网页留言板 index.js代码: ///** // * Created by Administrator on 2014/11/2 ...
php 去除标签内样式,PHP去除html标签,php标记及css样式代码参考
语法: string strip_tags(string str); 传回值: 字串函式种类: 资料处理解析:本函式可去掉字串中包含的任何 HTML 及 PHP 的标记字串.若是字串的 HTML ...
html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影男女第一句:act ...
服务器怎么控制忽略样式_使用JavaScript来编写你的CSS样式代码——JSS
介绍 JSS是CSS的创作工具,它允许你使用JavaScript以声明,无冲突和可重用的方式描述样式.它可以在浏览器,服务器端或在构建时在Node中编译.JSS与框架无关.它由多个包组成:核心部分,插 ...

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

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

最新文章

热门文章