本文详细介绍了华为官方网站的HTML和CSS布局方法，包括渐变背景的切分技巧、使用精灵图进行元素展示的新方法等，适合前端开发人员学习。
Topic 1 ：渐变背景的切法 ：
我们在看到这个渐变背景的时候就要想到找规律，不能像我们以前那样直接切出来一像素，我们仔细观察这个图，如果我们切一像素是显然不能平铺成如图所示的这个背景的，我们要把这个背景分解成若干个相同的切片取其中的一个就好了， 如图中所选切片所示；
Topic 2 ：华为首页（完整版） ：
代码如下：
.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的华为</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
<h1>
<a href="#">
<img src="images/logoR.jpg" width="257" height="43" alt=""/>
</a>
</h1>
<div class="headerR">
<p>
<a href="#">Worldwide</a> | <a href="#">登录</a> | <a href="#">个性化服务</a> | <a href="#">心声社区</a>
</p>
<div class="search">
<input type="text" class="text" />
<input type="image" src="images/search2.jpg" />
</div>
</div>
</div>
<div class="nav">
<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>
</ul>
</div>
<div class="banner_wrap">
<div class="banner">
<a href="#">
<img src="images/bannerT.jpg" width="1100" height="396" alt=""/>
</a>
</div>
</div>
<div class="news_wrap">
<div class="news">
<p class="newsL">
<strong>新闻：</strong>华为发布业界首款传送网SDN控制器技术样机，引领传送网步入可编程新时代
</p>
<div class="newsR">
<p>关注我们</p>
<div class="icons">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
<a href="#" class="a3"></a>
<a href="#" class="a4"></a>
</div>
</div>
</div>
</div>
<div class="con_wrap">
<div class="con">
<dl>
<dt>
<img src="images/con1.jpg" width="110" height="137" alt=""/>
</dt>
<dd>
<h3>谈华为的管道战略</h3>
<p>
华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。
</p>
</dd>
</dl>
<dl>
<dt>
<img src="images/con2.jpg" width="110" height="137" alt=""/> </dt>
<dd>
<h3>中国移动点亮TD-LTE市场</h3>
<p>
从世博会TD-LTE业务演示，到杭州TD-LTE试验网发布，到全球首次LTE TDD/FDD漫游互通，中国移动迈出了TD-LTE的坚定步伐。
</p>
</dd>
</dl>
<dl class="dl3">
<dt>
<img src="images/con3.jpg" width="110" height="137" alt=""/>
</dt>
<dd>
<h3>《营赢》第14期</h3>
<p>
本期封面：Bharti Airtel的LTE网络已正式商用，对印度而言，LTE是否行之过早？其网络业务总监Jagbir Singh并不这么认为。。
</p>
</dd>
</dl>
<dl>
<dt>
<img src="images/con4.jpg" width="112" height="137" alt=""/>
</dt>
<dd>
<h3>四核芯3D见证不凡时刻</h3>
<p>
华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。
</p>
</dd>
</dl>
<dl>
<dt>
<img src="images/con5.jpg" width="111" height="137" alt=""/>
</dt>
<dd>
<h3>互联网视频，竞还是合？</h3>
<p>
优酷土豆无线运营部高级总监费溢群分享了在互联网视频领域，其与运营商、华为间的三方合作模式。
</p>
</dd>
</dl>
<dl class="dl6">
<dt>
<img src="images/con6.jpg" width="111" height="137" alt=""/>
</dt>
<dd>
<h3>统一存储，大道智简</h3>
<p>
OceanStor T系列统一存储产品，搭载Smart系列软件，实现完美统一管理，按需自如存取。
</p>
</dd>
</dl>
</div>
</div>
<div class="footer_wrap">
<div class="footer">
<dl>
<dt><h3>按访问者</h3></dt>
<dd><a href="#">运营商</a></dd>
<dd><a href="#">企业用户</a></dd>
<dd><a href="#">最终消费者</a></dd>
<dd><a href="#">合作伙伴</a></dd>
<dd><a href="#">新闻媒体</a></dd>
<dd><a href="#">求职者</a></dd>
</dl>
<dl>
<dt><h3>行业洞察</h3></dt>
<dd><a href="#">客户声音</a></dd>
<dd><a href="#">消费者研究</a></dd>
<dd><a href="#">创新</a></dd>
<dd><a href="#">热点技术</a></dd>
<dd><a href="#">标准与行业贡献</a></dd>
</dl>
<dl>
<dt><h3>关于华为</h3></dt>
<dd><a href="#">愿景与使命</a></dd>
<dd><a href="#">公司战略</a></dd>
<dd><a href="#">社会责任</a></dd>
<dd><a href="#">公司治理</a></dd>
<dd><a href="#">财务概要</a></dd>
<dd><a href="#">发展历程</a></dd>
</dl>
<dl>
<dt><h3>常用链接</h3></dt>
<dd><a href="#">新闻中心</a></dd>
<dd><a href="#">展会活动</a></dd>
<dd><a href="#">公司刊物</a></dd>
<dd><a href="#">网络安全</a></dd>
<dd><a href="#">成功故事</a></dd>
</dl>
<dl>
<dt><h3>相关网站</h3></dt>
<dd><a href="#">华为运营商网络</a></dd>
<dd><a href="#">华为企业业务</a></dd>
<dd><a href="#">华为终端</a></dd>
<dd><a href="#">华为海洋</a></dd>
<dd><a href="#">手机华为网</a></dd>
</dl>
<div class="publish">
<p class="left"><a href="#">法律声明</a> | <a href="#">隐私保护</a> | <a href="#">联系我们</a> | <a href="#">网站地图</a> </p>
<p class="right"> 版权所有 © 华为技术有限公司 1998-2012。 保留一切权利。粤A2-20044005号</p>
</div>
<div class="last">
<img src="images/footer2.jpg" width="112" height="41" alt=""/>
</div>
</div>
</div>
</body>
</html>
.css
@charset "utf-8";
/* CSS Document */
body,div,a,span,img,p,h1,h2,h3,h4,h5,h6,input,ol,li,ul,dl,dt,dd{margin: 0px; padding: 0px; list-style: none; border: none; }
body{ font-size: 12px; font-family: "宋体"; color: #646464; background: url(../images/header1.jpg) repeat-x ; }
a{color: #666; text-decoration: none; }
a:hover{ color: #bb0000; text-decoration: underline; }
.header {width: 980px; height: 60px; margin: 0px auto; }
.header h1{float: left; width: 257px; height: 43px; margin-top: 9px; }
.headerR{width:430px ; height:19px ; margin-top: 21px; float: right; }
.headerR p{float: left; line-height: 19px; }
.search{float: right; }
.search input{float: left; }
.search .text{ width:130px; height:19px; background: pink;background: url(../images/search1.jpg); padding-left: 9px; line-height: 19px;}
.nav{width: 980px; height: 48px; margin: 0px auto; }
.nav li{ float: left; padding:0px 25px; margin: 16px 32px 0px 0px ; font-weight: bold; }
.banner_wrap{height: 396px; background: #000 ;}
.banner {width: 1100px; height: 396px ; margin: 0px auto; }
.news_wrap{ height:36px;}
.news{ width: 980px; height: 36px; margin: 0px auto; }
.newsL{ line-height: 36px; font-weight: bold; float: left;}
.newsL strong{color :red; }
.newsR{ float: right; width: 168px; height: 20px; margin-top: 8px;}
.newsR p{float: left; line-height: 20px; font-weight: bold; }
.newsR a{width:20px; height:20px; background:url(../images/icons.fw.png); float: left; margin-left: 6px; }
.newsR .icons .a1{margin-left: 16px; }
.newsR .icons .a2{background-position: -20px 0px; }
.newsR .icons .a3{background-position: -40px 0px; }
.newsR .icons .a4{background-position: -60px 0px; }
.con_wrap{height:315px; background: #DCDCDC;}
.con{width: 980px; height: 296px; margin: 0px auto ; }
.con dl{width: 316px; height: 137px; background: #fff; float: left; margin: 10px 15px 0px 0px; }
.con dt{ float: right; }
.con dd{ margin: 17px 10px; width: 184px; font-weight: bold; }
.con dd h3{ margin-bottom: 12px;}
.con .dl3{ margin-right: 0px;}
.con .dl6{ margin-right: 0px;}
.footer_wrap{ height:310px; background: url(../images/footer1.jpg) repeat-x #898989; color:#ffffff;}
.footer{width: 980px; height: 310px; margin: 0px auto;}
.footer a{ color: #ffffff;}
.footer dl{ width: 140px; height: 200px; margin: 22px 55px 0px 0px; float: left; font-weight: bold; }
.footer dt{ margin: 12px 0px 20px 0px;}
.footer dd{ line-height: 22px; }
.footer .publish{ width: 815px; height: 20px;}
.footer .publish .left{ float: left; }
.footer .publish .right{ float: right; }
.footer_wrap .footer .last{ width: 112px; height: 41px; margin-top: 235px; }
Topic 3 ：我们利用华为首页制作华为的list页面 ：
step 1：
我们先把华为首页另存为模板，然后比较首页和list页面相同的部分都有哪些，经过比较只有头部和footer分区相同那么我们改动模板把不一样的部分都删掉，然后我们继续写我们的list；
注意：
我们删除的时候是删除模板里面的东西，css不要动；
还有我们的index和list用的是一个css那么我们在写导航的时候我们的导航就不能叫nav了 会重名的，我们可以叫做listNav；
Topic 4 ：大图制作banner通栏效果 ：
1. 通过背景图的方式
通过背景图定位center 0（水平居中 垂直方向为0 他和margin的设置相反），实现大图居中，如果想要有点击状态，分区盒子中添加超链接标签，转化成块级（宽度默认就是父级的100%），实体化高度
<!--
这是第一种办法相对简单
<div class="listBanner">
<a href="#"></a>
</div>
-->
/*
这个对应HTML的第一种办法
.listBanner{ height: 232px; background: url(../images/listBanner.jpg) center 0px ;}
.listBanner a{display: block; height: 232px; }
*/
2 . 通过插入图的方法：
要写listBanner_wrap和listBanner两个分区分别实体化 前者宽度为100% 后者宽度为图片的宽度 高度都是图片的高度（图片肯定插入在listBanner分区 所以别忘在listBanner加上<a>标签）；
配合定位，left取值为50%；目的是兼容所有浏览器，并且取到浏览器的中间点；
margin-left取负值，为图片宽度的一半，目的是取到图片的中间点和浏览器中间点对齐 ；
代码示例：
<div class="listBanner_wrap">
<div class="listBanner"><a href="#"><img src="../images/listBanner.jpg" width="1920" height="232" /></a></div>
</div>
.listBanner_wrap{ width:100%; height:232px; overflow:hidden; position:relative;}
.listBanner{ width:1920px; height:232px; position:absolute; left:50%; top:0; margin-left:-960px;}
Topic 5 ：精灵图结构做法：
我们之前学习到的方法是 ：给内容对应的盒子添加背景图，配合background-position；
新方法：如果当精灵图和内容位置配合不合适的时候，做法：结构将精灵图放到一个小盒子里面，比如span，b，u，i，s，em。配合background-position
注意：
overflow： hidden可以消除浮动给其他标签带来的影响 （就比如浮动之后不占位置这个影响）；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
