html布局_HTML响应式布局项目实战【19】

最新推荐文章于 2021-01-20 10:37:23 发布

weixin_39819671

最新推荐文章于 2021-01-20 10:37:23 发布

阅读量223

点赞数

文章标签： html布局 html项目

本章主要开始如果将前两个项目再进行重构，设计成既可以在 PC 端正常显示，又可以在 PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。

一．搜索响应式

在 PC 端，我们将搜索的文本框和按钮至于大背景前，移动端我们直接放在了大图片的下方。那么在响应式这里，我们还是遵循 PC 端，只不过采用流体缩放外加响应式控制来兼容显示。

HTML部分

<div id="adver">  <img src="img/adver.jpg" alt="">  <div class="center">div>  <div class="center copy">    <input type="text" class="search" placeholder="请输入旅游景点或城市">    <button class="button">搜索button>  div>div>

CSS部分

#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;}

二．底部响应式

底部的响应式很好理解，就是大屏幕采用 PC 端，小屏幕采用移动端，进行响应式隐藏即可。

HTML部分

<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>

CSS部分

#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%;  }}/*在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;  }}/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/@media (min-width: 480px) and (max-width: 767px) {  #header, #header .center, #header .link {    height: 45px;  }  #header .logo, .sm-hidden {    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;  }}/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/@media (max-width: 479px) {  #header, #header .center, #header .link {    height: 45px;  }  #header .logo, .xs-hidden, .sm-hidden  {    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;  }}