<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页2</title>
<style type="text/css">

*{ margin:0px auto;
       padding:0px;
	   font-family:微软雅黑;
	   }
#head{ width:1200px;
       height:118px;
	   }
#logo{ width:200px;
       height:118px;
	   float:left
	   }
#caidan{ width:1000px;
         height:118px;
		 float:left;
		 }
.fenlei{ width:80px;
         height:80px;
		 float:right;
		 background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg.png);
		 text-align:center;
		 line-height:80px;
		 vertical-align:middle;
		 font-size:12px;
		 color: #b08f23;
		 margin-top:40px;
         }
.fenlei:hover{ background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg_h.png);
               cursor:pointer;
			   color:#FFF;
			   }
.shouye{ color:#FFF;
         background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg_h.png);
		 }
#datu{ width:1200px;
        height:648px;
		margin-top:20px;
		}
#zuo{ width:44px;
      height:44px;
	  background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/jiantou.png);
	  position:relative;
	  top:-368px;
	  left:-578px;
	  }
#you{ width:44px;
      height:44px;
	  background-image:url(0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/jiantou.png);
	  background-position:right 0px;
	  position:relative;
	  top:-412px;
	  left:578px;
	  }
#chanpin-tuijian{ width:1200px;
                  height:50px;
				  font-size:24px
				  line-height:50px;
				  vertical-align:middle;
				  text-align:center;
				  color:#00F;
				  font-weight:bold;
				  }
#chanpin{ width:1200px;
          height:400;
		  }
		  
.chanpin-jieshao{ width:200px;
                  height:300px;
				  float:left;
				  margin:0px 20px 0px 20px;
          }
.chanpin-mingcheng{ width:200px;
                    height:50px;
					font-size:18px;
					line-height:50px;
					vertical-align:middle;
					}
.chanpin-yongtu{ width:200px;
                 height:50px;
				 font-size:12px;
				 line-height:50px;
				 vertical-align:middle;
				 }
#chanpin-zhanshi{ width:1200px;
                  height:400px;}
.qingdan{ width:200px;
          height:400px;
		  border:1px solid blue;
		  float:left;
		  margin-top:100px;
		  margin-right:35px;
		  
		  }
.wenzi{ width:200px;
        height:50px;
		background-color:#b08f23;}
.zhanshi{ width:100px;
          height:50px;
		  font-size:18px;
		  float:left;
		  line-height:50px;
		  vertical-align:middle;
		  }
.gengduo{ width:100px;
          height:50px;
		  font-size:18px;
		  float:right;
		  line-height:50px;
		  vertical-align:middle;
		  }
.xiaotu{ width:200px;
         height:300px;}
.xuewei{width:200px;
	height:50px;
	padding:10px;
	overflow:hidden;
	font-size:13px;
	text-indent:20px;
	color:#7b7b7b;}

</style>
</head>

<body>
  <div id="head">
      <div id="logo"><img src="0611样式表/0603/img/logo1.png" width="200px" height="118px" /></div>
      <div id="caidan">
         <div class="fenlei">联系我们</div>
         <div class="fenlei">关于我们</div>
         <div class="fenlei">新闻动态</div>
         <div class="fenlei">产品展示</div>
         <div class="fenlei shouye">首页</div>
      </div>
  </div>
  <hr color="#b08f23" size="5" >
  <div id="datu">
       <img src="0611样式表/0603/img/20170516114133939.jpg" width="1200" height="642" />
       <div id="zuo">
       </div>
       <div id="you">
       </div>
  </div>
  <div id="chanpin-tuijian">公司产品推荐</div>
  <div id="chanpin">
       <div class="chanpin-jieshao">
       <img src="20170518071914505.jpg" width="200" height="300" />
           <div class="chanpin-mingcheng">明星产品推荐</div>
                <div class="chanpin-yongtu">推荐产品</div>
       
       </div>
       <div class="chanpin-jieshao">
       <img src="20170518071914505.jpg" width="200" height="300" />
           <div class="chanpin-mingcheng">明星产品推荐</div>
                <div class="chanpin-yongtu">推荐产品</div>
       
       </div>
       <div class="chanpin-jieshao">
       <img src="20170518071914505.jpg" width="200" height="300" />
           <div class="chanpin-mingcheng">明星产品推荐</div>
                <div class="chanpin-yongtu">推荐产品</div>
       
       </div>
       <div class="chanpin-jieshao">
       <img src="20170518071914505.jpg" width="200" height="300" />
           <div class="chanpin-mingcheng">明星产品推荐</div>
                <div class="chanpin-yongtu">推荐产品</div>
       
       </div>
       <div class="chanpin-jieshao">
       <img src="20170518071914505.jpg" width="200" height="300" />
           <div class="chanpin-mingcheng">明星产品推荐</div>
                <div class="chanpin-yongtu">推荐产品</div>
       
       </div>
  </div>
  <div id="chanpin-zhanshi">
      <div class="qingdan">
          <div class="wenzi">
               <div class="zhanshi">产品展示</div>
               <div class="gengduo">更多</div>
          </div>
          <div class="xiaotu">
          <img src="20170516071750947.jpg" width="200" height="300" />
          
          </div>
          <div class="xuewei">
          臻体纤美穴位贴敷治疗贴采用独特配方研发而成,拥有远红外磁疗技术,纯天然外用健康产品,拥有很好的辅助瘦身效果,安全无副作用,此产品均由几十年国家认证老药企-朱氏药业生产。
          </div>
      </div>
      <div class="qingdan">
          <div class="wenzi">
               <div class="zhanshi">产品展示</div>
               <div class="gengduo">更多</div>
          </div>
          <div class="xiaotu">
          <img src="20170516071750947.jpg" width="200" height="300" />
          
          </div>
          <div class="xuewei">
          臻体纤美穴位贴敷治疗贴采用独特配方研发而成,拥有远红外磁疗技术,纯天然外用健康产品,拥有很好的辅助瘦身效果,安全无副作用,此产品均由几十年国家认证老药企-朱氏药业生产。
          </div>
      </div>
      <div class="qingdan">
          <div class="wenzi">
               <div class="zhanshi">产品展示</div>
               <div class="gengduo">更多</div>
          </div>
          <div class="xiaotu">
          <img src="20170516071750947.jpg" width="200" height="300" />
          
          </div>
          <div class="xuewei">
          臻体纤美穴位贴敷治疗贴采用独特配方研发而成,拥有远红外磁疗技术,纯天然外用健康产品,拥有很好的辅助瘦身效果,安全无副作用,此产品均由几十年国家认证老药企-朱氏药业生产。
          </div>
      </div>
      <div class="qingdan">
          <div class="wenzi">
               <div class="zhanshi">产品展示</div>
               <div class="gengduo">更多</div>
          </div>
          <div class="xiaotu">
          <img src="20170516071750947.jpg" width="200" height="300" />
          
          </div>
          <div class="xuewei">
          臻体纤美穴位贴敷治疗贴采用独特配方研发而成,拥有远红外磁疗技术,纯天然外用健康产品,拥有很好的辅助瘦身效果,安全无副作用,此产品均由几十年国家认证老药企-朱氏药业生产。
          </div>
      </div>
      <div class="qingdan">
          <div class="wenzi">
               <div class="zhanshi">产品展示</div>
               <div class="gengduo">更多</div>
          </div>
          <div class="xiaotu">
          <img src="20170516071750947.jpg" width="200" height="300" />
          
          </div>
          <div class="xuewei">
          臻体纤美穴位贴敷治疗贴采用独特配方研发而成,拥有远红外磁疗技术,纯天然外用健康产品,拥有很好的辅助瘦身效果,安全无副作用,此产品均由几十年国家认证老药企-朱氏药业生产。
          </div>
      </div>
  
  </div>
  <!--结束-->
 <hr color="#FF9900" size="1" />

  

这是今天学习的网页布局例子,刚开始慢慢写还好,后半段写着写着就出问题了,像文字溢出,流的问题等等。

刚入门的新学员的第一次写网页总是沉不住气,后面越写越乱。还是要加强自己的技能训练,多加练习,持之以恒才能写好一个网页。