在上一篇中我们事先了一个简单的Hello world页面。
在这一篇中，我们来认识下布局，和样式。
目前说的比较多的就是DIV+CSS
DIV 是一个html里面的标签，就好像h1一样。
看下面一段代码
<html> <head> <title>DIV+CSS</title> </head> <body> <div> DIV+CSS </div> </body> </html>
里面的所有标签，除了div其他在上一节都说过。运行结果如下图
没有任何的惊喜。
下面我们通过css让它有点变化，给它加个边框
代码修改成下面的样子
<html>
<head>
<title>DIV+CSS</title>
<style>
.content{
border:1px solid;
}
</style>
</head>
<body>
<div class="content">
DIV+CSS
</div>
</body>
</html>解析下代码：
1、我在head里面加入style标签，这是一个定义样式的标签，所有的样式都写在这个标签里面。而里面的样式代码就叫做css。
2、我在div里面加入了class="content" ，这句代码的意思在这个div里面 加入一个class属性，而属性值是content。属性值可以随便写，但要有意义。不能起a，b，c 这些毫无意义的值。class属性是一个常用的属性。在标签里面还可以有其它属性，例如：id属性 ，我们写成
<div id="contentid" class="content">
当然，值可以随便取有意义的。
3、刚刚我们在div里面写了class=‘content‘ 而style里面有写了.content{border:1px solid;} 这里style里面的意思就是将class=‘content‘的标签的border(边框线)设置为1px (1像素) solid(实心的)。
运行效果如下，内容上面多了一条边框线
现在我们再改改，加个背景颜色
<html>
<head>
<title>DIV+CSS</title>
<style>
.content{
border:1px solid;
}
#contentid{
background-color:red;
}
</style>
</head>
<body>
<div id="contentid" class="content">
DIV+CSS
</div>
</body>
</html>代码解析
1、刚刚我们说了一个id的属性。现在代码里面就有一个id的属性。值为contentid。而style里面加入了#contentid{background-color:red;}。这里面的意思就是将id=contentid的标签的background-color（背景颜色） 设置为red（红色）
运行结果如下
留意下，在div里面写id的时候，style前面用了#号，写class的时候前面用了英文句号. 就是这样用，没错。id用#号表示； class用.表示 这叫做“选择器”，#contentid 就是选择id为contentid的标签。
注意在一个页面中，id值是唯一的，class值可以多个。
就是说：已经定义了id=contentid，就不能再其他标签定义id=contentid，因为contentid 已经表示了一个标签，其他标签不能再用contentid，但可以用其他值，例如id=contentid2
但是class可以有多个，可以在多个标签上定义class=content都是没有问题的。
看下面的代码，就有两个一模一样的class，两个值不一样的id
<html>
<head>
<title>DIV+CSS</title>
<style>
.content{
border:1px solid;
}
#contentid{
background-color:red;
}
</style>
</head>
<body>
<div id="contentid" class="content">
DIV+CSS
</div>
<div id="contentid2" class="content">
DIV+CSS2
</div>
</body>
</html>效果如下
我们可以看到，两个div都有了边框线，说明只要标签有class="content" 就会出现边框线，因为在style中定义了.content{border:1px solid;}
在css中我们可以定义各种各样的样式，字体大小，颜色，背景色，宽度，高度之类想到得几乎都可以实现。
那么到此简单的css入门了。
下面看下布局
html里面的标签都有一些默认的样式，我们可以利用这些默认的样式做出很多需要的效果。
先看简单的
标签分为：行级元素和块级元素，简单理解元素就是标签。
div是一个块级元素
块级样式的特征就是会占一整行
第二个div或者其他元素都会在下一行显示
下面写一个行级元素label，我把第一个div删除了，因为妨碍地方，代码如下
<html>
<head>
<title>DIV+CSS</title>
<style>
.content{
border:1px solid;
}
#contentid{
background-color:red;
}
</style>
</head>
<body>
<div id="contentid2" class="content">
DIV+CSS2
</div>
<label>姓名：</label><label>51CTO</label>
</body>
</html>效果如下图
代码分析
1、我们可以看到body里面有两个label标签，内容分别为“姓名：”和“51CTO”，在页面上可以在一行中显示，没有分行显示，这就是行级元素的特征。
我们看下面用div写会怎么样
代码如下
<html>
<head>
<title>DIV+CSS</title>
<style>
.content{
border:1px solid;
}
#contentid{
background-color:red;
}
</style>
</head>
<body>
<div id="contentid2" class="content">
DIV+CSS2
</div>
<label>姓名：</label><label>51CTO</label>
<div>姓名：</div><div>51CTO</div>
</body>
</html>显示效果如下
代码分析
我们可以看到，代码中用来两个div来包含内容，会换行显示，这就是块级元素的特征
好了，简单的布局，横的，竖的，就这样实现了，下一篇我们用更多的样式和简单的标签来一起做一个菜单。
本文出自 “简单开发者” 博客，请务必保留此出处http://zjm80230.blog.51cto.com/9905372/1909327
原文地址：http://zjm80230.blog.51cto.com/9905372/1909327
