brief introduction

teaching objectives

Narrow screen mode web design_task release

Narrow screen mode web design_skill points

Narrow screen mode web design_preparation work

Narrow screen mode web design_step1_framework construction

Narrow screen mode web design_step2_navigation bar design

Narrow screen mode web design_step3_jumbotron title

Narrow screen mode web design_step4_Design the content of each section

Narrow screen mode web design_step5_custom CSS beautification page

Narrow screen mode web design_Case summary

Fixed layout mode web design_task release

Fixed layout mode web design_preparation work

Fixed layout mode web design_step1_framework construction

Fixed layout mode web design_step2_content layout and typesetting

Fixed layout mode web design_step3_Design title content

Fixed layout mode web design_step4_Design Column section content

Fixed layout mode web design_step5_responsive navigation bar design

Fixed layout mode web design_Case summary

Login interface actual combat_step1_Task release & skill point analysis

Login interface actual combat_step2_add each component of form login

Login interface practice_step3_Add CSS for beautification

Login interface practice_step4_Apply CSS to form elements

Login interface actual combat_step5_enhance function effect

Login interface practice_Case summary

Actual mobile layout_task release

Actual mobile layout_skill points and preparation work

Actual flow layout_step1_overall framework construction

Practical flow layout_step2_top navigation bar design

Practical flow layout_step3_title block design

Practical flow layout_step4_Content detailed responsive design

Practical flow layout_step5_Design side navigation bar

Practical flow layout_step6_Reconstruct the side navigation bar to hide the small screen

Practical flow layout_step7_Reconstruct the title bar to add dynamic content

Practical flow layout_step8_Attach JS events to dynamic content

Practical mobile layout_case small

Marketing website design_task release, skill point analysis

Marketing website design_preparation work and implementation step analysis

Marketing website design_step1_Home page overall framework design

Marketing website design_step2_Refine the top navigation bar

Marketing website design_step3_Design highlighted title

Marketing website design_step4_Detailed content design

Marketing website design_step5_Customized CSS beautification page

Marketing website design_case summary

Paste effect at the top and bottom of the web page_task release

Paste effect at the top and bottom of the web page_Skill points and preparation work

Paste effect at the top and bottom of the web page_step1_overall frame layout

Paste effect at the top and bottom of the web page_step2_top navigation bar

Paste effect at the top and bottom of the web page_step3_bottom element design

Paste effect at the top and bottom of the web page_step4_internal part design

Paste effect at the top and bottom of the web page_step5_bottom navigation fixed effect

Paste effect at the top and bottom of the web page_step6_Customized CSS to beautify the page

Paste effect at the top and bottom of the web page_Case summary

Blog page_task release

Blog Page_Skill Points and Preparation Work

Blog page_step1_overall framework construction

Blog page_step2_top navigation bar

Blog page_step3_tail content design

Blog page_step4_Design top title

Blog page_step5_content part layout design

Blog page_step6_bottom article pagination

Blog page_step7_sidebar content design

Blog page_step8_Add CSS to beautify the header menu

Blog page_step9_Add CSS to beautify the tail content

Blog page_Case summary