钦州网站建设优质供应商

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

发布时间2020-03-28    阅读：219    作者：钦州网站设计开发公司

有无数的移动应用程序在其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开发中确实是一个革命性的时期。如果你有类似的评论或问题的话。教程在下面的讨论区免费与我们分享。


随机推荐
钦州开发网站：如何在HTML5/CSS3中构建移动明细表WebApp 钦州做网站：发展自由市场营销计划
13306647218
QQ客服
胡经理