写网页首先要思路清晰，观察ui给定图片，预先了解实现效果和功能对应板块划分，再进行详细的功能实现细节。
页面分抬头（header）,搜索（nav），横幅(banner)，容积箱(container)，脚本(foot)
1.header:开篇一般先以搜索和链接开头，建立边框和背景图块，一般以ul>li标签实现，链接则套用a标签实现，注意调整位置和美观度。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/reset.css"/>
<link rel="stylesheet" href="../css/four4.work.css"/>
</head>
<header>
<nav>
<ul>
<li><a href=""><img src="../img/logo.jpg" alt="漫威"/></a></li>
<li><a href="">首页</a></li>
<li><a href="">最新动态</a></li>
<li><a href=""></a>漫威</li>
</ul>
</nav>
</header>
2.搜索（nav）:搜索也是ul>li标签配合a链接实现
<div class="box1"><a href="#"><img src="../img/160216172223655101.jpg" alt="dianji"/></a></div>
3.banner:一般以图片格式出现，为本文的横幅，简洁明了直奔主题，一般此区域为各种图片跳转翻页，实现多内容并存，现阶段只能实现图片的链接和背景渐变色或变大变小，
也可插入视频和音频播放器，使版面看起来更活泼和新颖
4.container：文本中心主题体现，一般为多个板块的合集，图片套文字
5.foot:页面尾端，一般为网页的单位，制作单位，联系方式，注册信息，以及各种链接
原文：http://www.cnblogs.com/asassa/p/7668682.html