绘制企业管理页面总结 9.6

1、头部一般绘制导航栏，使用<nav></nav>中嵌套<li></li>，<li></li>中嵌套a标签，li代码：控制位置的margin；保证其在同一行的display:inline-block；(float：left也行)，无需规定宽高（因为li是父容器，让子容器a标签撑开就行），

a代码：保证其垂直居中的line-height，用padding:0 20px类似的撑开宽度，如果a需要添加伪类（比如鼠标悬停时链家下方带颜色的条），还需要添加position:relative,伪类方便用absolute定位颜色条的位置。

伪类代码：注意是两个冒号，less中是&：hover，&：：after（设置颜色条，包括content属性必填，display:none，width:100%因为a标签宽度虽然没设，但已经被padding撑开了），&：hover：：after（display:block）

 

2、很重要的通过paddind-top对图片长宽比进行等比控制，保证缩放放大均为按比例。

先将父类容器定位，然后设置样式。

父类div:position:relative;

                width:100%(一定要百分比，不一定100%)；

                padding-top:40%(宽高比为10:4)

子类img：高宽100%；绝对定位撑满整个父类div就行。

               position: absolute;

               top: 0;

               left: 0;

3、关于经过padding-top的图片位置的确定：

三行三列，每行每列是一个企业介绍的部分，推荐用h5的<section></section>标签，

父容器（子类有9个section）：display:flex;

               flex-wrap: wrap(第一行填满后会换行)

               max-width:1200px;(必须要写最大宽度，不写的话宽度会定死，无法用flex-basis:33%使其缩放)

子容器section:

               box-sizing: border-box;（把padding的内容包括在section中）

               padding: 12px;

               flex-basis: 33%;

 

4、为了保证整个页面缩小后，每行的内容不被挤到下一行，需要整个body项目的外面套个div，设置

最小宽度min-width，才能保证不继续缩放。