任务1：请按要求完成页面布局设计 1)页面设计包括文档头，文档体和文档底部，布局合理。 任务2：请利用图片素材，按要求完成文档头内容设计 1)文档头位于页面上部，包括公司名称图片和导航条，图片在左侧显示，导航条在右侧显示。 2)当左上角图像无法显示时，则显示替代文本：“热门图片”。 3)导航条背景颜色为#000000，文字项在文档头右端显示，包括“首页”、“旅游资讯”、“机票订购”、“风景欣赏”、“公司简介”、“百度一下”共6个，均为超链接。 4)当点击“百度一下”，链接百度站点，网址：“https://www.baidu.com/”。 5)文字大小为15px，文字对齐方式：居中对齐，文字颜色为#FFFFFF，字体为黑体，没有下划线。 6)当鼠标悬停于列表项的文字上时，文字背景色变为#C0C0C0。 任务3：请按要求完成文档体内容设计 1)文档体包括文本输入框和搜索按钮，输入框内有提示文字“请输入”，两者均在页面右侧且同行显示。 2）搜索按钮宽40px，距离右侧10px；文本输入框的宽为140px。 任务4：请按要求完成文档底部内容显示 1)底部内容水平居中，分2行显示，行高为2em，字体大小为14px。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding:0px; margin:0px; } .header{ width:100%; height:70px; background:#000000; } .midder{ width:100%; height:800px; } .footer{ width:100%; height:100px; text-align: center; font-size: 14px; line-height: 2em; } .imgStr{ float: left; } .ulStr ul{ list-style-type:none; float: right; margin-right: 100px; } .ulStr ul li{ margin-top: 20px; float: left; margin-left: 50px; text-align: center; } .mid_nav{ float: right; } a{ text-decoration: none; color:#FFFFFF; font-size: 15px; font-family:"黑体"; } a:hover{ background-color: #C0C0C0; } .inpStr{ width: 140px; } .butStr{ width:40px; margin-right:10px; } form{ margin-top: 15px; } </style> </head> <body> <div class="header"> <div class="imgStr"><img src="../img/1-1logo.png" alt="热门图片"></div> <div class="ulStr"> <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="https://www.baidu.com/">百度一下</a></li> </ul> </div> </div> <div class="midder"> <div class="mid_nav"> <form> <input class="inpStr" value="请输入" /> <input class="butStr" value="搜索" /> </form> </div> </div> <div class="footer"> <p>关于我们|法律声明|帮助中心|网站地图|门市地图|投诉建议</p> <p>Copytight2020旅游社有限公司 版权所有 版权所有 电话：010-4388434 京ICP 140000号</p> </div> </body> </html>