时间:2023-10-12 13:42:02 | 来源:网站运营
时间:2023-10-12 13:42:02 来源:网站运营
HTML5期末大作业:旅游网页设计与实现——旅游风景区网站HTML+CSS:> ⛵ 源码获取 文末联系 ✈Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>旅游</title> <style> *{ margin: 0; padding: 0; } .header{ height: 60px; line-height: 60px; text-align: center; } .ban{ width: 1200px; margin: auto; } a{ padding: 0 20px; color: #000; text-decoration: none; } .search { height: 100px; text-align: center; } .search-ipt input { width: 520px; height: 40px; padding-left: 16px; border: 1px solid #ffb923; } .search-btn { width: 80px; height: 40px; line-height: 40px; text-align: center; color: #FFF; background: #ffb923; display: inline-block; } .enume .active { color: #ffb923; } .tab{ border-bottom:2px solid #ffb923; margin-bottom: 20px; } .content{ height: 400px; margin-bottom: 40px; } </style></head><body> <div class="header"> <b>旅游为你提供本地服务</b> <a class="item" href="">主页</a> <a class="item" href="list.html">热门旅游地</a> <a class="item" href="detail.html">详情</a> <a class="item" href="share.html">旅游分享</a> <a class="item" href="cart.html">我的收藏</a> <a class="item" href="form.html">在线预定</a> </div> <div class="search"> <div class="search-ipt"> <input type="text" placeholder="请输入你想去的地方"> <div class="search-btn">搜索</div> </div> <div class="enume"> <span class="active">梅里雪山</span> <span>洱海</span> <span class="active">首尔</span> <span>纽约</span> <span>阿尔卑斯山</span> </div> </div> <img width="100%" height="420" src="picture/ban2.jpeg" alt=""> <div class="tab ban"> <div style="width: 272px;display: inline-block;"><h2>目的地</h2></div> <div style="width: 60px;padding:16px;background: #ffb923;color:#fff;display: inline-block;">欧洲</div> <div style="width: 60px;padding:16px;display: inline-block;">亚洲</div> <div style="width: 60px;padding:16px;display: inline-block;">北美洲</div> <div style="width: 60px;padding:16px;display: inline-block;">非洲</div> </div> <div class="content ban"> <div style="width:210px;padding:10px;border: 1px solid #ddd;float: left;" class="content-item"> <h3>推荐目的地</h3> <a style="display: inline-block; padding: 12px 20px;" href="#">法国</a> <a style="display: inline-block; padding: 12px 20px;" href="#">英国</a> <a style="display: inline-block; padding: 12px 20px;" href="#">比利时</a> <a style="display: inline-block; padding: 12px 20px;" href="#">德国</a> <a style="display: inline-block; padding: 12px 20px;" href="#">瑞士</a> <a style="display: inline-block; padding: 12px 20px;" href="#">意大利</a> <a style="display: inline-block; padding: 12px 20px;" href="#">爱尔兰</a> <a style="display: inline-block; padding: 12px 20px;" href="#">西班牙</a> <a style="display: inline-block; padding: 12px 20px;" href="#">梵蒂冈</a> <a style="display: inline-block; padding: 12px 20px;" href="#">冰岛</a> <a style="display: inline-block; padding: 12px 20px;" href="#">挪威</a> </div> <table width="940" style="float: right; text-align: center;"> <tr height="190"> <td width="310"> <img width="200" height="120" src="picture/egypt.jpg" alt=""> <p>纯玩 埃及8天神秘之旅</p> <p class="gray"><span class="price">6499</span>起<p> </p></td> <td width="310"> <img width="200" height="120" src="picture/x1.jpg" alt=""> <p>畅游东西欧 12晚15天</p> <p><span class="price">9999</span>起</p> </td> <td width="310"> <img width="200" height="120" src="picture/s.jpg" alt=""> <p>舒享德法意瑞、五渔村 <p><span class="price">11999</span>起</p> </td> <td width="310"> <img width="200" height="120" src="picture/t.jpg" alt=""> <p>土耳其10天蓝色浪漫之旅</p> <p><span class="price">7499</span>起</p> </td> </tr> <tr height="190"> <td> <img width="200" height="120" src="picture/x1.jpg" alt=""> <p>畅游东西欧 12晚15天</p> <p><span class="price">9999</span>起</p> </td> <td> <img width="200" height="120" src="picture/s.jpg" alt=""> <p>舒享德法意瑞、五渔村、比萨</p> <p><span class="price">11999</span>起</p> </td> <td> <img width="200" height="120" src="picture/t.jpg" alt=""> <p>土耳其10天蓝色浪漫之旅</p> <p><span class="price">7499</span>起</p> </td> <td> <img width="200" height="120" src="picture/img1.jpeg" alt=""> <p>法国南部蓝色海岸线蔚蓝风情</p> <p><span class="price">6519</span>起</p> </td> </tr> </table> </div> <div class="foot ban"> <table> <tr> <td width="200"> <h3>新手指南</h3> </td> <td width="200">会员注册/登录</td> <td width="200">会员章程</td> <td width="200">隐私政策</td> <td width="200">预订流程</td> <td width="200">在线预订条款</td> </tr> <tr> <td> <h3>签约及发票制度</h3> </td> <td>门市签约</td> <td>线上签约</td> <td>发票制度</td> <td></td> <td></td> </tr> <tr> <td> <h3>支付方式</h3> </td> <td>在线支付</td> <td>门市现付</td> <td>银行汇款</td> <td></td> <td></td> </tr> <tr> <td> <h3>售后服务</h3> </td> <td>退款方式</td> <td>订单查询</td> <td>订单变更及取消</td> <td></td> <td></td> </tr> <tr> <td> <h3>旅资讯</h3> </td> <td>旅游贴士</td> <td>旅官方微博</td> <td>旅会员刊物</td> <td></td> <td></td> </tr> </table> <div style="margin: 20px 0;text-align: center;"> 联系我们:service@cits.com.cn | 咨询热线:400-600-8888 </div> </div></body></html>
关键词:旅游,实现,风景,作业,设计