Web(七)CSS页面布局-网页布局页面的制作

朱雀 2023-09-30 17:21 13阅读 0赞

## 第1关：网页布局的结构设计 ##

#### 编程要求 ####

根据下面的结构草图，在右侧编辑器的Begin--End区域补充标签及对应的属性值代码。

#### 具体要求 ####

1.  为布局草图中的红色区域添加div标签，并按图中要求设置其id属性的取值。
2.  在第4个红色区域的div标签中再并列嵌套三个div标签，并按图中要求设置其class属性的取值。

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>网页布局</title>
    </head>
    <body>
    
    <div id="top"></div>
    <div id="nav"></div>
    <div id="banner"></div>
    <div id="content">
        <div class="content_left"></div>    
        <div class="content_middle"></div>
        <div class="content_right"></div>
    </div>  
    <div id="footer"></div>
      
      
      
      
      
    
    </body>
    </html>

## 第2关：网页布局的样式设计 ##

#### 编程要求 ####

根据提示，在右侧编辑器的Begin - End区域的样式内容中补充样式规则，以实现下面的页面效果。

#### 具体要求 ####

1.对div标签进行样式设置。

（1）使其内容区的宽度设置为980px。

（2）使用两个参数设置外边距，其中上下外边距设为0，左右外边距设为auto。

2.对类名为waicontent\_left的元素进行样式设置。

（1）使其内容区的宽度设置为200px、高度设置为300px

（2）设置背景颜色值为\#CCC。

（3）外边距设为0

（4）设置左浮动

3.对类名为waicontent\_middle的元素进行样式设置。

（1）使其内容区的宽度设置为570px、高度设置为300px

（2）设置背景颜色值为\#CCC。

（3）使用4个参数设置外边距，使得上、右、下边距为0，左边距为5px

（4）设置左浮动

4.对类名为waicontent\_right的元素进行样式设置。

（1）使其内容区的宽度设置为200px、高度设置为300px

（2）设置背景颜色值为\#CCC。

（3）外边距值均为0

（4）设置右浮动

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>网页布局</title>
    
    <style type="text/css">
    body{margin:0; padding:0;}
    
    div{
    	width:980px;                                               /*设置所有模块的宽度为980px、居中显示*/
    	margin:0px auto;
    }
    
    #top{height:40px; background:url(https://data.educoder.net/api/attachments/2141326)}       
    #nav{height:60px; background:url(https://data.educoder.net/api/attachments/2141327)}
    #banner{height:200px; background:url(https://data.educoder.net/api/attachments/2141342)}
    #content{height:300px; }
    
    .content_left{                             /*左侧部分左浮动*/
    	width:200px;
    	height:300px;
    	background-color:#CCC;
        float:left;
    	margin:0;
    	background:url(https://data.educoder.net/api/attachments/2141349)
    }
    
    .content_middle{                           /*中间部分左浮动*/
    	width:570px;
    	height:300px;
    	background-color:#CCC;
    	float:left;
    	margin:0 0 0 5px;
    	background:url(https://data.educoder.net/api/attachments/2141352)
    }
    
    .content_right{                           /*右侧部分右浮动*/
    	width:200px;
    	background-color:#CCC;
    	float:right;
    	height:300px;
    	margin:0;
    	background:url(https://data.educoder.net/api/attachments/2141351)
    }
    
    #footer{
    	height:90px; 
    	background:url(https://data.educoder.net/api/attachments/2141353)
    }
    </style>
    
    </head>
    <body>
      <div id="top"></div>
      <div id="nav"></div>
      <div id="banner"></div>
      <div id="content">
        <div class="content_left"></div>
        <div class="content_middle"></div>
        <div class="content_right"></div>
      </div>
      <div id="footer"></div>
    </body>
    </html>