一、预览效果图
二、代码
先对网页整体进行了分析，搭出框架，然后分别设置头、肚、尾，并且用三个CSS文件对样式进行控制。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 导入重置样式表 --> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!-- 导入公共样式表 --> <link rel="stylesheet" type="text/css" href="css/common.css"> <!-- 导入首页样式表 --> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>首页</title> </head> <body> <div class="header"> <div class="tape"> <div class="info"> <p class="left">欢迎访问XXX信息科技有限公司~</p> <p class="right">咨询电话：010-11111111</p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo.png" height="50px"></div> <div class="search"> <input type="text" name="name" placeholder="关键字"> <button>搜索</button> </div> </div> <div class="menu"> <div class="info"> <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> </div> <div class="banner"> <img src="images/banner.jpg" alt="图片"> <div class="line"></div> </div> <div class="product"> <div class="title"> <h2>服务项目</h2> <p>我们的服务项目</p> </div> <ul> <li> <a href=""><img src="images/xitong.jpg"></a> <a href="">系统开发</a> </li> <li> <a href=""><img src="images/shijue.jpg"></a> <a href="">视觉设计</a> </li> <li> <a href=""><img src="images/wangzhan.jpg"></a> <a href="">网站优化</a> </li> <li> <a href=""><img src="images/wangye.jpg"></a> <a href="">网页设计</a> </li> <li> <a href=""><img src="images/yidong.jpg"></a> <a href="">移动开发</a> </li> <li> <a href=""><img src="images/yunzhuji.jpg"></a> <a href="">云主机</a> </li> </ul> </div> <div class="ads-img"></div> <div class="make"> <img src="images/guanggao.jpg"> <div class="refer"> <p>品牌形象对于任何公司，公司和企业都非常重要。 如果公司的品牌形象比较好，可以在一定程度上吸引消费者购买，从而提高销售业绩。 老板想要拥有自己的官方网站就是希望能够启动自己公司的企业品牌形象，让更多的人能够记住这个品牌，消费者对品牌更加了解，并且以后需要首次想到它。 在消费者心中提升公司的印象可能会更加引人注目。</p> <button>了解更多</button> </div> </div> <hr color="#efefef" size="1"> <div class="news"> <div class="left"> <img src="images/news.jpg" alt="" width="200px"> </div> <div class="right"> <ul> <li> <span><h1>25</h1><p>2010-1</p></span> <a href="">本公司参加电子信息博览会</a> <p>本公司参加电子信息博览会</p> </li> <li></li> <li></li> <li></li> </ul> </div> </div> <!-- 公共底部 --> <div class="footer" > <div class="top"> <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="bottom"> <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、结论
1、基本学会了一个网页的设计思路，通过查看网页代码，能够做到分析网页的机构，有哪些模块，都该如何设计。
2、在具体操作中，对代码还是不熟悉，基本是照着老师的代码写的，中间莫名奇妙出现了一大块空白，研究了很久也没有办法解决，还是需要自己慢慢研究整改。
