写网页首先要思路清晰,观察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:页面尾端,一般为网页的单位,制作单位,联系方式,注册信息,以及各种链接