本章主要开始如果将前两个项目再进行重构，设计成既可以在 PC 端正常显示，又可以在 PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。
一．风景欣赏响应式
头部和右侧和公司简介一样，左边做成和首页图片流体一样即可。
html 部分
<html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>瓢城旅行社--响应式title> <link rel="stylesheet" href="css/style.css">head><body><header id="header"> <div class="center"> <h1 class="logo">瓢城旅行社h1> <nav class="link"> <h2 class="none">网站导航h2> <ul> <li><a href="index.html">首页a>li> <li><a href="information.html"><span class="xs-hidden">旅游span>资讯a>li> <li><a href="ticket.html">机票<span class="xs-hidden">订购span>a>li> <li class="xs-hidden active"><a href="scenery.html">风景欣赏a>li> <li><a href="about.html"><span class="xs-hidden">关于span>公司a>li> ul> nav> div>header><div id="headline"> <img src="img/headline.jpg" alt=""> <hgroup> <h2>风景欣赏h2> <h3>各种旅游图片的欣赏合集h3> hgroup>div><div id="container"> <aside class="sidebar"> <div class="sidebox recommend"> <h2>景点推荐h2> <div class="tag"> <ul> <li><a href="###">曼谷(12)a>li> <li><a href="###">东京(5)a>li> <li><a href="###">西双版纳(8)a>li> <li><a href="###">漓江(16)a>li> <li><a href="###">呼伦贝尔(4)a>li> <li><a href="###">首尔(9)a>li> <li><a href="###">巴厘岛(15)a>li> <li><a href="###">土耳其(22)a>li> <li><a href="###">夏威夷(5)a>li> <li><a href="###">巴厘岛(11)a>li> <li><a href="###">毛里求斯(7)a>li> <li><a href="###">吉普岛(4)a>li> <li><a href="###">希腊(18)a>li> <li><a href="###">法瑞意(8)a>li> <li><a href="###">马尔代夫(9)a>li> <li><a href="###">新西兰(16)a>li> <li><a href="###">埃及(11)a>li> <li><a href="###">迪拜(14)a>li> <li><a href="###">斯里兰卡(7)a>li> <li><a href="###">麦哈顿(3)a>li> <li><a href="###">大阪(15)a>li> ul> div> div> <div class="sidebox hot"> <h2>热门旅游h2> <div class="figure"> <figure> <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游"> <figcaption>曼谷-芭提雅6日游figcaption> figure> <figure> <img src="img/hot2.jpg" alt="马尔代夫双鱼6日游"> <figcaption>马尔代夫双鱼6日游figcaption> figure> <figure> <img src="img/hot3.jpg" alt="海南双飞5日游"> <figcaption>海南双飞5日游figcaption> figure> <figure> <img src="img/hot4.jpg" alt="富山大阪东京8日游"> <figcaption>富山大阪东京8日游figcaption> figure> <figure> <img src="img/hot5.jpg" alt="法瑞意德12日游"> <figcaption>法瑞意德12日游figcaption> figure> <figure> <img src="img/hot6.jpg" alt="巴厘岛6日半游"> <figcaption>巴厘岛6日半游figcaption> figure> <figure> <img src="img/hot7.jpg" alt="塞舌尔迪拜9日游"> <figcaption>塞舌尔迪拜9日游figcaption> figure> <figure> <img src="img/hot8.jpg" alt="花样土耳其10日游"> <figcaption>花样土耳其10日游figcaption> figure> div> div> <div class="sidebox treasure"> <h2>旅游百宝箱h2> <div class="box"> <a href="###" class="trea1">天气预报a> <a href="###" class="trea2">火车票查询a> <a href="###" class="trea3">航空查询a> <a href="###" class="trea4">地铁线路查询a> div> div> aside> <div class="list scenery"> <section> <h2>风景欣赏h2> <figure> <img src="img/s1.jpg" alt="曼谷-芭提雅"> <figcaption>曼谷-芭提雅[共8张]figcaption> figure> <figure> <img src="img/s2.jpg" alt="马尔代夫双鱼岛"> <figcaption>马尔代夫双鱼岛[共12张]figcaption> figure> <figure> <img src="img/s3.jpg" alt="海南"> <figcaption>海南[共19 张]figcaption> figure> <figure> <img src="img/s4.jpg" alt="富山-大阪-东京"> <figcaption>富山-大阪-东京[共22张]figcaption> figure> <figure> <img src="img/s5.jpg" alt="法瑞意德"> <figcaption>法瑞意德[共31张]figcaption> figure> <figure> <img src="img/s6.jpg" alt="巴厘岛"> <figcaption>巴厘岛[共12张]figcaption> figure> <figure> <img src="img/s7.jpg" alt="塞舌尔迪拜"> <figcaption>塞舌尔迪拜[共7张]figcaption> figure> <figure> <img src="img/s8.jpg" alt="花样姐姐土耳其"> <figcaption>花样姐姐土耳其[共14张]figcaption> figure> section> <div class="clearfix">div> <div class="more">加载更多...div> div>div><footer id="footer"> <div class="top sm-hidden"> <div class="block left"> <h2>合作伙伴h2> <hr> <ul> <li>途牛旅游网li> <li>驴妈妈旅游网li> <li>携程旅游li> <li>中国青年旅行社li> ul> div> <div class="block center"> <h2>旅游FAQh2> <hr> <ul> <li>旅游合同签订方式？li> <li>儿童价是基于什么制定的？li> <li>旅游的线路品质怎么界定的？li> <li>单房差是什么？li> <li>旅游保险有那些种类？li> ul> div> <div class="block right"> <h2>联系方式h2> <hr> <ul> <li>微博：weibo.com/xxxxli> <li>邮件：xxx@126.comli> <li>地址：xxxxxxxxxxxli> ul> div> div> <div class="clearfix">div> <div class="version sm-visible"> 客户端 | 触屏版 | 电脑版 div> <div class="bottom"> Copyright © WEB 瓢城旅行社 | 苏ICP备xxxxxxxxx号<span class="sm-hidden"> | 旅行社经营许可证：xxxxxxxxxspan> div>footer>body>html>css 部分
.scenery figure { border: 1px solid #ddd; display: block; padding: 4px; border-radius: 4px; width: 32.6%; margin: 15px 5px 15px 0; text-align: left; float: left;}.scenery figcaption { text-align: center; padding: 5px 0; font-size: 20px; color: #666;}媒体部分
//媒体查询@media (min-width: 480px) and (max-width: 767px) { .scenery figure { width: 48.8%; }}@media (max-width: 479px) { .scenery figure { width: 99%; }}二．机票订购响应式
机票订购和风景一样，PC 端移植过来即可。HTML 和 CSS 部分不需要变动。
html 部分直接 PC 端移植，完全不需要动，代码忽略
css 部分基本不需要改动，本身就是流体。
@charset "utf-8";body,h1,h2,h3,p,ul,ol,form,fieldset,figure { margin: 0; padding: 0;}div,figure,img,input,button { box-sizing: border-box;}body { background-color: #f5f5f5; font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;}img { display: block; max-width: 100%;}ul,ol { list-style: outside none none;}a { text-decoration: none;}.none { display: none;}.sm-visible { display: none;}.clearfix:after { content:"."; height:0; visibility:hidden; display:block; clear:both; }#header { width: 100%; height: 70px; background-color: #333; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); position: fixed; top: 0; z-index: 9999;}#header .center { max-width: 1263px; height: 70px; margin: 0 auto;}#header .logo { width: 30%; height: 70px; background: url(../img/logo.png) no-repeat left center; text-indent: -9999px; float: left;}#header .link { width: 55%; height: 70px; line-height: 70px; color: #eee; float: right;}#header .link li { width: 20%; text-align: center; float: left;}#header .link a { color: #eee; display: block;}#header .link a:hover, #header .active a { background-color: #000;}#adver { max-width: 1920px; margin: 0 auto; padding: 70px 0 0 0; position: relative;}#adver .center { width: 40%; height: 60px; background-color: #000; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -20%; opacity: 0.6; border-radius: 10px;}#adver .copy { opacity: 1; background-color: transparent; padding: 3px 3px 0 3px;}#adver .search { width: 70%; height: 52px; background-color: #eee; color: #666; border: 1px solid #666; border-radius: 10px; font-size: 24px; padding: 0 10px; outline: none; display: block; float: left;}#adver .button { width: 30%; height: 54px; background-color: #eee; color: #666; border: 1px solid #333; border-left-width: 3px; border-radius: 10px; font-size: 24px; outline: none; cursor: pointer; font-weight: bold; display: block; float: right;}#tour { max-width: 1263px; height: 1150px; margin: 30px auto; text-align: center;}#tour .center { text-align: center;}#tour .center h2 { margin: 10px 0; font-size: 45px; letter-spacing: 2px; color: #666;}#tour .center p { color: #666; margin: 10px; font-size: 16px;}#tour .tour_title { height: 40px; overflow: hidden;}#tour figure { border: 1px solid #ddd; display: block; padding: 4px; border-radius: 4px; width: 32.4%; margin: 15px 0.4%; text-align: left; float: left; position: relative;}#tour figure img { vertical-align: middle;}#tour figure figcaption { color: #777; font-size: 14px; padding: 7px 0 0 0; letter-spacing: 1px; line-height: 1.5;}#tour .title { color: #333; font-weight: normal;}#tour .info { padding: 5px 0 0 0;}#tour .price { color: #f60; font-size: 14px;}#tour .price strong { font-size: 20px; letter-spacing: 1px;}#tour .sat { color: #999; font-size: 13px; font-style: normal; float: right; position: relative; right: 5px; top: 5px;}#tour .type { width: 90px; height: 25px; line-height: 25px; text-align: center; border-bottom-right-radius: 4px; background-color: #59b200; font-size: 14px; color: #fff; letter-spacing: 1px; position: absolute; top: 4px; left: 4px;}#headline { max-width: 1920px; padding: 70px 0 0 0; margin: 0 auto; position: relative;}#headline hgroup { position: absolute; top: 45%; left: 18%; }#headline h2 { color: #eee; font-size: 45px; letter-spacing: 1px;}#headline h3 { color: #eee; letter-spacing: 1px; font-size: 24px;}#container { max-width: 1263px; margin: 30px auto;}#container .sidebar { width: 28%; float: right;}#container .sidebar h2 { height: 40px; line-height: 40px; font-size: 20px; font-weight: normal; letter-spacing: 1px; color: #666; text-indent: 10px; background-color: #fafafa; border-bottom: 1px solid #eee; text-align: left;}#container .recommend { border: 1px solid #eee; margin: 0 0 10px; background-color: #fff;}#container .tag { text-align: center; padding: 10px 0;}#container .tag li { display: inline-block; background-color: #eee; width: 100px; height: 35px; line-height: 35px; text-indent: 8px; text-align: left; margin:2px 0;}#container .tag a { display: block; color: #999;}#container .tag a:hover { color: #fff; background-color: #458B00;}#container .hot { border: 1px solid #eee; margin: 0 0 10px; text-align: center; background-color: #fff;}#container .figure { padding: 10px 0;}#container .hot figure { display: inline-block; color: #666; padding: 4px;}#container .treasure { border: 1px solid #eee; margin: 0 0 10px; background-color: #fff;}#container .box { text-align: center; padding: 10px 0;}#container .box a { display: inline-block; background-color: #eee; width: 150px; height: 40px; line-height: 40px; text-indent: 35px; text-align: left; margin:3px 0; color: #999;}#container .box a.trea1 { background: #eee url(../img/trea1.png) no-repeat 10px center;}#container .box a.trea2 { background: #eee url(../img/trea2.png) no-repeat 10px center;}#container .box a.trea3 { background: #eee url(../img/trea3.png) no-repeat 10px center;}#container .box a.trea4 { background: #eee url(../img/trea4.png) no-repeat 10px center;}.list { width: 71%; float: left;}.list h2 { height: 40px; line-height: 40px; font-size: 30px; font-weight: normal; border-bottom: 1px dashed #999; padding: 0 0 15px 0; color: #666;}.about p { font-size: 20px; color: #666; line-height: 2; margin: 20px 0;}.about address { font-style: normal; font-size: 20px; color: #666; margin: 20px 0; line-height: 1.6;}.list .more { width: 200px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #ccc; border-radius: 10px; font-size: 18px; margin: 0 auto; cursor: pointer; background-color: #fafafa;}.scenery figure { border: 1px solid #ddd; display: block; padding: 4px; border-radius: 4px; width: 32.6%; margin: 15px 5px 15px 0; text-align: left; float: left;}.scenery figcaption { text-align: center; padding: 5px 0; font-size: 20px; color: #666;}.ticket { color: #666;}.ticket .type { font-size: 20px; margin: 20px 0 10px 0; border: none;}.ticket .type mark { color: #fff; background-color: #458B00; padding: 5px 8px; border-radius: 4px; margin: 0 10px 0 16px;}.ticket .form { font-size: 20px; border: none;}.ticket .form p { line-height: 3;}.ticket .form input { width: 250px; height: 30px; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; padding: 5px; font-size: 18px; color: #666; margin: 0 0 0 16px;}.ticket .left { width: 43%; display: inline-block;}.ticket .right { width: 43%; display: inline-block;}.ticket .button { width: 9%; display: inline-block;}.ticket .submit { display: inline-block; width: 90px; height: 90px; line-height: 90px; border-radius: 4px; background-color: #f60; color: #fff; font-size: 20px; text-align: center; border: none; cursor: pointer; position: relative; top: -28px;}.ticket .new { margin: 20px 0 0 0; font-size: 20px;}.ticket .new ul { margin: 20px 0 0 0;}.ticket .new li { display: inline-block; padding: 5px 10px;}.ticket .new li:first-child { padding-left: 0;}.ticket .new li:nth-child(2) { background-color: #458B00; border-radius: 4px; color: #fff;}.ticket table { width: 100%; border-collapse:collapse; margin: 20px 0 0 0; border: 1px solid #ddd;}.ticket table th { height: 50px; line-height: 50px; border-bottom: 1px solid #ddd; font-weight: normal;}.ticket table td { height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #ddd;}.ticket table tr:nth-child(2n) { background-color: #fafafa;}.ticket table tr:hover { background-color: #eee;}.ticket .price { color: #f60;}.ticket .more2 { text-align: center; font-size: 18px; margin: 0 auto; cursor: pointer; display: block; color: #666;}.ticket .reserve { display: inline-block; width: 80px; height: 35px; line-height: 35px; border-radius: 4px; background-color: #f60; color: #fff; font-size: 20px; text-align: center;}#footer { background-color: #222; clear:both; position: relative; top: 20px;}#footer .top { max-width: 1263px; height: 280px; margin: 0 auto; text-align: center;}#footer .version { color: #777; text-align: center; padding: 10px 0;}#footer .block { width: 33.33%; height: 320px; display: inline-block; color: #ccc; text-align: left; vertical-align: top; display: block; float: left;}#footer .bottom { padding: 15px 0; text-align: center; color: #777; background-color: #000; border-top: 1px solid #444;}#footer h2 { font-weight: normal; padding: 20px 0 0 20px; font-size: 24px;}#footer hr { width: 90%; border: 1px dashed #333;}#footer ul { color: #666; font-size: 18px; text-indent: 20px; line-height: 2;}/*媒体查询，参考部分Bootstrap 框架*//*当页面大于1200px 时，大屏幕，主要是PC 端*/@media (min-width: 1200px) { }/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/@media (min-width: 992px) and (max-width: 1199px) { #adver .center { width: 50%; margin: -10px 0 0 -25%; } #tour .center h2 { font-size: 40px; } #headline hgroup { left: 8%; } #headline h2 { font-size: 36px; } #headline h3 { font-size: 20px; } .sidebar { display: none; } .list { width: 100%; padding: 0 20px }}/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/@media (min-width: 768px) and (max-width: 991px) { #adver .center { width: 60%; margin: -10px 0 0 -30%; } #adver .search, #adver .button { font-size: 20px; } #tour .center h2 { font-size: 35px; } #headline hgroup { left: 8%; } #headline h2 { font-size: 30px; } #headline h3 { font-size: 16px; } .sidebar { display: none; } .list { width: 100%; padding: 0 20px } .list h2 { font-size: 28px; } .about p,.about address { font-size: 18px; } .ticket .left, .ticket .right, .ticket .button { width: 98%; display: block; } .ticket .form input { width: 98%; height: 35px; margin: 0; } .ticket .form p { line-height: 2; } .ticket .submit { display: block; width: 30%; height: auto; line-height: 2; position: static; margin:10px auto; }}/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/@media (min-width: 480px) and (max-width: 767px) { #header, #header .center, #header .link { height: 45px; } #header .logo, .sm-hidden,.sidebar { display: none; } #header .link { width: 100%; line-height: 45px; } #adver { padding: 45px 0 0 0; } #adver .center { width: 70%; height: 53px; margin: -10px 0 0 -35%; } #adver .search, #adver .button { height: 45px; font-size: 18px; } .sm-visible { display: block; } #tour .center h2 { font-size: 30px; } #tour .center p { font-size: 15px; } #tour figure { width: 49.2%; } #headline { padding: 45px 0 0 0; } #headline hgroup { left: 8%; } #headline h2 { font-size: 26px; } #headline h3 { font-size: 14px; } .list { width: 100%; padding: 0 20px } .list h2 { font-size: 25px; } .about p,.about address { font-size: 15px; } .scenery figure { width: 48.2%; } .scenery figcaption { font-size: 18px; } .ticket .left, .ticket .right, .ticket .button { width: 98%; display: block; } .ticket .form input { width: 98%; height: 35px; margin: 0; } .ticket .form p { line-height: 2; } .ticket .submit { display: block; width: 30%; height: auto; line-height: 2; position: static; margin:10px auto; } .ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .submit, .ticket .reserve { font-size: 16px; }}/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/@media (max-width: 479px) { #header, #header .center, #header .link { height: 45px; } #header .logo, .xs-hidden, .sm-hidden, .sidebar { display: none; } #header .link { width: 100%; line-height: 45px; } #header .link li { width: 25%; } #adver { padding: 45px 0 0 0; } #adver .center { width: 80%; height: 48px; margin: -10px 0 0 -40%; } #adver .search, #adver .button { height: 40px; font-size: 16px; } .sm-visible { display: block; } #footer .bottom, #footer .version { font-size: 13px; } #tour .center h2 { font-size: 26px; } #tour .center p { font-size: 14px; } #tour figure { width: 99%; } #headline hgroup { left: 8%; } #headline h2 { font-size: 20px; } #headline h3 { font-size: 12px; } #headline { padding: 45px 0 0 0; } .list { width: 100%; padding: 0 20px } .list h2 { font-size: 20px; } .about p,.about address { font-size: 14px; } .scenery figure { width: 99%; } .scenery figcaption { font-size: 16px; } .ticket .left, .ticket .right, .ticket .button { width: 98%; display: block; } .ticket .form input { width: 98%; height: 35px; margin: 0; } .ticket .form p { line-height: 2; } .ticket .submit { display: block; width: 30%; height: auto; line-height: 2; position: static; margin:10px auto; } .ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .submit, .ticket .reserve { font-size: 14px; } .ticket .reserve { display: inline-block; width: auto; height: auto; line-height: 1; border-radius: 4px; background-color: #f60; color: #fff; padding: 8px; text-align: center; }}学习贵在坚持！！！！！！！！！！！！！！！！！！！！
如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉 上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！
1371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
