html5单个分享页面编辑_HTML5教程：如何构建单个产品页面

最新推荐文章于 2021-06-03 03:08:34 发布

cune1359

最新推荐文章于 2021-06-03 03:08:34 发布

阅读量326

点赞数

文章标签： css html javascript java js ViewUI

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

在本文中，我们将进行一个虚构的项目，创建一个提供iPhone 4S的产品页面，并且在该项目中，我们还将实现前面文章中讨论的方法。 <details>元素和否定选择器。

让我们开始吧。

HTML5标记

首先，我们需要使用以下标记创建一个html文档：

<div class="product">

  <header>
    <hgroup>
      <h1>Apple iPhone 4 - 16GB</h1>
      <h4>The most amazing iPhone yet.</h4>
    </hgroup>
  </header>

  <figure>
    <img src="https://assets.hongkiat.com/uploads/html5-single-product-page/iphone4s-3d.png">
  </figure>

  <section>

  <p>The faster dual-core A5 chip. The 8MP camera with all-new optics also shoots 1080p HD video. And introducing Siri. It's the most amazing iPhone yet.</p>

  <details>
   <summary>Product Features</summary>
      <ul>
        <li>8 mega pixel camera with full 1080p video recording</li>
        <li>Siri voice assitant</li>
        <li>iCloud</li>
        <li>Air Print</li>
        <li>Retina display</li>
        <li>Photo and video geotagging</li>
      </ul>
  </details>

  <button>Buy Now</button>

  </section>

</div>

我们使用HTML5规范中的几个新标签，例如header ， hgroup ， figure ， section和我们之前讨论过的标签； details和summary标签。

但是，我们不会深入研究这些标签，不是因为我们不愿意这样做，而是这些是您可以在其他地方轻松找到的基本主题。因此，如果您真的不熟悉HTML5，建议您阅读以下有关这些标记的参考资料；他们已经全面解释了它们：

现在，让我们看看我们页面的初次出现。

好吧，它看起来很明智，没有任何样式。最顶部是标题，然后是图像，说明部分，最后是“立即购买”按钮。现在，让我们振作起来。

风格

我们将从使用此样式表标准化所有默认样式开始，然后向html标签添加渐变背景。

html {
  height: 100%;
  background: #f3f3f3;
  background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(50%,#ffffff));
  background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
  background: -o-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
  background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
  background: linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );
}

请记住，我们的产品元素都与产品类一起包装在div 。因此，在这里我们想将包装器居中，并将宽度设置为大约650px 。

.wrapper {
  width: 650px;
  margin: auto;
  padding: 25px 0px;
}

标头部分

在标题部分中，我们有两个标题h1和h4 ，因此让我们设置这些元素的样式。

h1, h4 {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: normal;
  margin: 0; 
}
h1 { 
  font-size: 24pt;
}
h4 {
  font-size: 16pt;
  color: #aaa; 
}

然后在header底部添加一点空白。

header {
  margin-bottom: 20px;
}

如果您看一下标题的最右边，那边会有很多空白。

那么为什么不将Apple标志也放在那里呢？

header {
  margin-bottom: 20px;
  background: url('../https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repeat right center; 
}

产品图片

接下来，将图像浮动到左侧，并将图像最大宽度设置为350px 。

figure {
  float: left;
}
figure img {
  max-width: 350px;
}

由于图像已被推到左侧，因此我们将描述部分浮动到右侧，并将宽度设置为300px 。

section {
  font-family: Tahoma, Arial, sans-serif;
  line-height: 150%;
  float: right;
  width: 300px;
  color: #333;
}

现在，让我们看看到目前为止的结果。

它开始看起来不错，但是details标签仍然不起作用（Chrome中除外），因此，让我们接下来设置按钮的样式。

按钮

对于按钮样式，我们将模仿Apple.com商店中的按钮样式。这是您需要在按钮的样式表中放入的所有语法。

button {
  background: #36a9ea;
  background: -moz-linear-gradient(top, #36a9ea 0%, #127fd2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36a9ea), color-stop(100%,#127fd2));
  background: -webkit-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
  background: -o-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
  background: -ms-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
  background: linear-gradient(top, #36a9ea 0%,#127fd2 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#36a9ea', endColorstr='#127fd2',GradientType=0 );
  border: 1px solid #00599d;
  color: #fff;
  padding: 8px 20px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(250, 250, 250, .3);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(250, 250, 250, .3);
  text-shadow: 0px 1px 1px #156cc4;
  filter: dropshadow(color=#156cc4, offx=0, offy=1);
  font-size: 10pt; 
}

button:hover {
  background: #2f90d5;
  background: -moz-linear-gradient(top, #2f90d5 0%, #0351b7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f90d5), color-stop(100%,#0351b7));
  background: -webkit-linear-gradient(top, #2f90d5 0%,#0351b7 100%);
  background: -o-linear-gradient(top, #2f90d5 0%,#0351b7 100%);
  background: -ms-linear-gradient(top, #2f90d5 0%,#0351b7 100%);
  background: linear-gradient(top, #2f90d5 0%,#0351b7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2f90d5', endColorstr='#0351b7',GradientType=0 );
}

button:active {
  background: #127fd2;
  -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, .5), 0px 1px 1px 0px rgba(0, 0, 0, 0);
  box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, .5), 0px 1px 1px 0px rgba(0, 0, 0, 0); 
}

现在按钮应该看起来更好了。

Internet Explorer中的问题

像往常一样，IE（Internet Explorer）总是会引起一些麻烦。如果您在任何低于9的IE中打开此页面，则该页面将保持未样式化。

这是因为Internet Explorer无法识别新元素（ section ， header等），因此我们指定的样式无法应用。因此，在下一步中，我们将致力于解决这个问题。

测试浏览器支持

在我们之前的文章中，我们使用了这种polyfill解决了浏览器对details元素的支持。使其可以在不受支持的浏览器中使用。但是，这一次，我们将尝试使用Modernizr进行不同的操作。

在其官方网站上， “ Modernizr是一个开源JavaScript库，可帮助您构建下一代基于HTML5和CSS3的网站” 。从技术上讲，Modernizr将测试浏览器对某些新元素和功能的支持。如果没有提供支持，那么我们必须通过提供不同的样式或提供polyfills来提供备用。在这种情况下，我们将使用Modernizr帮助我们测试详细信息和摘要元素。

转到Modernizr并转到其下载页面。
在下载页面中，Modernizr提供了一些用于配置库的选项，因此您只需要选择网站确实需要的某些功能。在这种情况下，我们需要：
- HTML5Shiv 3.4
- 添加CSS类后，此功能将自动在html标签中插入类。
- Modernizr.load
- 转到社区加载项框并选择elem-details，
- 在“可扩展性”部分中，选择“ Modernizr.addTest”。
生成并下载文件。
将其链接到您的html，然后在Internet Explorer中重新加载页面。由于Internet Explorer现在可以识别标签，因此页面的样式现在应该已设置样式。

并且，如果您查看source或inspect元素，您会发现no-details类已插入html标记中；指示我们正在预览页面的浏览器；当前不支持详细信息元素。 @@@@ [我听不懂这句话。 ]

然后，我们可以使用此类作为钩子来创建后备，我们将在下一步中进行此操作。

后备

在此步骤中，我们将为其他浏览器（Chrome浏览器除外）提供类似的details元素功能。在上一篇文章中，此步骤是使用此脚本自动完成的，但是这次我们将自行创建它。

注意：只需回顾一下我们以前的帖子即可；目前仅在Chrome浏览器中支持details元素。

因此，让我们首先开始研究CSS。

在摘要标签上，我们将其光标模式更改为指针，因此用户将注意到它是可单击的。

summary {
  cursor: pointer;
  font-size: 12pt;
  outline: 0; 
}

在details元素的顶部和底部留出更多的空白。

details { 
  margin: 20px 0px;
}

默认情况下，摘要标记将带有箭头。但是在这里我们想用加减图标代替它。

让我们添加一个before伪元素，并将图标附加为背景。请注意，此时，背景位置在顶部，将显示加号图标。

details > summary:before {
  width: 16px;
  height: 16px;
  display: inline-block;
  content: '' !important;
  background: url('../https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat center top;
  margin-right: 5px;
  position: relative;
  top: 2px; 
}

然后，当details元素打开时，背景位置将移至底部，并显示减号图标。

details[open] > summary:before,
details.open > summary:before {
  background: url('../https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat center bottom;
}

[open]符号是一个选择器。在这种情况下，它将在支持的浏览器中选择详细信息打开属性。

最后，我们应该隐藏默认情况下在Chrome中显示的箭头。

details > summary::-webkit-details-marker { 
  display: none;
}

然后，让我们在浏览器中查看结果一段时间。

现在，默认箭头已替换为我们的图标，如果您在Chrome浏览器中看到它，则单击它时已经具有切换效果；图标将相应更改。但是，在其他浏览器中，什么也不会发生。因此，在下一步中，我们将尝试使用jQuery复制效果。

jQuery的切换效果

在开始jQuery部分之前，我要感谢Ian Devlin的启发，下面的脚本实际上是对其的稍微修改。

好吧，让我们创建一个变量来存储summary标记。

var summary = $('details summary');

然后我们用div包装摘要的所有同级元素。

summary.siblings().wrapAll('<div></div>');

当details元素没有开放类时，隐藏该div。

$('details:not(.open) summary').siblings('div').hide();

单击摘要时，我们希望显示隐藏的div，相反，当div最初打开时，它将被隐藏。

summary.click(function() {
  $(this).siblings('div').toggle();
  $('details').toggleClass('open');
});

为了确保这些功能仅在不受支持的浏览器中执行，我们将它们包装在此条件语句中。

if($('html').hasClass('no-details')) {
  //the code goes here
}

下面是我们拥有的代码：

if ($('html').hasClass('no-details')) {
        
var summary = $('details summary');

summary.siblings().wrapAll('<div class="slide"></div>');

$('details:not(.open) summary').siblings('div').hide();

summary.click(function() { 
  $(this).siblings('div').toggle();
          $('details').toggleClass('open');
    });
}

现在，让我们在浏览器中对其进行测试；我亲自检查过（直到Internet Explorer 7），切换效果现在应该在所有浏览器上都有效。

提示：或者，您可以使用.toggle()更改.slideToggle()来创建幻灯片效果。另外，如果您希望最初打开细节，则可以在details元素中添加一个打开的类。

结论

我们已经完成了使用HTML5创建单个产品页面，调试不受支持的浏览器以及自行复制detail元素的切换效果的所有步骤，希望您可以从中学到很多。

但是，我知道我没有在本文中详细解释所有内容，因此，如果您想清除一些内容，请随时在下面的评论框中发布问题。

翻译自: https://www.hongkiat.com/blog/html5-single-product-page/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5单个分享页面编辑_HTML5教程：如何构建单个产品页面

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。单击此处查看同一系列的更多文章。在本文中，我们将进行一个虚构的项目，创建一个提供iPhone 4S的产品页面，并且在该项目中，我们还将实现前面文章中讨论的方法。 <details>元素和否定选择器。让我们开始吧。 HTML5标记首先，我们需要使用以下标...
复制链接

扫一扫