<div id="box">   <div id="banner"></div>  <!-- 头部：横幅的图片区域 banner  --><div id="menu“></div> <!-- 头部：导航栏区域 menu --><div id="main"> <!-- 中间主要的部分 main --><div id="left"> </div><div id="right"></div></div>  <div id="footer"></div> <!-- 最下面尾部的区域：footer -->
</div>

本段代码实现了对页面的整体布局，初步规划了要实现的功能区域。

实现页面布局后，开始对页面文本的格式和式样进行设置。我们采用Css来对文本进行更改。

Css样式：

引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css"/>

css式样写法：选择器{属性1：属性1的值；...}

选择器分为：id选择器（#id），class选择器（.class），标签选择器（div）

博客网页布局的CSS代码如下（需要设置每个div的宽，高，位置，背景色）：

@charset "utf-8";
#box{width:1024px;/* 设置id是box的div，高度为1014px */height:1300px;margin:0 auto;/*居中*/background-color:#C00;
}
<!– 图片区域的高、宽、背景色 -->
#banner{width:100%;height:209px;background-color:#6FF;
}
<!– 导航菜单区域的高、宽、背景色 -->
#menu{height:50px;background-color:#328048;
}
<!– 中间一大块主体区域的高、宽、背景色 -->
#main{height:1000px;padding-top:10px;
}
<!– 中间区域左边部分的的高、宽、背景色 -->
#left{height:1000px;width:250px;background-color:#6F9;float:left;
}
#right{height:1000px;width:744px;background-color:#FFC;float:right;
}
#footer{height:80px;background-color:#328048;
}

这样就基本完成了网页页面的基础设置。

二 分块区域的单独设置

完成整体框架设置后开始对分块区域进行逐一的雕琢。

1.第一个便是最上方的#banner和#menu区域的调整。具体式样如下：

如图可以看出在规划好的#banner区域需要插入一张图片，下面给出相应的代码：

图片标签<img>：

<img>标签属于单标签：</img>

<img>标签有两个必要的属性：

src属性：图像文件的路径

alt属性：图片说明。当图片找不到或不能显示时，会显示这个文字内容

博客网页-Banner区域的HTML代码如下：

<img src="data:images/bg.jpg" alt="这是我的图片" />

2.在#banner区域下方的是#menu区域，该区域有着导航功能，需要附加超链接在相应的按钮选项上。

超链接标签<a>：
    成对出现<a></a>、用于从一个页面跳转到另一个页面
    <a>最重要的属性href，跳转的连接目标。若没有目标，可用#表示空链接
        <a href=“http://www.baidu.com”>去百度</a>
        <a href=“#”>哪也不去</a>
列表标签<ul><li>：成对出现<ul></ul>、<li></li>、<ol></ol>
    列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记，有序用数字。具体代码如下：

<!–-有序列表 -->
<ol><li><a href=“#”>阳光生活</a></li><li><a href=“#”>校园梦想</a></li>
</ol>
<!– 无序列表 -->
<ul><li><a href=“#”>阳光生活</a></li><li><a href=“#”>校园梦想</a></li>
</ul>

​<!-–导航 -->
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">阳光生活</a></li>
<li><a href="#">校园情缘</a></li>
<li><a href="#">释放梦想</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>​

以上代码实现后的效果图如下：

此时我们发现两个div之间有着较大的空隙。那么我们便消除这个空隙。

<!–- css样式：全局都默认设成无边距 -->
* {margin:0;padding:0;
}
/*通配符-选择器  * 代表应用到页面所有的标签上*/

成果如下:

接下来我们设置一下导航菜单的样式：

​#menu{<!–- 吸管工具，十六进制-->background-color:#328048; height:50px;
}
#menu ul{<!–- 去掉那个点-->list-style:none; width:430px;height:50px;<!–- 设置行高，可以让li中的内容居中-->line-height:50px ;<!–-整个ul标签向右浮动-->float:right;
}
#menu ul li{<!–-每个li标签向左浮动，一个挨一个，知道ul的宽度放不下了，就掉下去了-->float:left;margin-left:20px;
}

超链接样式
    四个链接状态，可以对每一种状态添加样式
        a:link - 正常，未访问过的链接
        a:visited - 用户已访问过的链接
        a:hover - 当用户鼠标放在链接上时
        a:active - 链接被点击的那一刻

代码如下：

​#menu ul li a{<!–- 去掉下划线-->text-decoration:none;font-size:16px;color:#FFF;font-family:"宋体"
}#menu ul li a:hover{color:#F60;
}​

三 部分成果展示

至此关于#banner和#menu区域的设置就基本结束了。剩余的四部分后续添加。