html-制作开心网游戏页面,【手把手】制作一个简单的HTML网页

新建一个html文件：

1488713605137007396.png

我要给body添加一些样式，就在head元素上挂载一个style元素。

1488713655277049231.png

然后，写样式表：

1488714003902054281.png

效果：

1488714070605004548.png

这样的话，我们就可以看到body部分了。现在，我给body添加一点padding。

1488714153418019891.png

页面上看不出区别，让我们打开F12，看一下现在的body变成了什么样子。

1488714230777074058.png

示意图：

1488714254871088416.png

从图中可以看出，body元素分为三层，最里面的一层，就是520 x 500的那部分，这个叫做内部真实空间，也就是说，你可以在里面添加其他元素，比如div元素，p元素，a元素等等。然后中间的一层就是padding了，如果你没有加padding，那么这一层就相当于一层薄薄的保鲜膜，其实它没有厚度，就是0px。最外面的一层就是border，在我们这个例子中，body的border部分就只有2px，薄薄的一层。现在，我给body加一个背景色：

1488714627059016444.png

1488714814074059044.png

奇怪的是，怎么外面也变成orange了？外面一层是什么啊，是不是html元素啊，那么我们给html元素加一个白色的背景。

1488714899480010892.png

效果：

1488714887918013609.png

OK，我们接下来在body元素上挂载一个div元素。

1488715075871007810.png