第三次学习-CSDN博客

跟上次作比较这次的学习更直接，大部分都是添加div、引用css，主要是在css中添加代码来逐步表现出网页的样子，代码如下：

----------------------------------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<link href="blog.css" type="text/css" rel="stylesheet" />

</head>

<body>
<div id="box">
   <div id="banner">
   <img src="images/bg.jpg" alt="我的图片不见了" />
</div>
<div id="menu">
   我是菜单
</div>
<div id="main">
   
        <div id="left">
   左边区域
</div>
<div id="right">
   右边区域
</div>
</div>
<div id="footer">
       footer
   </div>
</div>
</body>
</html>

---------------------------------------------------------

这里主体代码没有太大的变化，而下面的css文件增加了很多

----------------------------------------------------------

@charset "utf-8";
/* CSS Document */
#box{
   background-color:#F00;
   width:1024px;
   height:1300px;
   /*margin:0 auto;*/
   margin:0 auto 0 auto;/*上右下左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
   background-color:#66F;
   height:209px;
}
#menu{
   background-color:#C3F;
   height:50px;
}
#main{
   background-color:#6F0;
   height:1000px;
}
#left{
   background-color:#33C;
   height:1000px;
   width:250px;
   float:left;/*可以使div横向排排坐*/
}
#right{
   background-color:#F3F;
   height:1000px;
   width:774px;
   float:right;/*可以使div横向排排坐*/
}