从留言板开始做网站(三)——CSS样式代码
2016-10-05 17:50
253 查看
在这里,我们正式开始为留言板写样式,将留言显示的更为美观。
首先,留言显示区,我们采用固定的宽度,用户昵称与时间在一排,内容显示在第二行,每条留言之间设定一条分隔线,然后文字颜色可以稍微调整下,同事还可以加个暖色调的背景色。
比原来的是不是美观了一些(虽然看上去还是很烂)。
在css代码里,应该注意到了,我把距离和宽度的单位都设置为了em,这是一个相对单位,我之前用的都是px和百分比作为单位,不过看到有个前端前辈说,用em比较好,所以我也要从现在开始尽量用这个单位,这个单位和px的转换为:1em=16px,或许某些浏览器会不同,他是根据父元素的文字大小来计算的。
margin: 0 auto; 这个是比较常见的,将元素居中的方法。
下面应该回到index.php文件,可以开始动手写留言发送去的html代码了。
信息发送,需要用到表单的功能、以及数据库的存储。我们先写表单的功能,然后再用CSS美化下。
这里我用了<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将他美化。
首先,留言显示区,我们采用固定的宽度,用户昵称与时间在一排,内容显示在第二行,每条留言之间设定一条分隔线,然后文字颜色可以稍微调整下,同事还可以加个暖色调的背景色。
/*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的伪类
相关文章推荐
- 从留言板开始做网站(四)——数据库的连接和创建
- 从留言板开始做网站(六)——留言内容显示(数据读取)
- 从留言板开始做网站(一)——准备工作
- 从留言板开始做网站(七)——服务端的数据验证和安全输入
- 从留言板开始做网站(二)——HTML和CSS初始化
- 从留言板开始做网站(五)——表单提交(数据插入)
- 从留言板开始做网站(十一)——后台留言修改(数据更新)
- 从留言板开始做网站(十)——后台留言处理(数据删除)
- 从留言板开始做网站(八)——客户端的数据验证(JS验证方法)
- 从明天开始把以前的学过的算法代码用C#都练习下,
- 用于返回本周的开始日期及结束日期一段JS代码
- 从ORA-00031错误代码开始了解KILL SESSION
- 开始写代码 STEP_2
- 开始写代码STEP_6
- 今天开始,点滴积累,开始我的代码人生!
- 开始写代码STEP_3
- 培训开始啦,军训+上课+狂写代码
- 一步一步开始Web Service (有代码和图) (上)
- 一步一步开始Web Service (有代码和图) (下)
- [你必须知道的.NET]第十四回:认识IL代码---从开始到现在