最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】给公司主页中添加产品特点和产品介绍

HTML crifan 374浏览 0评论

之前的主页是参考别的Html5的单页面模板:

https://onepagelove.com/mate

去修改而得到的:

现在需要在里面添加 产品介绍

类似于:

所以要去找到对应的有这种内容的模板,再去参考

去找找,可以用得上的:

https://onepagelove.com/avilon

-》

https://demos.onepagelove.com/html/avilon/

自己正在用的就是这个:

http://preview.uideck.com/items/mate/

中的:

https://onepagelove.com/comply

-》

https://demos.onepagelove.com/html/comply/

https://demos.onepagelove.com/html/pblaw/#section-contact

最后是,参考了:

https://demos.onepagelove.com/html/avilon/

https://demos.onepagelove.com/html/comply/

用代码:

html:

<code>
    &lt;!-- Product Section --&gt;
    &lt;section id="product" class="section"&gt;
      &lt;!-- Container Starts --&gt;
      &lt;div class="container"&gt;
        &lt;div class="section-header"&gt;          
          &lt;h2 class="section-title"&gt;我们的产品:NaturLing儿童教育机器人&lt;/h2&gt;
          &lt;hr class="lines"&gt;

          &lt;div class="row"&gt;
            &lt;div class="col-lg-12 col-md-12 col-xs-12"&gt;
              &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                   &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-rocket"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;高度智能&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-laptop-phone"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;人机对话&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-layers"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;资料丰富&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-cog"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;环境模拟&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-cog"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;操作方便&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- &lt;div class="col-lg-4 col-xs-12"&gt;
              &lt;div class="show-box"&gt;
                &lt;img class="img-fulid" src="img/features/feature.png" alt=""&gt;
              &lt;/div&gt;
            &lt;/div&gt; --&gt;
          &lt;/div&gt;
  
          &lt;p class="section-subtitle"&gt;本公司的产品为英语教育机器人。睿小麟崇尚让语言学习回归本源, 通过先进的AI技术,为孩子英语学习创设了最接近ESL语言学习的条件,让孩子不出国门也能全方位地浸泡在英语环境中。课程研发团队通过对绘本、儿歌及教学资料的整理和筛选制作,以孩子生活为中心,创设出丰富有趣的场景对话、趣味问答,让孩子享受听的过程,激发孩子说的能力。此外,课程团队还配合学校的教学,制作课后练习,帮助孩子复习、拓展学校的课本知识,全力满足3-6岁儿童的语言学习需求,更好地帮助孩子和家长搭建一个适合的语言环境,提高学习效率。技术团队负责问答、对话系统的设计与实现,利用自然语言处理技术完成整个框架和细节,使我们的机器人能够较为"聪明"且"智能"地和孩子进行英语沟通。儿童教育专家顾问还对学习内容进行了难度等级划分和关键词定义,精准匹配难度与内容,有效提升用户体验。可见,睿小麟从课程内容到产品设计全方位跟进,只为了能给孩子提供一个最佳的英语学习环境,使幼儿英语学习更为有效、有趣。与传统幼儿英语培训相比,幼儿英语教育机器人可以将孩子在英语环境中的时间比率从1.2%提高到8.5%,有效降低孩子学习英语的经济成本和时间成本。 &lt;/p&gt;
        &lt;/div&gt;

      &lt;/div&gt;
    &lt;/section&gt;
    &lt;!-- Product Section End --&gt;
</code>

css:

css/main.css

<code>
/* ==========================================================================
  6. Product Section Style
   ========================================================================== */
#product {
  background: url(../img/bg1.jpg) fixed no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  position: relative;
}

#product .section-title {
  color: #fff;
}

#product .section-subtitle {
  color: #fff;
}

#product .icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  text-align: center;
  position: relative;
  z-index: 1;
}

#product .box-item {
  padding: 15px 0;
  text-align: center;
  height: 120px;
  margin-top: 10px;
  margin-bottom: 15px;
}

#product .box-item .icon {
  border: 1px solid #61D2B4;
  text-align: center;
  /* float: left; */
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin-bottom: 15px;
}

#product .box-item .icon i {
  color: #61D2B4;
  font-size: 24px;
  line-height: 60px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#product .box-item .text {
  /* padding-left: 80px; */
  margin-bottom: 10px;
}

#product .box-item .text h4 {
  color: #61D2B4;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 22px;
}

#product .box-item .text p {
  font-size: 14px;
  line-height: 26px;
}

#product .box-item:hover .icon {
  background: #61D2B4;
}

#product .box-item:hover .icon i {
  color: #ffffff;
}

#product .show-box img {
  position: absolute;
  bottom: -120px;
}
</code>

经过调试:

实现了基本的效果:

【后记】

需要把后2个图标,变成居中:

再去调试看看:

用:

<code>
          &lt;div class="row"&gt;
            &lt;div class="col-lg-12 col-md-12 col-xs-12"&gt;
              &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                   &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-rocket"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;高度智能&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-laptop-phone"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;人机对话&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-layers"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;资料丰富&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                   &lt;div class="col-lg-6 col-sm-6 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
</code>

                        <i class=”lnr lnr-bubble”></i>

                     </span>

                      <div class=”text”>

                        <h4>环境模拟</h4>

                     </div>

                   </div>

                   <div class=”col-lg-6 col-sm-6 col-xs-12 box-item”>

                      <span class=”icon”>

                        <i class=”lnr lnr-pointer-up”></i>

                     </span>

                      <div class=”text”>

                        <h4>操作方便</h4>

                     </div>

                   </div>

               </div>

              </div>

            </div>

          </div>

  

效果:

但是还是不完美,第二行没有完全居中的那种效果。

最后用:

<code>
          &lt;div class="row"&gt;
            &lt;div class="col-lg-12 col-md-12 col-xs-12"&gt;
              &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                   &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-rocket"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;高度智能&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-laptop-phone"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;人机对话&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-lg-4 col-sm-4 col-xs-12 box-item"&gt;
                      &lt;span class="icon"&gt;
                        &lt;i class="lnr lnr-layers"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;div class="text"&gt;
                        &lt;h4&gt;资料丰富&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                   &lt;div class="col-lg-6 col-sm-6 col-xs-12 box-item"&gt;
                     &lt;span class="icon move-right"&gt;
                        &lt;i class="lnr lnr-bubble"&gt;&lt;/i&gt;
                     &lt;/span&gt;
                     &lt;div class="text move-right"&gt;
                        &lt;h4&gt;环境模拟&lt;/h4&gt;
                     &lt;/div&gt;
                   &lt;/div&gt;
                   &lt;div class="col-lg-6 col-sm-6 col-xs-12 box-item"&gt;
                     &lt;span class="icon move-left"&gt;
                        &lt;i class="lnr lnr-pointer-up"&gt;&lt;/i&gt;
                     &lt;/span&gt;
                     &lt;div class="text move-left"&gt;
                        &lt;h4&gt;操作方便&lt;/h4&gt;
                     &lt;/div&gt;
                   &lt;/div&gt;
               &lt;/div&gt;

              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
</code>

加上css:

<code>
#product .box-item .icon {
  border: 1px solid #61D2B4;
  text-align: center;
  /* float: left; */
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin-bottom: 15px;
}

#product .box-item .move-right {
  margin-left: 32%;
}

#product .box-item .move-left {
  margin-right: 32%;
}
</code>

勉强实现了效果:

缺点是:

移动端会看到偏移:

无意间看到meida的查询语句:

所以再去研究,让上述css只针对大屏幕有效,小屏幕的移动设备无效

然后去试了试:

<code>@media (min-width: 768px) {
  #product .box-item .move-right {
    margin-left: 32%;
  }
  
  #product .box-item .move-left {
    margin-right: 32%;
  }  
}
</code>

达到要的效果了,移动端该段css补气效果,不偏移:

再顺带去查查media的用法

css media

css media教程

CSS媒体查询 – Web开发者指南 | MDN

<code>@media (min-width: 700px) { ... }

(min-width: 700px) and (orientation: landscape) { ... }

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

….
</code>

@media – CSS | MDN

“all

适用于所有设备。

print

为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。

screen

主要适用于彩色的电脑屏幕

speech

解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.可以看以下附录”

<code>@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}
</code>

CSS3 @media查询 | 菜鸟教程

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计 – CSDN博客

@media – CSS @media详解-CSS教程

CSS3 Media Queries_media queries, css3属性详解 教程_w3cplus

<code>  &lt;link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" media="all" /&gt;
  &lt;link href="css/print.css" rel="stylesheet" type="text/css" media="print" /&gt;

</code>

  <style type=”text/css” media=”screen”>

    @import url(“css/style.css”);

  </style>

  <link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css” />

转载请注明:在路上 » 【已解决】给公司主页中添加产品特点和产品介绍

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
56 queries in 0.081 seconds, using 18.61MB memory