web学习第二课，HTML+CSS样式+div分块

---博客静态网页（项目实例）

今天我们需要完成的项目实例是一个带有图片的静态网页，区域布局分明。

做一个静态网页的步骤顺序：

• 网站整体布局分析设计
• 导航与Banner的实现
• 左侧列表的实现
• 主体内容与脚注的实现
• 发布

 ---网站整体布局分析设计

   

将整体看做box，box分出Banner,menu,main（left,right）,footer四部分div标签，然后设计相应的长宽高以及不同的颜色，使他们可以分开。

Html的标签，成对出现

定义页面上的一块区域，对整个页面划分区域用

常用的有id和class属性：

Css样式：

引用方式-外链式：

css样式写法：选择器{ 属性1:属性1的值;… }

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

部分HTML代码：

    

    	

        
        

        	我是菜单
        
        

        	
       		

            	左边区域
            
            

            	右边区域
            
         
        
        

    		footer
    	
    

部分CSS代码：

#box{
	background-color:#F00;
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}

---导航与Banner的实现

HTML中的3个新标签：图片标签、超链接标签、列表标 签

• CSS样式中的：背景色、超链接样式、列表样式的写法

  图片标签：

  标签属于单标签：

  标签有两个必要的属性：

  src属性：图像文件的路径

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

  部分HTML代码：

  
  
  
  
  
  
  
  
  
  
  
  
      
  
      	
  
          	
          
          
  
          	我是菜单
          
          
  
          	
         		
  
              	左边区域
              
              
  
              	右边区域
              
           
          
          
  
      		footer
      	
      
  
  

  部分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横向排排坐*/
  }
  
  #footer{
  	background-color:#F63;
  	height:80px;
  }
  

  ---后面三步，未完待续...

转载于:https://my.oschina.net/u/4090663/blog/3021539