中科锐项目总结

最新推荐文章于 2021-09-16 21:26:03 发布

YangtzeX

最新推荐文章于 2021-09-16 21:26:03 发布

阅读量267

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/YangtzeX/article/details/96428027

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

中科锐项目总结 (2019.7.1-2019.7.15)

出现的bug

在pc端使用栅格布局(row 盒子里的div自带左右内边距15px;每个项目之左右喝中间间距要相等,使用col-xs-6 时,左右间距都为15px,但是中间并没有做合并处理,中间间距就为30px,这也是主要解决这个问题),移动端为了让每个项目之间的间距相等,需要在移动端使用flex布局,使用flex布局在对齐时出现bug: 使用主轴方向间距相等的对齐方式后第一行和第二行的未对齐

出现的bug如下:

使用主轴方向间距相等的对齐方式后第一行和第二行的未对齐

要达到的效果:

在这里插入图片描述

出现bug的原因:

使用栅格布局后,row自带伪类before元素,在使用flex布局换行和间距相等对齐方式时,换行的时候,第一行和第二行前面就不能对齐了

解决办法:去掉row自带的before伪类

代码实现(基于bootstrap框架,此处只给出移动端的样式代码)

<style>
	 @media (max-width: 767px) {
	   .product-list .row {
	     display: flex;
	     flex-wrap: wrap;
	     justify-content: space-evenly;     /* 项目之间的 间距相等 */    
	     margin: 0; /* row自带左右外边距 -15px ,此处要去掉*/
	   }
	   .product-list .row:after {  /* 如果最后一行只有一个,让最后一个元素左对齐 */
	     content: '';
	     width: 45%;
	   }
	   .product-list .row:before { /* 除去此伪类元素,让第二行在换行后,第一行和第二行对齐 */
	     content: none;        
	   }
	   .product-list .row>div {
	     width: 45%; /*给一个宽度让每个盒子大小一样 */
		/* 移动端为什么不用栅格布局,因为客户要求 每个项目之左右喝中间间距要相等,使用col-xs-6 时,左右间距都为15px,但是中间并没有做合并处理,中间间距就为30px,这也是主要解决这个问题 ,所以这里要去掉内边距,使用宽度百分比让每个项目大小相同,来自己控制间距*/
		 padding: 0; /* 去掉自带的左右内边距15px, */ 
	   }
	   .product-list .row>div a{
	     margin-bottom: 8%; /* 让项目的上下间距和左右间距一样 */
	   }
	 }
 </style>
    
<div class="product-list">
      <div class="container-fluid">
        <div class="product-list-box">
          
          <!-- 产品数量-start -->
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 ">
              <a href="./product_details.html" class="product-item">
                <div class="product-item-img">
                  <img src="./images/product_list/product_list1.png" alt="">
                </div>
                <div class="product-item-text">
                  <h2 class="product-title">PR600</h2>
                  <p class="product-subhead">Trail riding/Road cycling/bike travel</p>
                  <p class="product-describe">Simulation design to automotive high beam and low beam; Wireless switch; Run time display; Run time extension; USB output function.</p>
                </div>
              </a>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-6 ">
              <a href="./product_details.html" class="product-item">
                <div class="product-item-img">
                  <img src="./images/product_list/product_list2.png" alt="">
                </div>
                <div class="product-item-text">
                  <h2 class="product-title">PR800</h2>
                  <p class="product-subhead">Trail riding/Road cycling/bike travel</p>
                  <p class="product-describe">Simulation design to automotive high beam and low beam; Wireless switch; Run time display; Run time extension; USB output function.</p>
                </div>
              </a>
            </div>

           

          </div>
          <!-- 产品数量-end -->

        </div>
      </div>
    </div>

一.页面结构:

1. images下存放图片、css文件、JS文件;

2. 所有页面的头部和尾部共用,要求每个页面的头部和尾部必须一致;

3. 个别页面需要单独添加的js和css放在单独的js和css文件中或者写在body后面,不能写在头部和尾部共用部分里;

4. 除公用部分为,页面剩余的内容需要用一个div包住,以便后台管理操作;

5. 页面每个单独的内容需要用div包住

6. 使用轮播图插件时,不能改变原有样式,需要改动的地方要单独创建盒子;

			附加轮播图插件 : https://www.swiper.com.cn/

7. 动态生成的内容,如果含有图片,需要给图片设置尺寸;

8. 图片超过300kb的需要处理压缩,图片过大会影响网页加载速度;

			附加线上压缩软件:  https://tinypng.com

9. 页面使用到iconfont图标的 i标签自动转换成em标签,icon图标失效，（直接使用em标签代替i标签，快速解决方法，在总样式修改i标签样式为em标签，html代码不动因为自动转换i自动转换成em，所有省去修改所有的i标签）em标签原封不动（注意：em标签自带斜体，需清除）span、b吃掉,出现文字遗留的情况（解决方法，试用其他标签代替span标签）有关键字的情况下，模板自动添加a标签，添加样式，且另起一行（解决方法，添加display：contents，修改样式）;后台建议直接使用img标签(此操作是基于米拓后台)

10. * 上传到ftp时一定要看好路径 *

11. 页面中需要添加 Facebook 等分享功能的插件: 由于是国外链接,需要在火狐浏览器上添加插件: https://blog.azurezeng.com/recaptcha-use-in-china/ (这个链接是添加方法)

插件名称: addthis

11. 日历插件: http://www.jq22.com/yanshi18858

12. PC端和移动端二级导航代码: (需要引入bootstrap相关的css和js文件,jquery文件;可直接去官网下载)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 移动端导航栏的图标-->
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1269926_25xgfyfjowq.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>导航栏</title>
  <style>
    * {
      box-sizing: border-box;
    }
    ul {
      list-style: none;
    }
    a {
      text-decoration: none;
      color: #000;
    }
    body.modal-open {
      position: fixed;
      width: 100%;
    }
    /* pc端导航栏-start */
    .pc-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      z-index: 99;
    }
    .pc-nav-box {
      max-width: 1320px;
      margin: 0 auto;
      height: 70px;
      display: flex;
    }
    .pc-nav.check {
      position: fixed;
      background: #fff;
      transition: all .4s ease;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
    }
    .pc-nav-logo {
      float: left;
      margin-left: 15px;
      height: 100%;
    }
    .pc-nav-logo a {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .pc-nav-logo img {
      vertical-align: middle;
    }
    .pc-nav-navbar {
      float: right;
      height: 100%;
      flex: 1;
      margin-left: 700px;
      margin-right: 15px;
    }
    .pc-nav-navbar>ul {
      display: flex;
      height: 100%;
      flex: 1;
    }
    .pc-nav-navbar>ul>li {
      height: 100%;
      flex: 1;
      position: relative;
    }
    .pc-nav-navbar>ul>li a:hover {
      color: #F97E05;
    }
    .pc-nav.check .pc-nav-navbar a:hover {
      color: #F97E05;
    }
    .pc-nav.check .pc-nav-navbar ul ul {
      background-color: #fff;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
    }
    .pc-nav-navbar>ul ul {
      background: rgba(0,0,0,.5);
      padding: 0;
    }
    .pc-nav-navbar>ul ul a {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
    .pc-nav-navbar .active:after {
      width: 40%;
    }
    .pc-nav-navbar a {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      line-height: 70px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
    .pc-nav.check .pc-nav-navbar a {
      color: #000;
    }
    .pc-nav-navbar a:after {
      content: '';
      width: 0;
      height: 2px;
      background: #fff;
      position: absolute;
      bottom: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: rotateX(-50%);
      -ms-transform: rotateX(-50%);
      -o-transform: rotateX(-50%);
      transform: translateX(-50%);
      transition: all .3s ease;
    }
    .pc-nav.check .pc-nav-navbar>ul>li>a::after {
      background: #000;
    }
    .pc-nav-navbar>ul>li>a:hover:after {
      width: 50%;
    }
    .pc-nav-navbar>ul>li>ul {
      display: none;
    }
    @media (max-width: 1600px){
      .pc-nav-navbar{
        margin-left: 400px;
      }
    }
    @media (max-width: 1500px){
      .pc-nav-navbar{
        margin-left: 300px;
      }
    }
    @media (max-width: 1200px){
      .pc-nav-navbar{
        margin-left: 100px;
      }
      .pc-nav-navbar a:hover:after{
        width: 80%;
      }
    }
    .logo-gray{
      display: none;
    }
    /* pc端导航栏-end */

    /* 移动端导航栏-start */
    .mobile-nav{
      position: fixed;
      top:0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #fff;
      padding: 0 25px;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 2px -3px rgba(0,0,0,0.6);
    }
    .menu-button{
      width: 50px;
      height: 100%;
      line-height: 70px;
      text-align: right;
    }
    .menu-button i{
      font-size: 35px;
    }
    .menu{
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 10000;
      background: rgba(0,0,0,0.5);
      transition: all 0.3s;
      transform: translateX(100%);
    }
    .menu-box{
      transform: translateX(0);
    }
    .menu-list{
      width: 70%;
      height: 100%;
      background: #fff;
      float: right;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 100001;
      overflow: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .menu-list-top{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .menu-list-a{
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-top: 20px;
      padding:15px 15px;

    }
    .menu-list-a a,
    .menu-list-text span{
      display: block; 
      color: #000;
      font-size: 16px;
      /* border-bottom: 1px solid #dcdcdc; */
    }
    .menu-list-ul {
      display: none;
      padding-left: 15px;
    } 
    .menu-list-ul a {
      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      color: rgba(0, 0, 0, 0.7);
    }
    .menu-list-icon i {
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
    }
    .mobile-logo{
      line-height: 50px;
      margin-left: 15px;
    }
    .mobile-logo img{
      width: 100%;
    }
    /* 二级导航栏-start */
    .menu-list-icon {
      transition: all .3s;
    }
    .rotate {
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    .menu-list-item {
      width: 100%;
      /* line-height: 40px; */
    }
    .menu-list-text {
      display: flex;
      justify-content: space-between;
    }
    /* 二级导航栏-end */

    /* 移动端导航栏-end */

  /* 移动端导航栏-end */
  </style>
</head>
<body>
  <div style="overflow: hidden">
    <!-- PC端导航栏-start -->
    <div class="pc-nav hidden-sm hidden-xs">  
      <div class="pc-nav-box">
        
        <div class="pc-nav-logo">
          <a href="">
            <img src="./images/ptaxi_logo.png" alt="" class="logo-white">
            <img src="http://ptaxi.net/upload/201812/1545386957.png" alt="" class="logo-gray">
          </a>
        </div>

        <div class="pc-nav-navbar">
          <ul>
            <li><a href="">首页</a></li>
            
            <li class="present">
              <a href="">产品</a>
              <ul>
                <li><a href="">产品一</a></li>
                <li><a href="">产品二</a></li>
                <li><a href="">产品三</a></li>
              </ul>
            </li>

            <li class="present">
              <a href="">荣誉</a>
              <ul>
                <li><a href="">荣誉一</a></li>
                <li><a href="">荣誉二</a></li>
                <li><a href="">荣誉三</a></li>
                <li><a href="">荣誉四</a></li>
                <li><a href="">荣誉五</a></li>
              </ul>
            </li>

            <li class="present">
              <a href="">合作伙伴</a>
              <ul>
                <li><a href=""></a></li>
              </ul>
            </li>

            <li class="present">
              <a href="">关于我们</a>
              <ul>
                <li><a href="">关于我们一</a></li>
                <li><a href="">关于我们二</a></li>
                <li><a href="">关于我们三</a></li>
                <li><a href="">关于我们四</a></li>
              </ul>
            </li>

            <li class="present">
              <a href="">联系我们</a>
              <ul>
                <li><a href=""></a></li>
              </ul>
            </li>

          </ul>
        </div>
      </div>  
    </div>
    <!-- PC端导航栏-end -->
    
    <!-- 移动端导航栏-start -->
    <div class="mobile-nav hidden-lg hidden-md">
        <a href="#">
          <img src="images/home/logo.png" alt="">
        </a>
        <div class="menu-button">
          <i class="iconfont icon-daohang"></i>
        </div>
    </div>
    <div class="menu hidden-lg hidden-md">
      <div class="menu-list">
        <div class="menu-list-top">
          <div class="mobile-logo">
            <img src="./images/home/logo.png" alt="">
          </div>
        </div>

        <div class="menu-list-a">
          <div class="menu-list-item">
            <a title="Home" href="./index.html">Home</a>
          </div>

          <div class="menu-list-item">
            <div class="menu-list-text">
              <span>Product</span>
              <div class="menu-list-icon rotate">
                <i class="iconfont icon-xiala"></i>
              </div>
            </div>
            <div class="menu-list-ul">
              <a href="./product_list.html">Front Light</a>
              <a href="./product_list_taillight.html">Rear Light</a> 
              <a href="./product_list1.html">Light Set</a> 
              <a href="">Accessory</a> 
            </div>
            
          </div>

          <div class="menu-list-item">
            <div class="menu-list-text">
              <span>Support</span>
              <div class="menu-list-icon rotate">
                <i class="iconfont icon-xiala"></i>
              </div>
            </div>
            <div class="menu-list-ul">
              <a href="">Product warranty</a>
              <a href="./product_registration.html">Product Registrantion</a>
              <a href="./download.html">Download</a>
              <a href="./privacy_policy.html">Privacy Policy</a>
            </div>
            
          </div>
          
          <div class="menu-list-item">
            <div class="menu-list-text">
              <span>About</span>
              <div class="menu-list-icon rotate">
                <i class="iconfont icon-xiala"></i>
              </div>
            </div>
            <div class="menu-list-ul">
              <a href="./about.html">Our Story</a>
              <a href="./technical_centre.html">Tech Center</a>
            </div>
            
          </div>
          
          <div class="menu-list-item">
            <a title="Contact" href="./contact.html">Contact</a>
          </div>
          
          <div class="menu-list-item">
            <a title="Chinese" href="" class="chinese">中文</a>
          </div>
        </div>

      </div>
      <div class="menu-mask"></div>
    </div>
    <!-- 移动端导航栏-end -->

    <!-- 为了让pc端导航栏显示效果随便添加的内容 -->
    <img src="./images/home/banner.png" alt="" style="width: 100%">
    <!-- 为了让pc端导航栏显示效果随便添加的内容 -->
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>
    $(function() {
      var  PCnav=$('.pc-nav'); 
      if(PCnav.hasClass('check')){ // 导航栏切换颜色
          $('.pc-nav').removeClass('check');
      }
      $(window).scroll(function(){
        var this_scrollTop = $(this).scrollTop();
        if(this_scrollTop>1){
          $('.pc-nav').addClass('check');
          $('.logo-white').hide();
          $('.logo-gray').show();
        }else if(this_scrollTop===0 && $('.pc-nav').hasClass('check')){
          $('.pc-nav').removeClass('check');
          $('.logo-gray').hide();
          $('.logo-white').show();
        }
      })

      $('.pc-nav-navbar .present').hover(function() { // 导航栏显示
        $('ul', this).stop(true,true).slideDown(200);
      }, function() {
        $('ul', this).stop(true,true).slideUp(200); 
      });
      
      // 移动端导航栏
      //移动端点击button时,弹出移动端导航栏界面
      $('.menu-button').click(function(event){
        $('.menu').addClass('menu-box');
        $("html,body").css({"overflow":"hidden"});
        $('.menu-mask').bind("touchmove",function(e){
          e.preventDefault(); //阻止元素发生默认的行为
        });
      })
      //在弹出界面中操作时不影响被覆盖的页面内容,使其独立
      $('.menu-list').click(function(){
        event.stopPropagation(); 
      })
      //当点击button弹出界面时,再次点击隐藏界面
      $('.menu').click(function(event){
        $(this).removeClass('menu-box');
        $("html,body").css({"overflow":"auto","height":"auto"});  
      })
      // 移动端二级导航栏效果
      $('.menu-list-text').click(function () {
        $(this).find('.menu-list-icon').toggleClass('rotate');
        $(this).siblings('.menu-list-ul').slideToggle();
      }); 
      $('.menu-button').click(function(event){
          $('.menu').addClass('menu-box');
          // ModalHelper.afterOpen();
          $('.menu-mask').bind("touchmove",function(e){
          e.preventDefault();
          });
      })
      $('.menu-list').click(function(){ 
        event.stopPropagation(); 
      })
    })
  </script>
</body>
</html>

未完待续

YangtzeX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中科锐项目总结

中科锐项目总结 (2019.7.1-2019.7.15)一.页面结构:1. images下存放图片、css文件、JS文件;2. 所有页面的头部和尾部共用,要求每个页面的头部和尾部必须一致;3. 个别页面需要单独添加的js和css放在单独的js和css文件中或者写在body后面,不能写在头部和尾部共用部分里;4. 除公用部分为,页面剩余的内容需要用一个div包住,以便后台管理操作;5...
复制链接

扫一扫