本文主要是介绍HTML+CSS网页制作——安徽铁观音，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
已实现的效果图
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>安徽铁观音</title>
</head>
<link href="css/style.css" rel="stylesheet" />
<body>
<div class="qj">
<!--头部-->
<div class="top" >
<div class="top1" ></div>
<div class="top2" ></div>
<div class="top3" >
<ul>
<li><a href="#">首页</a> | </li>
<li><a href="#">关于我们</a> |</li>
<li><a href="#">供应信息</a>|</li>
<li><a href="#">求购信息</a>| </li>
<li><a href="#">产品展示 </a>|</li>
<li><a href="#">资质荣誉</a>| </li>
<li><a href="#">新闻动态</a>|</li>
<li><a href="#">招聘信息 </a>|</li>
<li><a href="#">在线留言</a>|</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="top4" ></div>
<!--中部-->
<!--中部左边列-->
<div class="m1">
<div class="left">
<div class="left1">商业分类</div>
<div class="left2">联系方尺</div>
<div class="left3">产品搜索</div>
</div>
<!--中部右边列-->
<div class="right">
<!--中部右边列左部分-->
<div class=" right-1eft">
<div class=" right-left-1">新闻动态</div>
<div class=" right-left-2">
<ul >
<li>这个冬天不太冷 2015-5-18</li>
<li>客服中心高效运转，获得一致好评 2015-5-18</li>
<li>总部各直营门店均安装POS机方便顾客消费 2015-5-18</li>
<li>厦门第八家直营店（金桥分店）试营业 2015-5-18</li>
<li>运营部一行前往郑州考察工作 2015-5-18</li>
</ul>
</div></div>
<!--中部右边列右部分-->
<div class=" right-right">
<div class="right-right-1">茶业动态</div><div class=" right-right-2">
<ul >
<li>这个冬天不太冷 2015-5-18</li>
<li>客服中心高效运转，获得一致好评 2015-5-18</li>
<li>总部各直营门店均安装POS机方便顾客消费 2015-5-18</li>
<li>厦门第八家直营店（金桥分店）试营业 2015-5-18</li>
<li>运营部一行前往郑州考察工作 2015-5-18</li></ul>
</div></div>
<!--中部右边列下部分-->
<div class="right-bottom">
<div class="right-bottom-1">公司简介</div>
<div class="right-bottom-2">
<pre> 安徽铁观音欣欣茶叶，茶叶产地直销；经营地中高档安溪“铁观音”，本山，黄丹，毛蟹，
黄金贵， 等名茶！安徽铁观音欣欣茶叶，茶叶产地直销；经营地中高档安溪"铁观音"，本山，黄丹，
毛蟹，黄金 贵，等名茶安徽铁观音欣欣茶叶，茶叶产地直销；经营地中高档安溪"铁观音"详情请登入欣欣网站 http:www.tgy99.com生产许可编证 QS350541010470生产标准号：GB/T 1959
</pre></div>
</div></div></div>
<!--底部-->
<div class="m5">
<ul>
<li><a>关于我们</a> -</li>
<li><a>联系我们</a> -</li>
<li><a>帮助中心</a> -</li>
<li><a>广告服务</a> -</li>
<li><a>保密条款</a> -</li>
<li><a>免费申明</a> -</li>
<li><a>返回顶部</a></li>
</ul>
</div>
<div class="m6"></div>
<div class="m7">
<p>侵权信息投诉电话： 0592-3121281 本站郑重申明 所载文章数据仅供参考，使用前请核实，风险自负<br />
Copyright ©2015 www.0592TEA.net 运营策划：厦门磐石文化传播有限公司 All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
CSS样式表
/* CSS Document */
*{ margin:0; padding:0;}
img{ border:none;}
ul,ol,li{ list-style:none;}
div{ height:auto; /*overflow:hidden;*/ font-family: "宋体"; font-size:14px; text-align:center; display:block; margin:0 auto;}
a{ text-decoration:none;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none;}
a:active{ text-decoration:none;}
em,i {font-style:normal; font-size:100%;}
body{ background:url(../images/background.png) 0 0 no-repeat fixed;}
/*头部*/
.qj{width:1310px; height: auto; background:url(../images/background.png) top center repeat; border-right:#000000 solid 6px; border-bottom: #000000 solid 6px;}
.top{ width:1310px; height:auto; border: 1px solid #000000 ; background:url(../images/background.png) 0 0 repeat}
.top1{height:20px; width:1000px; background: url(../images/head1.png) top center repeat}
.top2{width:1000px; height:344px; background:url(../images/head%20tupian.png) 0 0 no-repeat}
.top3{width:1000px; height:23px; background: url(../images/head2%20r5_c2.png) top center repeat}
.top3 ul{ width:780px; height:23px; text-align:center; margin:auto ; }
.top3 ul li{ width:72px; height:23px;float:left; text-align:center;line-height:23px; font-family:"微软雅黑"; font-size:14px; font-weight:bold; color:#FFF; margin-left:4px; }
.top3 ul li a{color:#FFF; display:block; float:left; text-align:center; }.top3 ul li a:hover{ background:#333;}.top4{height:12px; width:1000px; background: url(../images/huisebeijing%20.png) top center repeat}/*中部*/
.m1{width:1310px; height:582px; }
/*中部左边*/
.left{width:402px; height:582px; float:left; border-right: #999999 solid 5px}
.left1{width:128px; height:22px; line-height:22px; margin:90px 10px 30px 190px; text-align:left; border-bottom:3px solid #999999; font-family:"微软雅黑";}
.left2{width:128px; height:22px;line-height:22px;margin: 90px 10px 30px 190px;text-align:left; border-bottom:3px solid #999999; font-family:"微软雅黑";}
.left3{width:128px; height:22px; line-height:22px;margin: 90px 10px 30px 190px;text-align:left; border-bottom:3px solid #999999; font-family:"微软雅黑";}
/*中部右边*/
.right{width:900px; height:582px; float: right; }
.right-1eft{width:380px; height:200px; float: left;}.right-left-1{width:210px; height:18px; border-bottom:3px solid #999999; line-height::23px; text-indent:15px; text-align:left; margin: 15px 15px; font-family:"微软雅黑";}.right-left-2{width:380px; height:170px; float:left ; margin-left:10px }
.right-left-2 ul{ width:380px; height:160px; margin:2px 20px; text-align:left; list-style: disc}
.right-left-2 ul li{ width:380px; height:23px;float:left; text-align:left; line-height:23px; font-size:12px; color: #000000;list-style: disc}.right-right{width:380px; height:200px; float: left;}.right-right-1{width:210px; height:18px; border-bottom:3px solid #999999; line-height::23px; text-indent:15px; text-align:left; margin: 15px 15px; font-family:"微软雅黑";}.right-right-2{width:380px; height:170px; float:left }
.right-right-2 ul{ width:380px; height:160px; margin:2px 20px; text-align:left; list-style: disc}
.right-right-2 ul li{ width:380px; height:23px;float:left; text-align:left; line-height:23px; font-size:12px; color: #000000;list-style: disc}.right-bottom{width:650px; height:382px; float: left;}
.right-bottom-1{width:600px; height:23px; border-bottom:3px solid #999999; line-height::23px; text-indent:30px; text-align:left; margin: 15px 15px; font-family:"微软雅黑";}
.right-bottom-2 { text-indent:28px; line-height: 40px; height:40px; text-align:left; margin-left:30px}
/*底部*/
.m5{background: url(../images/bottom%201.png) top center repeat; width :1000px; height:25px; text-align:center}
.m5 ul {width:502px; height:25px; float:left; text-align: center; margin:0px 250px}
.m5 ul li{width:70px; height:25px; float:left; line-height:25px; color:#FFFFFF;}
.m5 ul li a{ color:#CCCCCC; display:block; line-height:25px; float:left}.m5 ul li a:hover{ background:#333;}
.m6{background:url(../images/huisebeijing%20.png) top center repeat; width:1000px; height:18px}
.m7{color: #000000;}切片图片
这篇关于HTML+CSS网页制作——安徽铁观音的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
