Java Web开发基础第二课-CSDN博客

这一节主要了解了网页的制作与设计，用banner的方法实现左侧列表，主体内容与脚注，最后实现网页的发布。

制作网页首先需要构造网页布局，构造左边、右边、主要部分、尾部，还有菜单的构造，以及图片的插入等。代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text ml; 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>

创建两个文件，将两个文件连接、调用，设置好网页的背景、格局，设置每个div的宽、高、位置、背景色。

@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横向排排坐*/
}