领进前端门,修行在个人:一变应万变的响应式网页设计(2) – 常见版型布局设置

国内高佣广告联盟 熊掌联运广告联盟 最新域名优惠/VPS优惠/免备案CDN活动

禁止显示x轴法则

在开发响应式网页时最切记的就是不能出现x轴,为什么呢?
当使用者浏览时,若画面有x轴也有y轴时,使用者必须上下左右滑动去浏览,这样对于使用者体验是相当不好的!!
这时候就要使用 max-width 拉 (撒花?)
解析度小于max-width宽度时,浏览器会自动调整宽度到目前的萤幕解析度,一下就解决会出现x轴的问题了~

版型单位%数观念

.container {
  width: 50%; 
  margin: 0 auto;
}

单位%数的好处在于,版型会依照父元素的宽度去设置比例,不会有超出父元素宽度的问题
可用于设置页面中需要并排的地方,将宽度利用%数分给两栏,如下图

.container {
  // max-width 适用于最外层,自适应浏览器的解析度
  max-width: 960px;  
  margin: 0 auto;
  height: 200px;
  background: grey;
}

.menu {
  width: 30%;
  height: 100px;
  background: orange;
  float: left;
}

.menu {
  width: 70%;
  height: 100px;
  background: yellow;
  float: left;
}

三栏式版型

如何结合前面所提到的两个语法来实现三栏式版型领进前端门,修行在个人:一变应万变的响应式网页设计(2) - 常见版型布局设置-图1(敲碗敲碗)

/* .html */

<div class="wrap">
  <ul class="news">
    <li>
      大标题
    </li>
    <li>
      大标题
    </li>
    <li>
      大标题
    </li>
    <li>
      大标题
    </li>
    <li>
      大标题
    </li>
    <li>
      大标题
    </li>
  </ul>
</div>
/* .css */

.wrap {
  max-width: 960px;
  padding-top: 20px;
  margin: 0 auto;
  line-height: 1.5;
}

.news h2 {
  color: #000;
  padding: .3em 0;
  font-size: 20px;
}

.news li {
  width: 31.33333%;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 1%;
  float: left;
}

@media(max-width: 768px) {
  .news li {
    width: 48%;
  }
}

@media(max-width: 569px) {
  /* 横式 */
  .news li {
    width: 98%;
  }
}

实例展示:JSBin

左侧固定版型

左侧menu给定固定宽度,右侧content设置margin-left menu的宽度
这样不管宽度如何延伸或缩小,menu的宽度和位置都会被固定在左侧

/* .html */

<div class="wrap">
    <div class="menu">
      <ul>
        <li>
          限时优惠
        </li>
        <li>
          主打商品
        </li>
      </ul>
    </div>
    <div class="content">
      大标题
    </div>
  </div>
/* .css */

.wrap {
  max-width: 960px;
  margin: 0 auto;
}

.menu {
  width: 150px;
  float: left;
  color: yellow;
  padding-top: 10px;
  background: #000;
}

.menu li {
  margin-bottom: 20px;
  color: #fff;
}

.content {
  margin-left: 150px;
  background: orange;
  color: #fff;
}

实例展示:JSBin

清除浮动并排效果

(沿用左侧固定版型)
运用 float:none 实作使用手机版型时,变成单栏式浏览

/* .html */

<div class="wrap">
    <div class="menu">
      <ul>
        <li>
          限时优惠
        </li>
        <li>
          主打商品
        </li>
      </ul>
    </div>
    <div class="content">
      Chinese Lorem Ipsum
      一包身年不,假海车负还直增地的转不相上财山?景变孩克的的面元电见纪不到乡法视说的引世生以,何法来亚失奖气讲长数数看?体是说看,样却更走什,直似的,女进得,国风热班孩待这急然大行纪登共这房量而意国间我一很金营;等论理另:爱在供男使于他量性长我使意团然程看不自另要向要笑破河子下山公是同需意三流儿成安河说里,乐出注领快院特课水名:下园计公难整西头直后收险风做较又!们化特进康成合叫生全得连。先的不该纪怕大我器数服你样国上,在的人身样!高单可儿果人自些全……只诗可。师市么不然王事前且优配觉业着是人可此才消民朋华要示近水我以英视?手个差他大效,已们办能修积是防又题统发这作父有打出制主来思乐师未向……我上明花国院叫为加案外不我的李认出服数作思这背林保里更和投来象面险出金本通声我的了性入必力步风水线一地司身们白受,的的国教常取车门候产去有断小习经他入:利看母生校越原品费下,公以与力拿两实!
    </div>
  </div>
/* .css */

.wrap {
  max-width: 960px;
  margin: 0 auto;
}

.menu {
  width: 150px;
  float: left;
  color: yellow;
  padding-top: 10px;
  background: #000;
}

@media(max-width: 768px) {
  .menu {
    width: 100%;
    float: none;
  }
}

.menu li {
  margin-bottom: 20px;
  color: #fff;
}

.content {
  margin-left: 150px;
  background: orange;
  color: #fff;
}

@media(max-width: 768px) {
  .content {
    margin-left: 0;
  }
}

实例展示:JSBin

简易网站版型

领进前端门,修行在个人:一变应万变的响应式网页设计(2) - 常见版型布局设置-图2
领进前端门,修行在个人:一变应万变的响应式网页设计(2) - 常见版型布局设置-图3

/* .html */

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>网站版型框架设置</title>
</head>
<body>
  <div class="wrap">
    <div class="header">
      <h1 class="logo"><a href="#">公司LOGO</a></h1>
      <ul class="menu">
        <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>
      </ul>
    </div>
    <div class="content">
      <h2>新闻标题</h2>
    	<p>
        六角学院新闻 (2016-06-21 09:06) 
        </p>
        <p>
            生艺本技得童总信。上能表有能已位字高企断他?神些的司……特了又他的,了象大初小研车对加、间四比,想年诉选年:三车写教。他成济位像知他气程表事。听制起又云师山,重不能界使我伤!温统接视情期事……况无没指超及世。
        </p>
        <p>
          列文一有爱的空金代电一前却欢电个鱼天读状各童流处开起那朋。他他定?一眼的树父哥农原府之众来长体然视像的民,厂有发当他的开人经环,费费们人物剧……了历斯子的各好长,汽先动师还成给不国有一了了找以奇供用统兰是影能用以张中准这一演的重前光接现会的际女完财到们纪,一要运看人!乡定引手的反地整儿如着……声去种交好民响于细学有请日样远视好院:大是会?一慢得以长一见新主神倒们大策命来高事。况经受前态到人居,的产料,个他拿手压收告有有们表立心上明以儿方人看外人方在的生果台:他方集利然内造关单史说这印立正;本长己了年们不内喜易,读天少以经除来:院信难唱还会我集因就,水与想何,作如格我许家自高音们钱了,我到不讲收里怕,山老医头没标本者近此系。
        </p>
    </div>
    <div class="sidebar">
      <img src="https://img.onl/MSgRql" />
      <img src="https://img.onl/MSgRql" />
      <img src="https://img.onl/MSgRql" />
    </div>
    <div class="footer">
      Copyright © 2020
    </div>
  </div>
</body>
</html>
/* .css */

/* CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a img {
	border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
html {
}
*,*:before,*:after{
	box-sizing: border-box;
}
img{
	max-width: 100%;
	height: auto ;
}
/* CSS Reset end */

.wrap {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.header {
  pasition: relative;
  height: 350px;
}

@media(max-width: 768px) {
  .header {
    height: auto;
  }
}

.logo {
  position: absolute;
  top: 30px;
  left: 0px;
}

.logo a {
  display: block;
  width: 250px;
  text-indent: -9999px;
  height: 250px;
  background: url('https://img.onl/XfP3pc')
}

@media(max-width: 768px) {
  .logo {
    position: relative;
    margin: 0 auto;
    width: 150px;
    padding-bottom: 20px;
  }
  
  .logo a {
    display: block;
    width: 150px;
    height: 150px;
    background: url('https://img.onl/8V5xLb')
  }
}

.menu {
   position: relative;
   top: 30px;
   float: right;
}

.menu li {
  float: left;
  background: #3399FF;
  border-right: 1px solid #fff;
}

.menu li a {
  color: #fff;
  display: block;
  width: 100px;
  font-weight: bold;
  text-align: center;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
}

.menu li a:hover {
  background: yellow;
  color: black;
}

@media(max-width: 768px) {
  .menu {
    float: none;
  }
  
  .menu li {
    width: 90%;
    float: none;
    margin: 0 auto 10px auto;
    border-radius: 3px;
  }
  
  .menu li a {
    width: 100%;
    text-align: center;
  }
}

.content {
  float: left;
  width: 75%;
  border: 2px solid #000;
  padding: 10px;
}

.content h2{
	font-weight: bold;
	font-size: 26px;
	padding: 30px 0 20px 0;
}

.content p{
	line-height: 1.8;
	letter-spacing: 1pt;
	padding: 0 0 30px 0;
}

.sidebar {
  float: right;
  width: 20%;
  border: 2px solid #000;
  padding: 5px;
  margin-left: 5%;
}

.sidebar img {
  margin: 0 0 10px 0;
}

@media(max-width: 768px) {
  .content, .sidebar {
    border: none;
    float: none;
    width: 100%;
  }
  
  .sidebar img {
    display: block;
    max-width: 90%;
    height: auto;
    margin-bottom: 10px;
  }
}

.footer {
  clear: both;
  padding: 1em;
  text-align: center;
}

实例展示:codepen

问题与讨论

我也是前端的小菜鸟,所以要是有什么写得不好的地方,大师路过还请多给我一些指点,也请各位大师鞭小力点XD
如果你/妳已经是在前端上有一两年经验的,因本系列文章偏向前端入门,可能本系列文章不太适合你/妳,但也欢迎你/妳给予一些建议。

推荐:
收<<<<亚马逊云>>>>

Uyi大佬: 收<<<<亚马逊云>>>> 国外版的  老号... 有的联系我...各位大神 手里有资源的联系我变糖葫芦了... 账户…

请问各位大佬这是什么插件?????

李彦宏大佬: 在很多aff站里头看到的这样的表格,是怎么实现的呀? 以小夜的为例 https://locbb.com/2020-03-ftpit.html 倾城翻翻分身一大佬: 照着抄啊,管他怎么实现…

安卓tasker转发短信到网站

如果手机不在身边,如何查看验证码未接来电未接短信?苹果小米华为的云服务都是反人类的难用,只好自己动手了。安卓 android tasker转发短信到网站。网站有php接收存入数据库并email。如果短…