如何用CSS实现这个网页布局

html-css016

如何用CSS实现这个网页布局,第1张

实现网页布局的方式方法比较多，布局方式可以大概分为这几类。

布局种类：

1、table布局（网页的兴起，1995）

2、Flash布局（自由的黄金时代，1996）

3、div+css（CSS的诞生，1998）

4、栅格与响应式（移动端的兴起，2007与2010）

当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。

Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。

创建一个文本文档，输入以下内容：

<!DOCTYPE html>

<html>

<head>

<style>

p {

background-color: lightblue

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>p标签拥有浅蓝色背景色！</p>

</body>

</html>

然后保存文件，将后缀名修改为.HTML，然后用浏览器打开，一个简单的网页就出现了。