最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

11. html响应式布局

HTML语言学习 林雍岷 196浏览

创建一个简单的HTML响应式网站,本教程适合有一些HTML和CSS的基本知识任何人。如果你是一个有经验的网页设计师,那么可以直接阅读简单的代码就足以可以让你开始正式工作了,因为这个简单的HTML响应式网站代码是非常经典的。

简单html响应式布局文件归档

简单的HTML响应式网站项目文件夹命名为Simple,为了初学者我把项目分为基础版(basic)和色块进行区分,它们都在simple.zip存档中,基础版主题文件是Basic.html,CSS文件夹中有basic-style.css文件,images文件夹中有一些带有basic前缀的图像,属于基础版(basic) 主题。色块版主题与基础主题结构相同,只是所有前缀带有colorblocks的东西。

在本教程中,我们使用基本主题,色块版非常相似,所以如果你学习其中一个,你就会自动学习另一个。我们将在CSS教程中查看主题之间的小差异。

HTML文件结构

basic.html是网站主页的模板,我们将开始使用主页,然后将其制成一个内部页面。为了帮助你更快、更容易地理解文件结构,对HTML进行了很好的注释。这个注释的例子:<!– 头部区域 –>。注释通常成对出现,一个表示某个区域的开始,另一个表示结束。有些注释没有结束语,简短的事情。就像这个<!–移动视口–>后跟一行代码。

现在我们跳过页面的<head></head>部分直接看<body>正文,有以下部分:

  • 头部
    • Banner
    • 主导航(nav #topnav)
  • Hero区域
    • 带grid_5类的div包含标题和一些文本
    • 带grid-7类的div包含图像幻灯片(flexslider)
  • 主区域是包含内容(#content)和列演示(#columnsdemo)部分
  • 底部
  • 一些JavaScript链接在关闭标记之前

一开始就必须了解此结构在响应式布局中的行为是很重要。响应式网页设计的概念是台式机和笔记本电脑相比,移动设备显示的网站内容更少。造成这种情况的原因是屏幕较小,移动设备上的互联网连接速度通常要慢得多。因此你可以尽量向移动设备显示最少的东西,然后随着屏幕尺寸的增加逐渐显示更多东西。

若要快速查看Simple对屏幕大小的反应,请调整浏览器窗口的大小并开始逐渐减小其宽度。你会看到轮播图幻灯片将消失,导航栏将变为切换菜单,并排的文本列将变为100%宽,并会彼此重叠,依此类推。

修改basic.html创建网站的主页

让我们为你的站点创建一个真实的主页,现在我们只更改HTML并保持样式(即CSS)不变。我们应该做的第一件事是将basic.html重命名为index.html。从现在开始我们将参考我们正在构建的index.html作为此页面。

文件<head>

现在是时候检查<head></head>部分,更改网站标题,元描述和元关键字,头部其余的东西可以先保留下来。

Logo标识

网站标识以下代码:

<div id="banner">
<div id="logo"><a href="index.html"><img src="images/basic-logo.svg" alt="logo"></a></div>
</div>

我们使用SVG文件作为标识,它可以在任何屏幕上清晰呈现。但是你可以使用互联网接受的任何文件类型:.JPG,.PNG等,插入你的标识。为了获得最佳效果请尝试其宽最大200像素,记得将标识周围的链接从basic.html更改为index.html。

导航

标识出现后,项目最重要的部分之一就是:导航菜单。index.html页面是3级导航,注意某些列表元素有class =”current”。此类创建用于突出显示当前页面的颜色。你还可以在某些子菜单项上使用此类,但是如果你不打算将自己构建的内容作为CMS模板实施,最好将current类保留在顶部菜单项上。

simple项目使用3层导航,你需要编写一些其它CSS,建议菜单最多使用2个级别,顶部链接和一级下拉菜单。HTML菜单结构是无序列表,如果你将拥有一级以上的链接,它将是嵌套列表。嵌套列表位于某个链接的结束</a>标记与其结束</li>之间。插入指向你网站上实际页面的链接,而不是链接#占位符。请不要忘记检查页面在窄屏上的外观,调整浏览器的大小,然后单击“菜单”按钮以查看切换菜单的作用。菜单从导航栏自动转换为切换,不要删除<div class =”menu-toggle”>菜单</div>外,你无需执行任何操作即可。切换按钮在小屏幕上可见,在大屏幕上隐藏。

假设你正在建立一个餐饮业务网站,你的导航菜单代码如下所示:

<!-- 主导航 -->
<nav id="topnav" role="navigation">
<h5 class="menu-toggle">导航</h5>
<ul class="srt-menu" id="menu-main-navigation">
   <li class="current"><a href="index.html">首页</a></li>
   <li><a href="about-us.html">关于</a></li>
   <li><a href="services.html">服务</a>
      <ul>
         <li><a href="services-wedding-catering.html">婚礼餐饮</a></li>
         <li><a href="services-party-catering.html">派对餐饮</a></li>
         <li><a href="services-kids-catering.html">儿童餐饮</a></li>
      </ul>
   </li>
   <li><a href="menu.html">菜单</a></li>
   <li><a href="contact.html">联系</a></li>
</ul>
</nav><!-- end main navigation -->

Hero版块

英雄版块是你展示产品或业务的地方。你需要提出简短连贯的标语和促销文字描述你的网站内容。 当然还有一些令人惊叹的图片来吸引访客注意力。但是片刻之后。 首先段落描述的标题使用h1,把描述性文本插入<h1></h1>。

Flexslider图片幻灯片

Flexslider图片幻灯片插件易于修改,幻灯片位于无序列表中,如果你只想要图像,请使用自己的图像更新滑块中的图像,然后删除幻灯片<li></li>之间所有其它的内容。如有必要请重命名图像并设置正确的路径。如果要添加标题,请在图片下方添加一段文字。你也可以将图像包含在链接中。浏览器调整大小测试以查看幻灯片在不同分辨率下的外观,并选择最适合的图片大小。请注意当你调整浏览器的大小时,图像是如何按比例缩放的。简而言之,它正在响应图像大小对容器大小做出响应。如果你在触摸屏设备上测试页面,你会发现可以用手指滑动幻灯片来进行浏览。

全宽Flexslider

如果要全宽屏播放幻灯片这很容易做到的,只需从文本列中删除grid_5类,并从滑块列中删除grid_7 omega和rightfloat即可。然后文本将位于滑块的顶部,并且滑块的宽度为100%。你也可以完全删除文本或将其移动到滑块下方,既然我们再次提到了网格,让我们深入仔细分析。

网格系统

网格系统是一系列,你可以将它们并排放置。有许多不同列数的网格系统,我们在Simple中使用12格的网格。这意味着12列的宽度为100%,一列的宽度为100%除以12,所有其它列的宽度是十二分之一的倍数。让我们看hero版块,标语和文本在带有grid_5类的div(列)中。Flexslider位于一个带有grid_7类的div中。列的索引(5和7)正好等于12。这就是网格系统的工作方式,如果要并排设置3个相等的列,则将在类grid_4(12/3 = 4)中使用3个div,对于4个相等的列是grid_3(12/4 = 3),2个相等的列是grid_6。你可以合并不相等的列,只需看一下列演示,你将看到各种组合。

关于列的两点注意事项

  • 由于列的左右两边填充15像素,因此与其余内容相比它们缩进的量较小,你可以使用<div class =”row”>包含列消除15px的间距。
  • 所有列都变为具有100%宽度的简单容器,他们停止并排漂浮,像段落一样一个接一个,这样做是为了确保它们不会变得太狭窄或在小屏幕上被挤压。

主要内容版块

回到主要内容区域,请注意主要区域div的wrapper类。这是定义整个站点宽度的类,没有它元素将是100%宽,现在包装器宽度最大设置为1200像素。

在主要内容版块你可以找到内容和列演示部分,内容部分有wide-content类,如果你希望内容占用所有可用空间请使用此类。没有wide-content类内容将约为 wrapper宽度的三分之二。如果要有一个侧边栏,请把内容变狭窄。

在content div中有3列等宽列的文本并排浮动。你可以像这样保留它,关于,服务,感言。 或者你可以按上述任何方式重新排列向上述描述那样。在实际操作中,让我们让3列变成2列,把class =”grid_4″的最后一个div删除。在剩下的两列将类grid_4改为类grid_6即可。让我们完全删除列,将剩余的div删除class =”grid_6″(记住删除本身div,也不要忘记删除div关闭标签)。现在你只有一个未分割的文本块。

可以使用标题标签1到6将主要内容版块中的内容分为几部分:h1,h2,h3等,就像本教程页面上的文本一样。

让我们在内容区域中的任意位置插入2行,每行4个相等的列。 我们还将练习使用响应式图像。 首先创建一个带有clearfix类的空div:<div class =”clearfix”></ div>。 如果你使用多行可变高度的列,最好在这种div中包装一行列。如果所有列的高度都相同,则不应使用包含div的列。然后在包含div的内部插入4个相同的div:<div class =”grid_4″>占位符文本</div>。最后插入一些占位符文本,并在其上方的每列中插入一个图像。 如果要图片滚动播放你可以使用幻灯片。div看起来像这样:

<div class="grid_4">占位符文本
<img src="images/basic-pic1.jpg" />
<p>占位符文本占位符文本占位符文本占位符文本占位符文本占位符文本 :)</p>
<div>

现在要练习使用自适应图片,请调整浏览器大小进行测试,并查看图像如何自动缩放。当列的宽度变为100%时图像会变大。Simple中的任何由CSS规则处理的图片都已经响应,要图像自适应只需将其插入页面内容中即可。

此时我们可能已经对使用网格有所了解,请删除”column”演示部分,还要删除index.html部分中演示样式。

修改index.html文本和图像为你自己的已完成你的主页。主页感到满意后将其保存,然后复制并重命名。使用在你的主菜单中其它HTML文件,例如services.html。 现在我们将调整此新页面的结构,以将其修改为适当的栏目页。

栏目页制作

将services.html转换为详情页制作实际上非常容易。首先将当前类从主页的导航项移动到服务上。

接下来我们修改hero版块,网站栏目页都不需要促销文字和幻灯图片。 因此请从hero版块删除grid的两个div分别是promo和Flexslider,留着div class =”wrapper”,我们仍然需要它,然后将section的ID从id =”hero”更改为id =” page-header”。在页眉部分中添加<h1>服务</h1>,查看网页效果。

我们的栏目页中将有一个新元素<aside>边栏。服务部分有3个子页面,因此在内容区域旁边进行辅助导航是一个好主意,让我们做一个侧边栏。首先从内容部分删除class =”wide-content”。内容部分的宽度变小,从而为旁边的另一个元素留出空间,在结束内容部分标签(<section> <!-#end内容区域->)之后,为边栏添加代码:

<!-- sidebar -->
<aside>
<h2>我们的服务</h2>
   <nav id="secondary-navigation">
      <ul>
         <li><a href="services-wedding-catering.html">婚礼餐饮</a></li>
         <li><a href="services-party-catering.html">派对餐饮</a></li>
         <li><a href="services-kids-catering.html">儿童餐饮</a></li>
      </ul>
   </nav>
</aside><!-- #end sidebar -->


<aside>是侧边栏和任何其它类型的相关内容的语义标记,在边栏中可以找到带有熟悉的无序链接列表的导航菜单。此导航有id =”secondary-navigation”。在浏览器中检查页面你会看到内容与侧边栏中的“服务”部分菜单并排浮动。调整浏览器窗口的大小,查看侧边栏将如何下降到较小屏幕上的内容之下。

如果需要可以在边栏中添加更多内容放在结束</nav>标记之后。安排services.html内容可以复制并重命名它以创建内部网站页面的其它部分。

修改网站样式

我们已经了解如何使用Simple的HTML创建完整的网站。如果你想让你的网站更具品牌外观,接下来我们修改颜色,修改在移动设备上可见或不可见的内容。

我们将学习如何通过将基本主题转换为色块主题来更改简单外观的方式。 为此我们将主要使用CSS,但是HTML文件也会发生一些变化。本教程适用于初学者的网页设计师。

移动优先

我们将使用basic-style.css(位于CSS文件夹中)。有关简单的CSS最重要的是了解“移动优先”方法。这种方法决定了浏览器构造和“读取”CSS文件的方式,传统的CSS结构一开始就是桌面样式,然后通过添加媒体查询来对其进行结构调整为移动优先。

如果删除basic-style.css所有的样式外观,仅保留媒体查询结构(带注释)如下显示:

/*
基本(移动)尺寸
这是移动样式。这就是人们在手机上看到的内容。
要保持清醒:速度很重要。
*/

/*
更大的移动设备
这适用于屏幕较大的移动设备。
*/
@media only screen and (min-width: 481px) {
}

/*
平板电脑和小型笔记本电脑
这些内容的查看窗口和首选媒体查询为768像素。
*/
@media only screen and (min-width: 920px) {
}

/*
桌面终端
台式机,笔记本电脑和任何不在移动设备上查看的人。
*/
@media only screen and (min-width: 1030px) {
}

/*
超大的可视尺寸
这适用于较大的显示器以及可能的全屏查看器
*/
@media only screen and (min-width: 1240px) {
}

/*
视网膜(2x分辨率的设备)
这适用于视网膜iPhone(4s)和iPad(2,3)以及
其他分辨率为2倍的显示器。
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/*
iPHONE 5终端
iPhone 5或iPod Touch第5代样式(如果需要,可以包含自己的文件)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}

/*
打印样式表
*/
@media print {
}

如上述代码开始时没有媒体查询,在样式表开头定义的样式不仅将服务于最小的移动设备,而且还将实际服务于所有设备,这是一个非常重要的概念,只有当你完全掌握才能够做好移动响应式设计。

让我们在浏览器中打开index.html,然后将浏览器窗口的大小调整为大概320像素宽。要检查宽度你可以激活谷歌浏览器开发者工具(在谷歌浏览器中按F12键)。

让我们选择3个元素:

  • 标识
  • 导航栏
  • Hero版块

查看并调整浏览器窗口大小时会发生什么。当窗口较大时,标识将向左浮动,而当窗口(虚拟屏幕)变小时, 标识将居中。导航栏将在较小的屏幕上变成切换菜单。Hero版块将具有相同的颜色和边框,文本看起来相同,但是当屏幕变小时,Flexslider将消失。

这些转换如何在CSS中反映

标识样式从一开始就声明:#banner {text-align:center; },然后在[email protected]查询中添加更多属性,同时将文本对齐方式更改为左:#banner {float:left; text-align:left; margin-bottom:0px;}

菜单切换样式位于表格开头,它们与导航栏样式有很大不同,导航栏样式仅出现在 [email protected]查询中。当然用于切换菜单的声明比导航栏要短得多,因为在小屏幕上我们不需要下拉菜单。

Hero版块样式也很快出现在CSS文件的顶部,Flexslider显示设置为无。Hero版块区域样式如何仅在顶部声明一次,而在任何媒体查询中不重复。这是因为Hero版块在任何大小的屏幕上都应该看起来相同。另一方面当屏幕宽度达到920像素时,Flexslider将出现。你会发现.flexslider {display:block; […]}和[email protected]查询中的许多主题样式。注意大多数滑块样式都存在于单独的文件中,对于初学者级的Web设计人员来说更容易处理。

HTML响应式Simple网站项目媒体查询有以下断点:481px / 920px / 1030px / 1240px / Retina显示器/ iPhone5 /打印。如果要填充它们或将它们留空,则取决于你。另外你当然可以将宽度断点更改为你喜欢的任何值,你还可以更改元素在较小屏幕上的显示和消失方式。例如如果你希望在任何尺寸的屏幕上都可以看到Flexslider,请从样式表的开头删除.flexslider {display:none;},并将Flexslider样式从[email protected]查询移到顶部。

字体、颜色等有趣的东西

在浏览器中打开colorblocks.html并将其与index.html进行比较,主题颜色,字体和布局存在一些差异,我们将从字体开始。

更改字体

在index.html的<head></head>部分中找到以下代码行:<link href=’http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu’ rel=’stylesheet’ type=’text/css’>。这是Google Web Fonts CDN的样式表在“系列”之后,有字体的名称,这些字体在我们构建网站所用的基本主题中都会使用。字体有Droid Serif和Ubuntu。Ubuntu用于正文,Droid Serif用于标题。现在我们将Droid Serif用于正文,将Oswald字体用作标题。转到http://www.google.com/fonts,然后在搜索输入框输入Oswald。获得字体后,单击添加到收藏按钮。然后搜索Droid Serif并添加它,现在屏幕右下角有3个按钮:选择,查看,使用。单击使用,选中Oswald的300和400复选框(即字体粗细),对于Droid Serif选中400、700和700斜体。现在,在3.将此代码添加到你的网站:你将拥有一个新生成的链接,该链接反映了你的选择。复制并粘贴而不是旧的链接。现在网页的头部将具有以下代码行:<link href=’http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Oswald:400,300′ rel=’stylesheet’ type=’text/css’ >。最后进入CSS文件并将主体字体更改为Droid Serif。同样将h1-h6字体更改为Oswald,将font-weight更改为400。刷新index.html以检查更新是否正常工作。

修改颜色

让我们从顶部开始,颜色更改的第一个元素(在CSS中)是导航栏/切换菜单。在basic-style.css中我们具有#0099ff蓝色顶层链接,:hover状态和当前项具有#0099ff蓝色背景。我们将顶级链接颜色更改为深灰色,将背景更改为#5ec79e绿色。

在basic-style.css中的/ *MAIN MENU * /注释后找到一组声明,找到.srt-menu li a {[…]}并添加以下行:color:#666;。现在链接为深灰色,而不是像所有其它站点链接一样为蓝色。现在让我们更改所有背景,带有蓝色背景的第一个元素是处于ON状态的菜单切换按钮。找到.menu-toggle.toggled-on {background:#0099ff;},然后将背景十六进制值更改为#5ec79e,然后继续阅读并更改每次出现的背景:#0099ff;进入背景:#5ec79e;。

我们将要更新的下一个元素是号召性按钮,位于hero版块的文字下面。现在它们在正常状态下为蓝色,在悬停状态下为草绿色。我们将在悬停时将它们更改为新的绿色和紫色。在/颜色和背景 /部分中找到一个.buttonlink并进行熟悉的背景交换。然后在a.buttonlink:hover{background:#8dbc01;}中将背景十六进制值更改为#887dc2。

添加彩色背景

如果在浏览器中查看colorblocks.html,你将看到两个大的区域,分别具有绿色和紫色背景。具有这些背景的节的类为.greenelement和.violetelement,让我们在CSS的部分中声明这些类:

.greenelement{
background:#5ec79e;
color:#fff;
}
.violetelement{
background:#887dc2;
color:#fff;
}

现在我们将新类应用于index.html部分,在#main div结束标记(</div><!– #end div #main .wrapper –>)之后添加新的文本。在新部分中添加.greenelement类和.clearfix类(防止背景溢出到不应该出现的地方)。检查浏览器中的外观,绿色部分出现在页脚上方。但是与clolorblocks.html不同,它里面的文本被粘贴到屏幕的左边缘也没有填充。现在所有内容看起来都很好,被填充并居中。如果要在绿色部分下面放置一个紫色部分,请复制/粘贴下面的绿色部分,然后将.greenelement类更改为.violetelement。

进行了这些更改之后,所有内部页面都可以使用,更改也适用于它们。你可能要做的最后一件事是删除Flexslider白色边框,但是现在你应该可以自己完成所有操作:)

转载请注明:林雍岷 » 11. html响应式布局