您的位置：首页 > 运维架构 > 网站架构

从留言板开始做网站（二）——HTML和CSS初始化

2016-10-05 09:00 477 查看

这一篇，我们开始搭建留言板的模板布局，我们的布局也将遵从W3C的规范用DIV+CSS，我们的书写规范也将遵从一定的规范，本人之前是没有什么规范的，都是乱写一通，但是我们要趁着这个机会，将这个坏习惯改掉，所以大家一起努力，希望我把这个系列全部完成的时候能成为书写规范的程序猿，遵从的规范后面会提到的。

先规划下留言板的布局，最简易的留言板应当分为：留言显示区和留言发送区，留言显示区，可分为留言人的昵称，留言时间和留言内容；留言发送区，可分为留言人昵称输入框

和留言内容输入框，留言时间可在后台根据计算机时间自动添加。

网页要显示的内容，都需要写在<body></body>标签内，我们先写入一个外部的层，并将class命名为wrap

<body>
<div class="wrap">
</div>
</body>

对于标签的name、id、class等命名最好用语义相关的单词，甚至是拼音（本人推荐还是使用英语单词较好，毕竟大多数人都这么做），搭建最外部的层，是将留言板的宽度变

为固定宽，这样在CSS文件里只要设置.wrap的宽度即可，我们先搭好部分布局，再写相应的CSS（这只是我个人的习惯而已，也不知道这个习惯好不好）。

在.wrap内写入留言显示区域的HTMLda，我们将它的class命名为mes-board。

<body>
<div class="wrap">
<!-- 留言显示区 -->
<ul class="mes-board">
<li class="mes-content">
<h4>义乌小白：</h4>
<small>2016-10-02 11:00</small>
<p>大神之路，从留言板开始！</p>
</li>
<li class="mes-content">
<h4>义乌小白：</h4>
<small>2016-10-02 11:00</small>
<p>大神之路，从留言板开始！</p>
</li>
</ul>
</div>
</body>

这里我预先填入了一些内容，为的是能够预览效果。

 这个是HTML的注释标签，用于代码说明，利于代码的维护或者方便给他人理解，在网页上是不会显示的。有时候我也会把一些暂时不用的代码注释掉，以便以后使用，不需要重新输入。

<ul><li>是用来表示列表内容的，用到的地方非常的多，<h4></h4>表示抬头、标题等类似的标签还有<h1>、<h2>、<h3>等等一直到<h6>为止，数字越小字体越大越粗，当然

你也可以通过CSS来改变它的默认样式，但是一般情况下并不建议这么做。在这里要注意<h1>这个标签，对于SEO还是有点用处的，一般<h1>标签内都会包含该页的核心关键

词，但是绝对不能滥用，会被搜索引擎认为优化过渡，建议一个页面不要超过1个，<h2>与<h3>的功能相对减弱很多，也可以用用，一个页面不要超过2-3个。

按照我的坏习惯，写好部分代码，再写相应的css样式内容。我们先在浏览器中看下未写样式的版面。

现在我们开始写css样式。我们首先写的不是网页内容的css样式，而应该是将css初始化，因为每个浏览器他自身有着默认的css样式，而且在某些标签下数值各不相同，因此，我们应该将他们统一（我的这篇小白文，不涉及浏览器的兼容性）。

html,body,div,article,section,ul,li,form,p,input,button,textarea,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
ol,ul,li { list-style: none; }
a,a:hover { text-decoration: none; }
img { border: none; }
body {
font: 100%/1.5 "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
color: #666;
}

当然初始化并不仅仅是这些，但是这些已经够我们用的了，我的建议也是用多少初始化多少，我们看看初始化后的界面

所有的默认样式的外边距和内边距都归为0了，这将方便我们为相应的元素添加样式，达到我们所想要的排版；文字的颜色和字体也都改变了。我们下面将一一介绍：

/* */ 是css的注释，可注释多行

html,body,div,article,section,ul,li,form,p,input,button,textarea,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}

margin定义元素的外边距，padding定义的是内边距，这里涉及到CSS的一个基本盒子模型，这里截取一张W3C school的一张图片，大家也可以过去看下，这是链接，大家也会发现，初始化的都是块级元素，CSS中块级元素和行级元素，最大的区别就是块级独占一行，行级可以共处一行。两者也可以通过display来互换。

ol,ul,li { list-style: none; }

去除了li前面的标志类型，就是小圆点，前面2张图可以比较出来。

a,a:hover { text-decoration: none; }

去除链接的下划线，以及鼠标放上去后也不会出现下划线，a:hover 就是定义鼠标放在链接上的样式

img { border: none; }

去除图片的边框

body {
font: 100%/1.5 "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
color: #666;
}

这是为网页的文字设置文字大小、行高、字体以及颜色；其中font我这里使用了简写的方式，分开写就是：

body {
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
font-size: 100%;
line-height: 1.5;
color: #666;
}

font-family 定义字体，先写西文字体，再写中文字体，最后写一个通用字体。浏览器应用字体也是从前往后，如果前面的字体没有，就往后寻找；font-size定义文字大小，我在这里是定义他们按照默认的字体大小；line-height定义行高，不带单位的行高则动态计算，这个我也说的不是很清楚，大家自行百度吧

；color顾名思义，就是颜色，定义文字的颜色，#666是缩写，能缩写尽量用缩写，也可以用单词，但是不建议使用。

通常我们应该还要写一个清除浮动的样式，我们可以命名为clearfix

/**
* clearfix hack
* reference:http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after { clear: both; }
/*for IE6/7*/
.clearfix { *zoom: 1; }

什么是浮动？这个后面用到时会讲到的，这个也是很重要的概念，建议大家去看下相关资料。我这个clearfix是按国内的大神推荐的一个网址写的，在注释部分有地址。里面的内容我也不一一讲解了，后面我也不会讲的很详细了，因为这样好拖节奏，两篇文章下来，还在开头阶段。一些非常基础的知识，可以预先在W3C school里面自行了解，或者本人推荐关于HTML和CSS的一本书籍，是Head First系列的

关于CSS的书写规范，请参照这里：web项目开发之前端规范 --- CSS编码规范 CSS属性的书写顺序我是按照腾讯的CSS代码规范来的，其实都是差不多的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html php 新手教程留言板 css

相关文章推荐

新的分享

章节导航