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 class="g-content">
    <div class="pull-height"></div>
</div>
<div class="g-footer-f">
    <div class="footer-bg"></div> 
    <a href="test7-3.html"><button class="nav-fl bgfb">再来一局</button></a>
    <a href=""><button class="nav-fr bgf6">上传分享</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 rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css?1.1.11">
放</head>标签里头

而两外两段scritp不能乱顺序，放在</html>标签后
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js?1.1.11"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js?1.1.11"></script>

之所以放在末尾是防止这两段代码影响html初始加载的格局

Okay, after loading the framework, the code format of the carousel plug-in is relatively fixed, just remember the code is as follows:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!--底部导航点。。。-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!--轮播广告内容-->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/test8-1/Image1.png">
        </div>
        <div class="item">
            <img src="img/test8-1/Image2.png">
        </div>
        <div class="item">
            <img src="img/test8-1/Image3.png">
        </div>
    </div>
    <!--左右箭头-->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <pan class="sr-only">previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <pan class="sr-only">Next</span>
    </a>

But we are not only satisfied with this implementation, we do not implement the text of the first picture through ps_cc. So how to implement it through html+css?

##First of all. What comes to mind is "layer postion positioning"

Key code:

.s-pos-center{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}css作用于文字<span>盒子里，两个特点：1.不必知道“宽高度”。2.它是一种图层的形式覆盖在父盒子上，且无视兄弟姐妹盒子。

Also review

other levels Vertical centering method and comparison

The first method is to achieve horizontal and vertical centering of inline and inline-block elements through text-align + line-height

(milk and jelly)

<style>
        .s-lineheight-center{text-align:center;line-height:300px;
        }.test{width:300px;height:300px;
        }.test{background:#5fc0cd;
        }.t-color-damage{background:pink;
        }</style>
</head>
<body>
<div class="test s-lineheight-center"><span class="t-color-damage">元素</span>
    <img src="img/test8-1/pic.png">
    <p>block元素</p>
</div>

The result shows that the css is applied to the parent box, and the child elements are centered horizontally and vertically through the parent box.

Features:

1. You must know the exact value of the height

, so that the

box height is equal to the line box height, is actually the bottom line of the element overlapping the parent box on the center line. It is achieved by sacrificing the upper and lower padding of the parent box. Therefore, the centering effect of the img image will not be achieved. 2 , occupy the middle position together. 3. Not suitable for block elements. The p tag in the picture is separated from the test parent box. ##3. The center line of the text overlaps the center line of the parent box.

So it is generally used to vertically center the child elements of the parent box with only one line of text elements

The second method is through display: table-cell+text-align +. vertical-align: middle

Achieve

horizontal and vertical centering of three types of elements (milk, jelly, nuts)

<style>
        .s-lineheight-center{display:table-cell;text-align:center;vertical-align: middle;
        }.test{width:200px;height:400px;
        }.test{background:#5fc0cd;
        }.t-color-damage{background:pink;
        }</style>
</head>
<body>
<div class="test s-lineheight-center">
    <span class="t-color-damage">元素</span>
    <img src="img/test8-1/pic.png">
    <p>block元素</p>
    <span>inlink</span>
</div>

这种方法也是作用于父盒子div，通过三个css规范子元素位置。

特点：

1。高度调小时，子元素自适应高度，而且它本身有一个最小高度存在。同时父盒子的块元素虽然会换行，但是不会离开父盒子。（感觉宽高影响不大，不知道要不要高度。暂时是元素的内容宽高）

2。关于img居中的问题：（1。单独img时，可以实现水平垂直居中。2。img+快元素如p为子元素时，会以他们两的高的中线叠加在父盒子div的中线上。所以一般的书本+书名可以用这种方法实现。3。img+行内元素为子元素时，会以他们两的宽度的中线水平在父盒子div的中线上。行内元素的底线重叠img底线。效果就是文字位于img左下角或右下角。

第三种，通过display：flex+jc+ai 实现三类元素的水平垂直居中（牛奶，果冻，坚果）

<br>

<title>水平居中</title>
    <style>
        .s-lineheight-center{
          display:flex;
          justify-content: center;
          align-items: center;
        }
        .test{
            width:200px;
            height:400px;
        }
        .test{
            background:#5fc0cd;
        }
        .t-color-danger{
            background:pink;
        }
        .t-height-primary{
            height:100px;
        }

    </style>
</head>
<body>
<div class="test s-lineheight-center">
    <span class="t-color-danger">元素</span>
    <img src="img/test8-1/pic.png">
    <p class="t-height-primary">block元素</p>
    <span>inlink</span>
</div>

<br>

这种方法也是作用于父盒子div，通过三个css规范子元素位置。

特点：1.如果不指定宽高，宽度会以100%body展现。高度为内容高。

2.block元素不再独占一行。而是于以inline-block的身份存在。

3.当宽度指定数值过小时，每个元素会以字符串的形式自动换行。同时子元素会超出父盒子。

4.子元素兄弟们的总宽度的中线会重叠父盒子的中线。文字的中线和图片的中线重叠，也重叠父盒子中线。

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!