1-1, test81-1

1-1, test81-1

We need to use bootstrap, The frontend framework of Twitter, to implement this task. First, put the psd diagram.

Uploading these images is pretty big. Therefore, I used office picture manager to compress images.

Method: alt + p + o, click the tab + button below to select a webpage, and click Save.

 

I. Restore the psd static page with a "0.5 million-year salary"

First think:

I found that the settings at the end of the header of the three psd images are the same. You can extract them and make them

G-header, g-content, g-footer

This name complies with my other article: css style writing specifications + special symbols http://www.cnblogs.com/hewasdrunk/p/7168862.html. if you are interested, refer to it.

2. The first page module in content is a carousel image, which can be implemented through the bootstrap carousel image plug-in.

Found 3. 2 ~ in content ~ Each of the six modules is divided into several subsets by one row, which can be achieved through the bootstrap raster system.

Okay, macro thinking. Okay, so the problem is coming.

Question 1. How can we achieve footer's "always bottom "?

Method 1: Use the flex layout of css3

The core code is as follows:

Html {height: 100%;/* set the height of the html and body elements to 100% to fill the screen. * // * It should also be noted that the body in html generally has more or less margin, and the height of the body is not 100%. */} Body {display: flex; flex-direction: column; height: 100%;/* set the height of the html and body elements to 100% to fill the entire screen. Here, body: height: 100% inherits the html height * // * sets the display attribute of the body to flex, and then sets the direction attribute to column, * //}/* we hope that the header and footer will only occupy the space they should occupy, and all the remaining space will be handed over to the subject content area */. g-header {flex: 0 0 auto ;}. g-content {flex: 1 0 auto;/* Set flex-grow to 1, which occupies all available space * // * while other elements use this property value as 0, therefore, no extra space is available * // * 1 flex-grow, 0 flex-shrink, auto flex-basis */}. g-footer {flex: 0 0 auto ;}

Method 2: Use postion to locate

. G-footer-f {position: fixed; bottom: 0; width: 100%; min-height: 5rem;/* This method is fixed under the browser by position, but it appears as a floating on the upper layer. * // * Therefore, the content of the g-content box is not completely displayed. Blocked. * // * This feature is also used to achieve the underlying style transparency of footer, And the buttons in footer are not transparent. * // * The implemented content is not blocked. You only need to add an empty div with a height at the bottom of g-content. */} <Div class = "g-content"> <div class = "pull-height"> </div> <div class = "g-footer- f "> <div class =" footer-bg "> </div> <a href =" test7-3.html "> <button class =" nav-fl bgfb "> next game </button> </a> <a href = ""> <button class = "nav-fr bgf6"> upload and share </button> </a> </div>. footer-bg {height: 5rem;/* you only need to give another layer, and then give a height as high as the parent box to achieve the underlying transparency, the upper layer is not transparent */background: #29BDE0; filter: alpha (Opacity = 50);-moz-Opacity: 0.5; opacity: 0.5;/* filter: alpha (Opacity = 50);-moz-Opacity: 0.5; opacity: 0.5; transparent effect */}. pull-height {height: 5rem ;}

Question 2. How to Implement bootstrap carousel images "?

I created a bootstrap project directly on webstrom. I also found a problem: the code that introduced the bootstrap framework locally cannot implement the function.

Finally, I decided to use external links.

<Link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"> put in the 
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"> <! -- Navigation point at the bottom... --> <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 =" # define usel-example-generic "data-slide-to =" 2 "> </li> </ol> <! -- Carousel ad content --> <div class = "movie usel-inner" role = "listbox"> <div class = "item active">  </div> <div class =" item ">  </div> <div class =" item ">  </div> <! -- Left and right arrows --> <a class = "left semi usel-control" href = "# carousel-example-generic" role = "button" data-slide = "prev"> <span class = "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-chevron-right "> </span> <pan class = "sr-only"> Next </span> </a>
However, we do not just meet this implementation. The text of the first graph is not implemented through ps_cc. So how can we implement it through html + css?
The first thing I think of is "layer postion positioning"
Key code:
. S-pos-center {position: absolute; top: 50%; left: 50%; transform: translate (-50%,-50%);} css acts on the text <span> box,Two features: 1.Not RequiredKnow"Width and height". 2. It isLayerFormatOverwriteOn the parent box, andIgnore broSister box.
Also, reviewOther horizontal vertical center methods for comparison
First, the inline and inline-block elements are horizontally and vertically centered (milk and jelly) through text-align + line-height)
<Style>. s-lineheight-center {text-align: center; line-height: 300px ;}. test {width: 300px; height: 300px ;}. test {background: # 5fc0cd ;}. t-color-damage {background: pink ;} </style> 
The result shows that css acts on the parent box and uses the parent box to operate on the horizontal and vertical center of child elements.
Features:
1. You must knowHighly Accurate Value, LetBox heightEqualRow-frame height,In fact, the bottom line of the element overlaps in the middle line of the parent box. It is achieved by sacrificing the upper and lower rows, that is, sacrificing the upper and lower padding of the parent box. Therefore, the img image is not centered.
2. The child elements to be centered in the table are squeezed to occupy the center position. 3. It is not suitable for block elements. In the preceding figure, the p tag is removed from the test parent box.
3. The text midline overlaps the midline of the parent box, while the img only overlaps the midline of the parent box.
Therefore, it is generally used to vertically center a child element with only one line of text elements in the parent box.
 
Second, use display: table-cell + text-align + vertical-align: middle to horizontally and vertically center the 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> 
This method also applies to the parent box div and standardizes the sub-element position through three css elements.
Features:
1. When the height is adjusted, the child element adapts to the height and has a minimum height. At the same time, although the block element of the parent box will wrap, it will not leave the parent box. (I don't know if the width and height affect much. For the moment, the content width and height of the element)
2. Questions about img center: (1. When img is used separately, horizontal and vertical center can be implemented. 2. When img + fast elements such as p are child elements, they are superimposed on the parent box div line with the high midline of the two. Therefore, this method can be used for general books and titles. 3. When an img + row element is a child element, it is placed online in the parent box div at the midline level of the width of the two. The bottom line of the Line Element overlaps the img bottom line. The result is that the text is in the lower or lower right corner of the img.
 
Third, use display: flex + jc + ai to horizontally and vertically center the three types of elements (milk, jelly, nuts)

<Title> horizontal center </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"> elements </span>
& Lt; img src = & gt; img/test8-1/pic.png & gt;
<P class = "t-height-primary"> block element </p>
<Span> inlink </span>
</Div>


 
 
This method also applies to the parent box div and standardizes the sub-element position through three css elements.
Features: 1. If the width and height are not specified, the width is displayed as 100% body. The height is the content height.
2. The block element no longer exclusive to a row. It exists as an inline-block.
3. When the width is specified as an hour, each element is automatically wrapped in a string. At the same time, the child element will exceed the parent box.
4. the midline of the total width of the child element sibling will overlap the midline of the parent box. The text midline overlaps the midline of the image, and also overlaps the midline of the parent box.
 
So much is summarized today.