Basic review (5) | PC static web application development

PC static web application development

After learning the content of HTML and CSS, building a complete page also requires a clear understanding of the overall layout of the page to master the basics.

Development Process

1. Demand analysis

​ To position the developed product (product type, function, customer-oriented)

2. Overall planning

​ Determine the content, level and display form to be displayed on the website, and give the corresponding content copy

3. Interface design

​ Design each page of the website and give the final design drawing, color and data information

4. Front-end programming

Code the obtained design drawing to realize the interface function of the webpage

5. Front-end and back-end system integration

Back-end developers carry out database design and integrate program functions and interfaces

6. Test acceptance

Pre-project planning for product testing and acceptance, product interaction effects, and functional realization

Common concepts

Version Heart

• The area where the main content of the webpage is located is generally displayed horizontally and centered in the browser window, allowing users to focus more
• Common core width values ​​include 960px, 980px, 1000px, 1200px
• Use the margin centering method in the standard stream

Layout process

• Determine the page center (viewable area)
• Analyze the row modules in the page, and the column modules in each row module
  • One column of fixed width and centered
  • Two columns narrow left and wide right
  • Evenly distributed
• Make HTML pages, CSS files
• CSS initialization, using the principle of the box model, to control each module in the webpage through DIV+CSS layout

Case exercise

Tab icon icon

• The file name of the icon must be .ico (can be converted by the converter)
• The file needs to be stored in the same directory as index.html
• Set through the link tag,

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Graded introduction of CSS

• Extract multiple public parts of the page and provide them to multiple html references at the same time, clear the default style CSS, website public style CSS, and each page's own unique CSS

• When introducing, you need to introduce the respective ones at the end, so that you can cover the public part

  • Clear the default sample
    • Available on all websites
    • The existing resources on the network are imported in the first layer, and they are not allowed to be changed again after writing
    • reset.css
  • Public style
    • All pages of a single website
    • Find the common parts of all pages or multiple pages and divide them into different modules
    • common.css
  • Unique part of the page
    • A single HTML page
    • Written separately in the css style, only useful for the corresponding html file
    • common.css

Header area

• Common name of the top structure of the page, usually including logo, nav, etc.

  • Logo uses h1>a structure, and appropriately add SEO search keywords
  • Nav uses the list structure of ul>li>a to build

• The background of the column, the content contains the main content in the center of the board, and the content contains two parts floating around

• In the process of style writing, you can first write to change the element loading mode, and then the box model attributes

• The cursor attribute can modify the style pointer (small hand) that the mouse moves to above

• If you need to add a small plug-in, use relative positioning and absolute positioning to add

  • border-radius can be used to set the roundness of its border

• Place the small sprite icon, if you use the full width to easily affect the display of the elements behind, you can set it in a hook separately, and then lock the position by positioning

login-banner area

• Layout type, floating style of the column

• Why doesn’t the form use the form element? In actual web pages, some form effects are usually simulated by other tags + css style effects, such as buttons and drop-down menus.

• Writing of the drop-down menu

  • It is equivalent to putting a lot of dt dd in a box
  • The internal content can be displayed on both ends by floating left and right

search area

• The background of the column is then centered
• The specific realization of content information filling is passed through the form attributes

content area

• The main content area of ​​the webpage, used to display more product information

main area

• The layout is narrow and wide on the left, which is realized by floating
• The unordered list structure of the aside part, the child elements are displayed after the mouse is moved to the li tag, and the data changes dynamically. It is necessary to build a good HTML and CSS structure to facilitate the later back-end development of incoming data
  • The small icon is still added to the content using a hook (set the b tag, and then add a background image to it)
• The carousel image of the banner part, click the origin is realized by js
  • Put all the pictures in ul, let them display side by side, then adjust the position display through relative positioning, and hide the excess part through hidden
  • The arrow layout uses a horizontal centering method, top gives a 100% center, and then uses margin-top to pull back the excess part
  • The arrow on the right is equivalent to setting a style for a single attribute

Hot_recruit section

• There are public parts connected with popular positions and the following popular companies, so you need to carefully extract public styles, set CSS through public class names, and separate styles in the position

• Layout type: tab bar and tab structure, the whole is a layout center structure aligned up and down

• The content is omitted into... effect

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  

• The public style still needs to be added to the public style css file

• If you want to display conflicting web pages, we can set display: none for the public ul, and then display the current one

Hot-Company section

• The most important key is how to modify the public style, which will not affect the display of the previous public style, but also modify different places.
  • After F12 is opened, check the inherited styles, ensure that the following styles are imported after the introduction of the public styles, and then modify the naming of the public styles to increase the weight of CSS
  • When there is a different style in a box, you need to add a separate class and then set a single attribute for it

Footer area

• Display the content after floating the left and right areas

• Mainly the display of some text and sprites. The display of the small pictures is usually achieved by adding an i tag to the background display.

Backtop area

• Back to the top of the settings, usually use a transition to build the structure
• Positioning method: fixed positioning , the position is kept at a fixed position with the center of the plate, to avoid too much difference in the position of the elements due to different resolutions, the animation effect is realized through js

Rebuild a new page

• Analyze the commonality with other pages, split and copy selection according to modules

Backtop area

• Back to the top of the settings, usually use a transition to build the structure
• Positioning method: fixed positioning , the position is kept at a fixed position with the center of the plate, to avoid too much difference in the position of the elements due to different resolutions, the animation effect is realized through js

Rebuild a new page

• Analyze the commonality with other pages, split and copy selection according to modules
• Copy the html file directly, delete the unnecessary structure, keep the public structure part needed by the company page, delete the link tag introduced by the unnecessary CSS file, and keep the required public style file