18868949445

钦州开发网站:如何在HTML5/CSS3中构建移动明细表WebApp

日期:2020-03-28 阅读:233   作者:钦州网站设计开发公司

有无数的移动应用程序在其UI中使用列表视图。Android和iOS都提供平台特定的设计,以使构建应用程序更容易。但是还有另一个模板,可以用典型的HTML5和CSS属性来构建。

在本教程中,我想介绍一种构建干净的HTML5移动Web应用程序的方法。对于下面的演示,我将最大宽度限制在800 px,但理论上可以扩展到任何浏览器的大小。这就是移动Web开发如此有利可图的原因。使用教程代码并从下面的链接下载我的源文件的副本。


开头文件

钦州开发网站开始使用HTML5 DOCTYPE和头部区域中的几个重要标签。X-UA-Compatible视口需要在手机屏幕上正确渲染。retina.js这是视网膜显示器的第三方脚本。

这将自动检测当你使用iPhone或iPad的视网膜支持,并自动拉图像与一致的文件名。例如,我们应该创建一个高分辨率图像名为MY-Houth2x.jpg,然后缩小到标准分辨率命名为我的房子。JPG。这是一个额外的工作,但它的回报,如果你的目标是一个移动观众。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
<!doctype html>
<HTMLlang="en" &#62;
<头部>
  <metahttp-equiv=“内容类型”content="text/html; charset=utf-8" &#62;
  <title>Simple Mobile Listview</title &#62;
  <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1" &#62;
  <meta姓名=“友好”content="true" &#62;
  <meta姓名=“视口”content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" &#62;
  <linkrel=“样式表”type="text/css"href=“样式CSS”>
  <script类型=“文本/ JavaScript”src="http://code.jquery.com/jquery.min.js"></script &#62;
  <script类型=“文本/ JavaScript”src="retina.js"></script &#62;
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script src="http://css3-mediacueres-js.googledcode.com/svn/trunk/css3-mediacueres.js"></script>
<![endif]-->
</头部>

还有我引用的另一个外部脚本CSS3媒体查询这将增加对在IE9之前运行旧浏览器的响应性查询的支持。还有一些不支持的旧版本。@进口这个脚本正确地处理它们。

生成列表视图

现在,在正文部分中,我将使用无序列表来创建标记。另一种解决方案是使用表,但我觉得这些代码中添加了许多不必要的标签。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
<divid="container" &#62;
  <ul &#62;
    <!-- row 01 -->
    <ahref=&#34;Wei&#34;><class="clearfix" &#62;
      <imgSRC=“图片/现代城堡厨房PNG”alt="thumb"=“缩略图”>
      <h2>Full-Room Mansion with Open Kitchen</h2 &#62;
      <p="desc">Rental located in Pheonix, AZ. 2 bedrooms 1.5 baths. </>
      <span=“价格”>$2,650/month</跨度>
    </li></a &#62;
    <!-- row 02 -->
    <ahref=&#34;Wei&#34;><class="clearfix" &#62;
      <imgSRC=“图像/顶楼-与-Bar.png”alt="Modern penthouse bar"=“缩略图”>
      <h2>Modern Penthouse Highrise with Bar</h2 &#62;
      <p="desc">Rental located in New York City, NY. 1 bedroom 1 bath.</>
      <span=“价格”>$1,800/month</跨度>
    </li></a &#62;

因此,在我的例子中,整个列表包含在包装器div中。每个列表项也由没有HREF值的锚链接包住。在任何真正的移动应用程序中,您将链接到可能在一个框架上运行的其他页面,例如移动手机 .

每个内部项目都包含一个略微浮现在左侧的缩略图。SRC属性针对的是标准图像,但是我们的视网膜。JS脚本在视网膜屏幕上被自动替换。

列表视图样式

现在让我们把注意力转移到CSS样式表上。Eric Meyer的畅销文章它几乎覆盖了所有的东西。这个WebApp的一个有趣的部分是固定的导航栏,它沿着页面跟着你。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty
Twenty-one
Twenty-two
Twenty-three
Twenty-four
Twenty-five
Twenty-six
Twenty-seven
Twenty-eight
Twenty-nine
Thirty
Thirty-one
/** top header bar **/
header {
display:block;
position:fixed;
top:0;
z-index:9999;
height:55px;
width:100%;
max-width:800px;
border-bottom:1px固体#262422;
-webkit-box-shadow:Zero2px2PXrgba(Zero,Zero,Zero,Zero point four);
-moz-box-shadow:Zero2px2PXrgba(Zero,Zero,Zero,Zero point four);
box-shadow:Zero2px2PXrgba(Zero,Zero,Zero,Zero point four);
background:#5a5955;
background: -moz-linear-gradient(top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
background: -webkit-gradient(linear,left上衣,左边bottom颜色停止0%,#5a5955颜色停止50%,#51504c颜色停止51%,#494744颜色停止100%,#3f3d3a);
background: -webkit-linear-gradient(top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
background-O-线性梯度top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
background-MS线性梯度top,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
background线性梯度(to)bottom,#5a59550%,5504C50%,#49474451%,3F3D3A100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;5a5955 &#39;, endColorstr=“3F3D3A”,GradientType=Zero);
}
header hOne{
font-size:2.4em;
font-family:Tahoma,Arial,sans-serif;
font-weight:bold;line-height:55px;
text-align:center;
color:#efefef;
text-shadow:1px1PX0px#000;
}

请注意,我实际上使用CSS3渐变来生成顶部工具栏背景。此外,我在边缘添加了一个小阴影,以显示在内容的顶部。位置:固定;Z索引值将始终保持工具栏在滚动时保持不变。


内部容器和列表项也使用一组固定值。高度始终是90px,这样我们的图像不会在两边都浮动得太近。另外,我使用更多的CSS3渐变,从浅灰色到白色。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
#container {显示:;缘顶:55 px; }
#container ul {*空*}
#container ul a li {
  显示:;
  宽度:100%;
  高度:90px;
  边界底部:1PXsolidB9B9B9;
  边界顶部:1PXsolidF7F7F7;
  背景:3500;Ebeb;
  背景图像: -webkit-gradient(linear,0%0%,0%100%, from(\ 35ffffff;) to(3500;Ebeb));
  背景图像: -webkit-linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
  背景图像:    -moz-linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
  背景图像:      -o-linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
  背景图像:         linear-gradient(上衣,\ 35ffffff;,3500;Ebeb);
}

锚链环

构建此ListVIEW的另一个棘手的方面是处理用户悬停样式。因为锚点链接位于整个列表项之外,所以我们必须使用嵌套CSS选择器。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
#container ul a:hover li hTwo{颜色:γ787B1; }
#container ul a:hover li p.desc {颜色:#757575; }
#container ul a:hover li {
background:#efefef;
background-image: -webkit-gradient(linear,0%0%,0%100%,从(#ffffff#efefef);
background-image: -webkit-linear-gradient(top,#ffffff,#efefef);
background-image:    -moz-linear-gradient(top,#ffffff,#efefef);
background-image-O-线性梯度top,#ffffff,#efefef);
background-image线性梯度(线性梯度)top,#ffffff,#efefef);
}

你可以添加很多选项来创建一个惊人的悬停效果。当你在移动设备上悬停或点击一个行时,我正在更新一些文本颜色,以更加明亮地闪亮。背景梯度也会变得更亮,并且比其他行更突出。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
#container ul li img.thumbnail {
  背景:γ-FFF;
  显示: inline-;
  浮动:左边;
  衬垫:2PX;
  缘顶:6PX;
  左边余量:5PX;
  保证金权:8PX;
  -webkit-box-shadow:01PX2pxrgba(0,0,0,0.25);
  -moz-box-shadow:01PX2pxrgba(0,0,0,0.25);
  盒影:01PX2pxrgba(0,0,0,0.25);
}

图像缩略图有一个与背景渐变分开的软边框,轻微的阴影也会使页面效果看起来很好。

简单响应查询


由于布局是用流体宽度来构建的,所以我们不需要对更小的屏幕进行更多的更新,但是添加这个微小的响应设计层有助于保持所有页面元素的适应性。

?
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
/** basic media queries **/
@media only屏幕and (最大宽度:480PX) {
  容器容器2{font-size:1.75em;}
  容器容器UL Li img缩略图{margin-top:2px;}
}
@media only屏幕and (最大宽度:30px) {
  #container ul li p.desc {display:none;}
}

首先,当屏幕达到480px或更小的宽度时,列表标题缩小了一点字体大小。我们想在没有太多屏幕属性的移动平台上节省空间。图像缩略图也向上移动了一点。这与抵消屏幕更小的文本高度相比,屏幕更紧凑。

最后,如果你在肖像模式下运行一个移动设备,那么我们希望完全删除描述线。这些是很好的,但最终不必要的接口。显然,你也可以感觉到舒适地编辑在你自己的响应风格。


结论

钦州开发网站刚开始使用Web开发的初学者应该能够很快跟上。这些技术并不是什么新鲜事,但它们在移动设备上非常出色地结合在一起。你可以在手机浏览器上找到我们的现场演示,看看它是如何对肖像/风景模式做出反应的。

总的来说,如果你对响应性网页设计感兴趣,这些都是很好的技术。Mobile WebApp不像厂商专用的App Store那么常见。但是这些移动应用程序可以在世界上任何有因特网接入的人使用。在移动Web开发中确实是一个革命性的时期。如果你有类似的评论或问题的话。教程在下面的讨论区免费与我们分享。