"Three-stone jquery video Tutorial" 03. Create a vertical timesheet (Timeline)

Video address: Video is uploading, please later (about 15 minutes) ....

Hello everyone, Welcome to "three-stone jquery video Tutorial", I am your old friend-Sansheng stone.

Today, we are going to use the basic HTML, CSS, jquery to achieve the vertical schedule, first look at the final product:

For simplicity, each node in the timesheet is replaced with a picture, which may be the title-picture-Body shape in the actual application.

STEP1: Site Directory

The site directory is very simple and contains three parts: the lesson3.html file, the Lib directory, and the images directory.

Where lesson3.html contains the most basic components of a page, the correct settings DOCTYPE help the page render correctly in a modern browser.

<! DOCTYPE html>
The Lib directory contains only the latest JQuery libraries, and the images directory contains the 9 images used.
STEP2: Page structure
Add basic HTML tags to the page.

 
 

  
  
 
   
 to implement the two-color background of the time label, nested a two-layer div, using the CSS style class year and Year-inner to mark the list of events in the 
 
   
 timesheet with ul.events li organization 
 
   
 finally to the outside The timesheet node of the layer defines the style class timeline 
 
  
 
 
<! DOCTYPE html>
　　
The page displays the effect at this point:
STEP3: Style of the time label
Let's create the style of the time label, in order to achieve a two-color round background, we have made the following efforts:

 
  

  
   
 
    
Fixed width and height, with Border-radius equal to 1/2 of width and height for circular backgrounds
 
    
Two background colors directly from the Fineui (Pro Edition) version update page
 
    
To have the Time label (2015) centered in Year-inner, define the Line-height and Text-align properties respectively
 
    
In order for Year-inner to be centered in year, we used absolute positioning (top:50%; margin-top:-25px;) CSS Tips
 
   
 
  
<style>body {background-color: #efefef;} #main {margin:20px Auto;}. Timeline. Year {background-color: #AFDCF8; width:60px;height:60px;border-radius:30px;position:relative;margin:0 Auto 50px;}. Timeline. year-inner {background-color: #46A4DA; Width:50px;height:50px;text-align:center;line-height:50px;color: # Fff;border-radius:25px;position:absolute;top:50%;margin-top: -25px;left:50%;margin-left: -25px;}. Events img {width:100%;} </style>
　　
The page displays the effect at this point:
STEP4: Let the Picture Show around
In order for the picture to be evenly displayed, that is, a left, a right, and then a left, a right, so you need to clearly distinguish between odd and even-numbered Li tags, we use JQuery to accomplish this task:
<script src= "lib/jquery.js" ></script><script>$ (function () {$ ('. Timeline. Events Li:nth-child (2n) '). addclass (' Alt ');}); </script>
JQuery's sub-selector: nth-child (2n) is used to select even items in the list and to add style class Alt.
Below, we define by CSS, the left and right sides of the picture occupy 40% of the width, that is, the middle reserved 20% width, with a diagram to explain briefly:
Use the float style to display the picture left and right, with a specific CSS definition:
. Timeline Events Li {width:40%;margin-bottom:100px;border:solid 1px #AFDCF8;p adding:10px;border-radius:5px;float:l Eft;clear:left;}. Timeline. events Li.alt {float:right;clear:right;margin-top:50px;margin-bottom:50px;}
　　
The page effect at this point:
STEP5: Vertical background line behind the time label
We could have used an absolutely positioned div node to do this, but it would be easier to use the after pseudo-selector to look at the CSS definition first:
. timeline {overflow:hidden;position:relative;}. Timeline:after {content: "";p osition:absolute;width:6px;height:100%;background-color: #AFDCF8; top:0;left:50%; Margin-left: -3px;}
: The after pseudo-selector is used to insert new content after the contents of an element:

 
  

  
   
 
    
Content defines what's new to insert, and here we don't need to insert any text content, so leave it blank
 
    
Absolute positioning of new content, just as with normal div nodes
 
    
To make the vertical background line appear horizontally, we also use the top:50% + Margin-top tips mentioned above.
 
   
 
  
The page effect at this point:
　
STEP6: Vertical background line to the picture's connection line
Using a similar pseudo-selector, it is easy to define a connection line relative to each Li node:
. Timeline Events Li {width:40%;margin-bottom:100px;border:solid 1px #AFDCF8;p adding:10px;border-radius:5px;float:l Eft;clear:left;position:relative;}. Timeline. Events Li:after {content: "";p Osition:absolute;top:30px;left:100%;width:25%;height:6px;background-color: #AFDCF8;}
Special attention to the points:

 
  

  
   
 
    
left:100% is used to indicate that the connector is displayed immediately to the right of the icon
 
    
The width:25% is used to define the width of the connector, which occupies the distance from the right side of the picture to the vertical background line
 
   
 
  
A huge question number ? Why is 25%, not the other value?
In fact, this is carefully arranged:
Recall that the picture occupies a width of 40%, then the connection line should occupy the entire width of 10% = (100%-40% * 2)/2, which is obvious!
But Li:after's absolute positioning (position:absolute) is relative to the first non-static location of the parent node, where the parent node is the. Timeline. Events Li itself, so the width of the connection line relative to the LI:
40% * x = 10% = (100%-40% * 2)/2, can be calculated x = 25%
====
Assuming that the width of the CSS in the image is set to 45%, then the li:after width should be ((100%-45% * 2)/2)/45% = 11.1%
The page effect at this point:
STEP7: Custom Size box model (box-sizing)
Although we vowed to say that the 25% is carefully arranged, but the actual effect of the difference is very far, the width of the connection line is significantly wider.
If this is the actual width of our calculation, we will find that the actual width of the picture is 40%, which does not include the padding (padding) and the border (border)!
At this point we need to reset the box-sizing of all the elements on the page, from the default value Content-box to Border-box, which is also the recommended practice.
Many of the annotated CSS frameworks (including the now-popular BootStrap) Use this rule as the default style:
* {    box-sizing:border-box;}
Here is a simple comparison of the two differences:

 
  

  
   
 
    
Content-box: The width and height set for the element do not contain padding and borders
 
    
Border-box: The width and height set for the element contain padding and borders
 
   
 
  
The page effect at this point:
　　
　　
STEP8: Full CSS code
Adding a connector to the right picture is also simple, here's a look at the full CSS code:
* {Box-sizing:border-box;} Body {background-color: #efefef;} #main {margin:20px Auto;}. Timeline {overflow:hidden;position:relative;}. Timeline:after {content: "";p osition:absolute;width:6px;height:100%;background-color: #AFDCF8; top:0;left:50%; Margin-left: -3px;z-index:0;}. Timeline. Year {background-color: #AFDCF8; width:60px;height:60px;border-radius:30px;position:relative;margin:0 Auto 50px;clear:both;z-index:1;}. Timeline. year-inner {background-color: #46A4DA; Width:50px;height:50px;text-align:center;line-height:50px;color: # Fff;border-radius:25px;position:absolute;top:50%;margin-top: -25px;left:50%;margin-left: -25px;}. Timeline. events {List-style-type:none;padding:0;margin:0;clear:both;}. Timeline. Events Li {width:40%;margin-bottom:100px;border:solid 1px #AFDCF8;p adding:10px;border-radius:5px;float:le Ft;clear:left;position:relative;}.  Timeline. Events Li:after {content: "";p osition:absolute;top:30px;left:100%;width:25%; /* 10% = 1 * 40% * 25% */hEight:6px;background-color: #AFDCF8;}. Timeline. events Li.alt {float:right;clear:right;margin-top:50px;margin-bottom:50px;}. Timeline. Events Li.alt:before {content: "";p osition:absolute;top:30px;left: -25%;width:25%;height:6px; Background-color: #AFDCF8;}. Events img {width:100%;}
　　
The final page effect:
Source code and video download
Source and video please go to the video to find! Three stone produced, will be a boutique!
If this article is helpful to you, please click on the [Recommended] button to encourage the author, your support is our motivation to move forward!
"Three-stone jquery video Tutorial" 03. Create a vertical timesheet (Timeline)