分享一个企业网站实现的实例详解

这任务需求我们使用推特的前端框架bootstrap来实现。先放psd图。

上传这些图片也蛮大的。为此我使用office picture manager压缩了图片。

方法：alt+p+o，然后tab+下方按钮选中用于网页，点击保存就ok

一。还原含有“50万年薪”的psd静态页面

先思考：

发现1.三张psd图的头部尾部的设定是一样的，可以抽离出来，弄成

g-header,g-content,g-footer

这命名符合我另外一篇文章：css样式书写规范+特殊符号，有兴趣的可以翻看。

发现2.content中第一个页面模块是个轮播图，可以通过bootstrap轮播图插件实现。

发现3.content里2~6模块都是一行均分几个子集，可以通过bootstrap栅格系统实现。

好的，宏观思考ok，那么问题来了。

问题1.怎么实现footer“永远沉底”?

方法1：使用css3的flex布局

核心代码如下：

html{height:100%;/*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。*//*这里还要说明一下：html下的body一般会有或多或少的margin，body的高度不是100%的。*/}body{display:flex;flex-direction:column;height:100%;/*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。这里body：height：100%是继承html的高度*//*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/}/*我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域*/.g-header{flex:0 0 auto;
}.g-content{flex: 1 0 auto;/*将 flex-grow 设置为1，该元素会占用全部可使用空间*//*而其他元素该属性值为0，因此不会得到多余的空间*//* 1 flex-grow, 0 flex-shrink, auto flex-basis */}.g-footer{flex: 0 0 auto;
} 

查看更多关于分享一个企业网站实现的实例详解的详细内容...