PC端项目页面问题总结

前端项目开发感悟

一、熊管家页面布局总结

1、项目计划划分

首先设计通用结构，制作模板：如熊管家项目中，所有页面共用页脚，除主页外的页面共用导航栏。那么就可以将导航栏、页脚先写好作为模板，并使用外部样式表设计这些样式。
其次，寻找通用模块，进行可移植的通用模块设计。模块并非是可以写进模板里的，因为一个模块在不同页面中的位置可能不同。

如熊管家项目中，有多处使用了6个小图标，它们高度相同，只有微小不同。那么可以进行基础样式设计，然后写在一个单独文件中，在需要使用的时候直接copy。

更小的部分又如在《关于我们》部分，公司简介和团队展示部分有高度相似的模块（除了文本不同），则在设计该页面时，用类同时设计这一部分。

【总结】：除了通用结构，也不要忽视通用模块

2、版心布局的意义：

假设将版心设置为1200px，margin:0 auto;

那么当浏览器宽度在>1200px的范围内减小时，由于版心左右外边距是auto，所以此时会减小左右外边距。则实际效果就是：中心版心区域不变，两侧通栏区域减小。

当浏览器宽度减小到1200px以下时，会产生水平滚动条并移除隐藏。

通过版心布局，我们可以使得在1920px宽的屏幕上做的页面，移动到1440px的显示器后，只是通栏宽度改变，版心部分会正常显示。

1920px

1440px

<1200px

【注】页面中除了通栏外，所有内容都应该在版心中。如果内容没有在版心中，而是在通栏中水平居中。那么当浏览器宽度＜版心宽度时，页面就会发生变形。变现为未在版心中的元素与在版心中的元素开始错位。未在版心中的不会在浏览器宽度<1200px时停止移动，而是继续显示在页面中心，直到它的宽度<浏览器宽度。

一般的模块结构为：

    <div class="wrap">
        <div class="container">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>
    </div>

背景色问题：

应该把wrap、container都设置上背景色，并且container不要用margin控制与上下模块的距离，用Padding控制与上下模块的距离。（因为padding有背景色而margin没有）。

这是由于一般通栏设置为100%，版心设置为1200px。但是要明确，100%是浏览器宽度的100%，当浏览器宽度减小，通栏也会减小。如果只设置通栏背景色，那么当浏览器减小到1200px以下时，产生水平滚动条。向右滚动会发现没有颜色。如果只设置版心背景色，那么全屏时通栏没颜色。（下例中只有一块部分产生这种效果是因为用了多个版心，其中那一栏的版心未设置背景色）

3、超链接最好在制作的时候就做好链接，即使其他网页并没有做好。（否则最后链接容易错漏）

4、选择器问题：

应该避免嵌套多级id，如#A #B #C（300）。这样会权重过高。当直接用#C（100）选择的时候造成样式无效。

遵循“低权重，高可读”原则。

在HTML命名时：少用id，外层容器多用class。

在选择器选择时：少用父元素的id定位。

5、背景参考图问题

通过将背景设为body部分的参考图，并对页面部分设置透明度，可以清晰的看出页面与设计图的差异

背景参考图设置

        body{
            background: url(./img/熊管家-新闻详页.png) no-repeat;
        } 
        .wrap{
            opacity: 0.6;
        }

①background-position和background-size无需设置，因为默认就是左上角对齐且100%图片大小。

②对内部页面的父元素设置透明度，如wrap是包裹了页面中的所有元素的通栏

背景参考图与页面的偏差

①Q：背景参考图是否与页面完全重合？

A：不一定，当浏览器产生下拉滚动条时，水平方向存在偏差是正常的。即水平方向在同一高度，垂直方向上有差距正常。

②Q：1920px宽度的显示器，1920px宽度的设计图，背景图是否会完全显示？

A：不一定，当页面高度超过屏幕高度100%时，产生下拉滚动条，宽为15px，所以背景图被覆盖了15px。

③Q：背景图与页面为什么不会完全重合？

A：当产生下拉滚动条时，浏览器全屏宽度为1905px，而设计图的版心居中是在1920px时的居中，而由于左右外边距是auto，这样版心部分就会与设计图的版心部分产生水平方向7.5px的偏差。

6、命名相关问题
1. 图片素材命名要用英文
2. 通用部分用
  
  comm-xxxxx
  
  其他按模块，如
  
  index-xxxx
  
  case-xxxx
7、文字扩展性

方法：
1. 选择性不设宽高
  
  如纯文本性的东西一般不设高，让页面自己撑开。单行文本不设宽。
2. 最大最小宽高（写最大宽让元素不超过，写最小宽让元素内文本过少时不至于太难看）
3. 溢出隐藏
4. 溢出省略
测试：增加文本测试，在检查中把文本多几行看效果。

后端富文本：待用户添加的段落中，标题要给id或者class名字，不要直接用标签名。因为在后端文本中的富文本标题可能也用了h1。

或者说，要考虑后端富文本中的标签样式。

新人浅见，敬请指摘

posted on 2020-12-04 11:06 断鸿_Hua 阅读(382) 评论(0) 收藏举报

刷新页面返回顶部

断鸿_Hua