<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{ 1200px;
height:118px;
}
#logo{ 200px;
height:118px;
float:left
}
#caidan{ 1000px;
height:118px;
float:left;
}
.fenlei{ 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{ 1200px;
height:648px;
margin-top:20px;
}
#zuo{ 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{ 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{ 1200px;
height:50px;
font-size:24px
line-height:50px;
vertical-align:middle;
text-align:center;
color:#00F;
font-weight:bold;
}
#chanpin{ 1200px;
height:400;
}
.chanpin-jieshao{ 200px;
height:300px;
float:left;
margin:0px 20px 0px 20px;
}
.chanpin-mingcheng{ 200px;
height:50px;
font-size:18px;
line-height:50px;
vertical-align:middle;
}
.chanpin-yongtu{ 200px;
height:50px;
font-size:12px;
line-height:50px;
vertical-align:middle;
}
#chanpin-zhanshi{ 1200px;
height:400px;}
.qingdan{ 200px;
height:400px;
border:1px solid blue;
float:left;
margin-top:100px;
margin-right:35px;
}
.wenzi{ 200px;
height:50px;
background-color:#b08f23;}
.zhanshi{ 100px;
height:50px;
font-size:18px;
float:left;
line-height:50px;
vertical-align:middle;
}
.gengduo{ 100px;
height:50px;
font-size:18px;
float:right;
line-height:50px;
vertical-align:middle;
}
.xiaotu{ 200px;
height:300px;}
.xuewei{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" />
这是今天学习的网页布局例子，刚开始慢慢写还好，后半段写着写着就出问题了，像文字溢出，流的问题等等。
刚入门的新学员的第一次写网页总是沉不住气，后面越写越乱。还是要加强自己的技能训练，多加练习，持之以恒才能写好一个网页。