中科锐项目总结 (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>
未完待续
