企业文化页布局的分析与实现

布局的分析与实现

企业文化页面的整体结构与前面的企业简介页面基本一致，不同在于#main的内容是多行。我们复制flex布局版的首页进行改动。

注：实际项目，里面会有很多公用样式，放到公用的css文件，这里方便大家学习，暂时不做抽取。同学们等两个页面完成后，请先自行分析有哪些公用内容、抽取公用样式。[cj1] 我们下个项目会专门讲解公用CSS文件的开发。

1 页面复制与基本调整

步骤1：复制原有的index.html与index.css，分别改名为culture.html与cutlture.css。

修改culture.html对css文件的引用。

<link rel="stylesheet" href="style/culture.css">

运行页面正常。

步骤2：删除div.main里的后面两个module，及第一个module内部的内容，代码结构如下。

    <div id="main" class="clearfix">
        <div class="left-bar">
        …
        </div>

        <div class="main-inner">
           <div class="module">
              企业文化
           </div>
        </div>
    </div>

步骤3：修改左侧导航菜单的当前菜单项active。

            <ul class="menu-list">
                <li>
                    <a href="#">企业简介</a>
                </li>
                <li class="active">
                    <a href="#">企业文化</a>
                </li>
                <li>
                    <a href="#">大事记</a>
                </li>
                <li>
                    <a href="#">产品列表</a>
                </li>
                <li>
                    <a href="#">企业荣誉</a>
                </li>
            </ul>

运行效果

2 页面分析1：整体分析

结构特点：多个并列项，分多行显示。

两种实现方法。div划分行、flex自动换行。

方法1：div划分行

先划分两行（用两个div），然后每个div通过flex布局（或float布局）划分三列。

元素结构示意图

HTML代码逻辑。

<div>
	<div class="row">
		<div class="col">
			item1
		</div>

		<!-- 其它两列略 -->
	</div>			

	<div class="row">
		<div class="col">
			item4
		</div>

		<!-- 其它两列略 -->
	</div>
</div>

​

row表示行，col表示列。这里通过类名说明结构，不做具体CSS实现。

当前结构存在问题

我们实现不仅考虑当前实现，还需要考虑以后的可能变化，即代码的可维护性与可扩展性。

以后可能的变化如下。

（1）1行3列以后变成1行4列；

（2）目前一共6项，以后可能变成10项，需要更多行。

对应改动。需要计算每项内容应该在第几行，调整到对应行数的div.row。非常麻烦。

后端交互（了解）。如果并列项数据后端以集合数据传递到前端，前端需要计算每项所在的行，然后动态生成行。麻烦。

方法2：自动换行

当多项内容的多行多行排列，可设计自动换行。

所有并列项内容全部放在一个父div进行多列布局，利用多列布局的自动换行。

元素结构示意图

设置自动换行

flex布局设置flex-wrap:wrap自动换行。flex-wrap默认值nowrap表示不会自动换行，各列自动伸缩与溢出显示。

float布局本身就是自动换行，无需设置。

HTML代码逻辑

<div>
	<div class="col">
		item1
	</div>

	<div class="col">
		item2
	</div>

	<div class="col">
		item3
	</div>

	<div class="col">
		item4
	</div>

	<div class="col">
		item5
	</div>

	<div class="col">
		item6
	</div>
</div>

​

3 页面分析2：并列项的类型

并列项1、3、5的内部是文本内容，并列项2、4、6是图片。

分别设置类text与image实现样式。

文本型的并列项hover效果如下图所示，会发生背景色与颜色变化。

图片型的并列项hover效果如下图所示，会出现渐变的图片放大效果。

说明：这里是动态渐变的动画效果。图片无法直接展示，运行页面查看效果。

4 元素结构

元素结构示意图

HTML代码

        <div id="main">
            <div class="module">
                <ul class="culture">
                    <li class="text">
                        <div class="part1">
                            FEATURE
                        </div>

                        <div class="part2">
                            特点
                        </div>

                        <div class="part3">
                            小步慢跑<br>
                            不积跬步，无以至千里
                        </div>
                    </li>
                    
                    <li class="image">
                        <img src="image/chrome.png" alt="">
                    </li>

                    <li class="text">
                        <div class="part1">
                            VALUE
                        </div>

                        <div class="part2">
                            价值
                        </div>

                        <div class="part3">
                            项目为中心<br>
                            完整项目，完整讲解
                        </div>
                    </li>

                    <li class="image">
                        <img src="image/vscode.png" alt="">
                    </li>
                    <!-- 先只放两项，后续复制 -->
 
                    <li class="text">
                        <div class="part1">
                            COMMUNICATE
                        </div>

                        <div class="part2">
                            沟通
                        </div>

                        <div class="part3">
                            志同道合<br>
                            互相帮助，共同进步
                        </div>
                    </li>
                    <li class="image">
                        <img src="image/live-server.png" alt="">
                    </li>

                </ul>
            </div>

        </div>

（1）多项内容可用典型的ul li，逻辑更强，用两层div也可以，这里用ul li。

（2）class="text"表示文本型的项，class="image"表示图片型的项。

（3）文本型的各项内容分多行，每行起名：part1、part2…