Share a detailed example of the implementation of a corporate website

This task requires us to use Twitter’s front-end framework bootstrap to achieve it. Put the psd image first.

The uploaded pictures are quite large. For this I compressed the pictures using office picture manager.

Method: alt+p+o, then tab+button below to select for web page, click save and OK

. Restore the psd static page containing "500,000 annual salary"

Think first:

Found that 1. The head and tail settings of the three psd pictures are the same and can be extracted Come out and make it

g-header,g-content,g-footer

This naming is in line with my other article: CSS style writing specifications + special symbols. If you are interested, you can read it .

It is found that the first page module in 2.content is a carousel chart, which can be implemented through the bootstrap carousel chart plug-in.

It is found that modules 2~6 in 3.content are divided into several subsets in one row, which can be realized through the bootstrap grid system.

Okay, macro thinking is ok, then here comes the question.

Question 1. How to realize the footer "always sinks to the bottom"?

Method 1: Using css3 flex layout

The core code is as follows:

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;
}

Method 2: Use postion positioning

.g-footer-f{position: fixed;bottom:0;width:100%;min-height: 5rem;/*此方法通过position固定在浏览器下方，但是以一种浮动在上层的效果出现的。*//*所以上一个紧挨的并列盒子，即g-content盒子的内容就会有一部分显示不全。被遮挡了。*/ /*而这种特性也被用于实现footer底层样式透明，footer里的按钮不透明。*//*而实现内容不遮挡，只要在g-content的底部新增一个含高度的空div就完成。*/}<div>
    <div></div>
</div>
<div>
    <div></div> 
    <a><button>再来一局</button></a>
    <a><button>上传分享</button></a>
</div>

.footer-bg{height:5rem;/*只要再给一个层，然后给个跟父盒子一样高的高度就可以实现底层透明，上层不透明*/background:#29BDE0;filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;/*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;实现透明效果*/}.pull-height{height:5rem;
}

Question 2. How to implement bootstrap carousel image”?

I created a new bootstrap project directly on webstrom. I also found a problem: the code that imported the bootstrap framework locally could not achieve the function.

In the end, I decided to use external links

.

<link>
放标签里头

而两外两段scritp不能乱顺序，放在

The above is the detailed content of Share a detailed example of the implementation of a corporate website. For more information, please follow other related articles on the PHP Chinese website!