<!DOCTYPE html> <html> <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> <!-->行名称tape_div_1 头部总共三大行</!--> <div> <!-->这行内有两个元素</!--> <p>欢迎访问天津海盟自动化有限公司</p> <p>咨询电话：022-25783449</p> </div> <!-->行名称info_div_2_头部总共三大行，这是第二行 先是img 后是input和搜索img</!--> <div> <!-->logo小盒放logo图片</!--> <div><img src="images/logo.png" alt="图标"></div> <!-->图片后面是input文本输入框和对应的图片搜索按钮</!--> <div> <input type="text" name="name" placeholder="请输入关键字"> <button>搜索</button> </div> </div> <!-->头部导航_写完头部导航，头部结束首先是menu盒</!--> <div> <!-->这里是info，info里是8个a标签的无序列表</!--> <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> </ul> </div> </div> <!-->这里公共头部全部结束</!--> <!-->注释分割线------------------------------------------------------------------------------------</!--> <!-->主体部分，从这里看应该有六大部分，话不多说，首先是banner图</!--> <div> <!-->banner图里面有两部分一个是img，另一个是line空盒</!--> <img src="images/banner.jpg" alt="主图片"> <div></div> <!-->空盒先留着，写完后再解释</!--> </div> <!-->产品列表产品中心，下面是产品部分，第二大部分，里面有标题h2,有p标签，第三大部分是列表</!--> <div> <!-->这里先把标题写了，这里产品中心中间是个图片</!--> <div> <h2>产品<img src="images/proicon.png" alt="产品中心_图片">中心</h2> <p>手机远程，监控无处不在</p> </div> <!-->下面就是8个大的产品列表了，这里采用无序列表</!--> <ul> <!-->这是第一组，除了这组，后面还有七组</!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!--></!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!--></!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!--></!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!-->这里换行</!--> <br> <!-->这里换行</!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!--></!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!--></!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!--></!--> <li> <a href=""><img src="images/product.jpg" alt="产品_图片"></a> <a href="">产品应用案例</a> </li> <!-->好，总算是结束了，第三大部分完成，下面是body的第四大部分</!--> </ul> </div> <!-->还差一点点，产品中心两侧是广告位</!--> <div></div> <!-->广告图片从这里替换</!--> <div> <img src="images/make.png" alt="广告位"> <!-->我自己理解的广告位，不一定对</!--> <div> <p>天津海盟自动化有限公司是一家电器自动化行业的企业。</p> <!-->这里有个了解更多的按钮</!--> <buttom>了解更多</buttom> </div> </div> <!-->注意了，这里是分割线</!--> <hr color="#efefef" size="1px"> <!-->分割线结束,分割线后面是新闻列表</!--> <div> <!-->左面是图片</!--> <div> <img src="images/news.jpg" alt="新闻图片"> </div> <div> <ul> <li> <span><h1>25</h1><date>20180329</date></span> <a href="">天津海盟自动化有限公司参加交易会</a> <p>天津海盟自动化有限公司参加交易会</p> </li> </ul> </div> </div> <!-->公共底部</!--> <div> <div> <ul> <li><a href="">阿里云</a></li> <li><a href="">支付宝</a></li> <li><a href="">腾讯QQ</a></li> <li><a href="">百度搜索</a></li> <li><a href="">PHP中文网</a></li> <li><a href="">阿里云</a></li> <li><a href="">支付宝</a></li> <li><a href="">腾讯QQ</a></li> <li><a href="">百度搜索</a></li> <li><a href="">PHP中文网</a></li> </ul> </div> <div> <p>CopyRight 2018 All Right Reserved 天津海盟自动化模版网站 ICP:xxxxxxxx 网站地图</p> </div> </div> </body> </html>
博客列表 >20180329作业
20180329作业
- 卢光维的博客原创转载
- 2018年03月29日 19:43:08580浏览
上一条：328-网站首页前端实战-上下一条：仿站---2018年3月28日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
