web网页设计与开发,大作业,自适应
资源内容介绍
实现自适应功能的一个类旅游网页,已附带图片和源码,各位可以自行下载并根据需求进行修改。自适应的效果由于设备的不同,请各位根据自己的设备自行调试至合适的样子哦。项目说明:1、资源项目源码均已通过严格测试验证,保证能够正常运行;2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通;3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术、通信工程、软件工程、自动化、电子信息等相关专业,更为适合;4、本项目仅用作交流学习参考,请切勿用于商业 在日常工作生活中。使用的编辑器是vscode,最好下一个live server,可以更直观看到代码修改后的效果。注意:请在vscode左上角新建文件夹,再将解压好的文件打开。并且确保自己的环境配置没有问题,这个网页框架适用于各种类型的网页,可自行修改。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>LuckyBird</title> <link rel="stylesheet" href="LuckyBird.css"> </head><body> <div> <div class="head"> <span id="loge"> <img src="picture/logo.png" alt="" class="loge"> </span> <span class="none1"> <input type="text" class="text1"> </span> <span class="none1"> <p class="phone">Tel:400-8800-5166</p> </span> <span> <img src="picture/england.png" alt="" class="flag"> </span> <form action="" method="post"> <select name="text" class="nation"> <option value="england">england</option> <option value="chinese">chinese</option> <option value="japan">japan</option> <option value="india">india</option> <option value="russia">russia</option> <option value="Africa">Africa</option> <option value="Spain">Spain</option> </select> </form> </div> <div class="container"> <nav> <a href="#">Plan&Book</a> <a href="#">Product&Ofters</a> <a href="#">Travel Information</a> <a href="#">LuckBird Club</a> <a href="#">About us</a> </nav> </div> <div class="leader"> <div class="table1"> <br> <div class="biaoti"> <h1>The most convenient service for your trip</h1> </div> <img src="picture/airplane.png" alt="" class="plane"><br> <input type="button" value="see more" class="button2"> </div> <div class="box01"> <p>Welcome to LuckyBird</p> <input type="text" placeholder="Name" name="Name"> <input type="password" placeholder="Password" name="Password"> <br> <br> <br> <input type="button" value="Login" class="button1"> <input type="button" value="Register" class="button3"> <br> <div style="text-align: right;"> <a href="#" class="none2" style="color: #d62a2a;">Register</a> <a href="#" class="forget">Forget Password?</a> </div> </div> </div> <div class="container_01"> <div class="Service"> <h1>Service Features</h1> </div> <div class="box02"> <div class="middle"> <img src="picture/image01.png" alt="" class="picture1"> <p class="pg1"> There are 23 airports in China that</n>are available 24 hours a day to serve </n> you</p> <p><a href="#" class="see">see more</a></p> </div> <div class="middle"> <img src="picture/image02.png" alt="" class="picture1"> <p class="pg1">There are more than a hundred</n>filghts a day to get up and</n>down,and you can book tickets at the fastest</n> speed.</p> <p><a href="#" class="see">see more</a></p> </div> <div class="middle"> <img src="picture/image03.png" alt="" class="picture1"> <p class="pg1">There are more than a hundred</n> filghts a day to get up and down,and </n>you can book tickets at the fastest</n> speed.</p> <p><a href="#" class="see">see more</a></p> </div> </div> </div> <div class="container_02"> <div class="Travel1"> <br> <h1>Travel Products</h1> </div> <div class="box03"> <div class="middle"> <h4>Free upgrade first class</h4> <img src="picture/pic1.jpg" alt="" class="picture2"> <p class="pg2">There are 23 airports in China that</n>are available 24 hours a day to </n> serve you </p> </div> <div class="middle"> <h4>Free upgrade first class</h4> <img src="picture/pic2.jpg" alt="" class="picture2"> <p class="pg2">There are 23 airports in China that</n>are available 24 hours a day to </n> serve you </p> </div> <div class="middle"> <h4>Free upgrade first class</h4> <img src="picture/pic3.jpg" alt="" class="picture2"> <p class="pg2">There are 23 airports in China that</n>are available 24 hours a day to </n> serve you </p> </div> </div> </div> <footer> <div class="pg3"> <p>Service Hotline (+86 21)955231 Customer Support Email:lb@ch.com</p> <h5>2019 LuckyBird Co.,ltd All right Reserved.</h5> </div> <div class="four_pictures"> <img src="picture/001.jpg" alt="" class="pc1"> <img src="picture/002.jpg" alt="" class="pc1"> <img src="picture/003.jpg" alt="" class="pc1"> <img src="picture/004.jpg" alt="" class="pc1"> </div> </footer> </div></body></html>