前端是一个非常大的模块，所以我可能在PHP的教程中不能细讲，我只能带着你快速入门，花最少的时间掌握最基本的HTML+CSS使用。
HTML+CSS
上篇文章中我们已经介绍过了HTML，并且把HTML比作人的身体，那么CSS是什么呢？我们把它比作人的衣服，所谓“佛靠金装，人靠衣装”，好看的HTML页面是使用CSS来包装的，下面我们来看一下今天的DEMO。
页面效果
第一步：我们先新建一个Demo01.html的HTML文档，并用编辑器打开
第二步：我们来看一下今天的代码
HTML代码骨架
这部分代码大家看一下，想一下我们昨天讲的标签与标签嵌套。
这里面出现了新的标签有哪些：
（1）<article></article>这个是语义化标签，没什么实际意义，就是说这个标签就是用来包裹一篇文章的。
（2）<i></i>标签中出现的文字，在网页中是斜体。
（3）<section></section>你也可以把它理解成段落<p></p>实际上它和p的效果是一样的，我是为了给大家扩充标签所以用上了。
（4）<img/>这个标签是要放进去一张图片，你可以注意到它是单个存在的，而不像其他标签似的成对存在，它的内部有一个src=" "这里面是放的图片的路径和名称，引入图片,alt = " "是用了解释图片的，就是你鼠标放上去之后，出现的字。
（5）细心的你可能注意到了在上面<li></li>标签中有一个style="......"它是干嘛的呢？这里面可以承载样式，比如字体颜色color="#ccc"; #ccc是灰色，background-color:#....是背景颜色。
第三步：现在来看一下几乎没有加样式的页面是什么样子的
没有加样式的页面
大家可以看到，没有“穿衣服”也就是没有加样式的页面是比较丑陋的。
第四步：我们来分析一下样式
样式1
样式2
我们可以看到在<title></title>与</head>结尾标签的中间使用<style></style>标签包裹了一大串的代码，这里面就是样式。每个样式的作用我都写到上面，大家根据提示与代码的英文意思仔细看一下。
这些东西没有办法再帮你一个个梳理了，我认为这是一个大量使用与模仿的过程，你写的多了，不需要刻意去背，你也会记住。
我们挑其中一个再看一下
ul li{.......xxxxx.......}
很明显这个结构是为ul中的li标签来加样式的，如果你直接写li也行，不过这样层次关系更加明显，ul是父,li是子。
px是像素的意思，margin：表示外边距，margin-left表示左边距，就是与左边标签的距离，你可以看到我们页面效果上多个li之间是有距离的。padding与margin是相反的，一个是对外，一个是对内，不过用法是一致的。
如果有不懂的地方可以去网上查一下这个标签，立马就出来了，也可以给我留言，很乐意帮助你。
网友评论