Task nine: Implement a complex page using Html/css

Mission Purpose

• Deepen the combat capability of HTML,CSS by implementing a more complex page
• Reuse and optimization of practice code

Task description

• Design artwork design by HTML and CSS psd file (click to download), effect such as (click to open)
• The entire page content is fixed, but the blue navigation and browser width of the head remain the same

Task considerations

• Only need to complete HTML,CSS code writing, do not need to write JavaScript
• tab only needs to implement the style, the ability of the students can try to achieve without using JavaScript, the implementation of the TAB switch
• All drop-down menus (select) are required to be implemented according to the design style, the dropdown style is customized, the drop-down selection is not required, but the style is implemented
• The perfect design in chrome, except for the text of the picture, font, color, layout, internal and external margins and other styles
• Students with ability to try cross-browser compatibility
• The ability of students can be realized after the implementation of less, sass or stylus and so on to achieve again

Task Completion and Summary:

A person to make this page, liver a bit not, simply do not cut diagram, plan directly to the approximate page written out, but write to the next day completely lose patience Zzzz, this task is tested to me. Forget, or analysis of other people's code, but their own code is to be affixed, know that the completion of the very bad, no matter how to say, after all, is a pro-son (self-written), it is not too embarrassing.

Here is a good team work to do:

http://zaiye.github.io/test1/

Now let me analyze some of the ways in which I feel that I have the skill to implement:

1, search box and the implementation of login effect

Code:

Use the position of the Padding-left value to empty, then adjust the coordinates of the x and Y axes of the background graph, and the implementation of the login effect.

2, similar to the implementation of double border

Code (parent Element):

Code (child element):

Create a double-border effect with a two-color circle overlay.

3. CSS3 Make a tab tab:

Development Step One: The parent element is set to relative positioning;

Development Step Two: Set the LI element to float;

Development Step Three: Hide input and the div that hosts the table;

Development step Four: Set the checked element with the ID tab, and the next ID with the Tab_menu element at the beginning of the click, which is the core code:

Development Step Five: Related principles and Development step four similar:

4, UL elements of the ingenious use:

The middle three chunks are set up and laid out using the nested div in the LI element in UL, which is a lot simpler than my approach. Sure enough, the brain is a good thing.

5, elements of the empty content application:

The head uses the LI element, the middle uses the floating P element to set the width height, the P element contains two sub-elements, in which the blank part just does not add the content, only blame oneself originally thought is too complex.

7, the production of Class progress bar:

or old tricks, using the overlap of parent elements with child elements. In fact, with the new HTML element Progress processing is also possible, but the background color processing some trouble, and its compatibility issues.

Task nine: Implement a complex page using Html/css