中科锐项目总结

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

出现的bug

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

出现的bug如下:

中科锐项目总结_第1张图片

要达到的效果:

中科锐项目总结_第2张图片

出现bug的原因:

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

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

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


    

一.页面结构:

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文件;可直接去官网下载)



  
  
  
  
  
  
  导航栏
  


  
  
  
  


未完待续

你可能感兴趣的:(web)