Article content: notes, feeling and experience in the process of learningCopy the code

I. Web development process

2. Overall planning: According to the conclusion of demand analysis, determine the contents, levels and forms to be displayed on the website, and provide corresponding contents. 3. Interface design: Designers design each page of the website according to the overall planning scheme, and finally give the design drawing, color, data information, etc. 4. Front-end programming: front-end developers write codes according to the design drawing to realize the interface and functions of the web page 5. 6. Test and acceptance: project experience and related testers shall test and accept the products according to the guidance of the preliminary project planning, and test the interactive effect, function and realization effect of the products

Second, web development basis

1, the type area

The area of a web page where the main content is located, usually horizontally centered in the browser window, so that the user’s eye is more focused

  • Common typography widths include 960px, 980px, 1000px and 1200px
  • Use the margin center method in standard flow margin: 0 auto

2. Page layout process

  • Determine the layout of the page (visual area)
  • Analyze the row modules in the page, and the column modules in each row module
  • Create HTML pages and CSS files
  • CSS initialization, then start to use the box model principle, through DIV+CSS layout to control the various modules of the web page

3. Common layout types

  • A column of fixed width is centered

  • The two columns are narrow on the left and wide on the right

  • The column is evenly distributed

Common skills and methods of web development

1. File structure

  • The basic structure consists of

2, title: page title

3. Label icon icon

  • The icon file name must be favicon.ico, and the file must be stored at the same level as the index.html file
  • Imported through the link label
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Copy the code

4. CSS hierarchical introduction

When introducing multiple layers of CSS, set the CSS to follow the previous layers, using page-specific styles and layering common styles

(1) Clear the default style

  • All websites can be used, generally accumulated in their own work or use the network of existing resources
  • Naming convention: reset.css
  • When introduced as the first layer, styles unique to the web page can be layered over styles in Reset

Note: reset.css cannot be changed again after being written

(2) Common styles

  • A single website all pages, several pages can be used, you can observe from the design drawing, find the common part of multiple pages, divided into different modules for.CSS file writing
  • Naming convention: common.css or module name.css
  • After the common style of multiple pages is written, it is not allowed to be modified later. Once changed, multiple pages may be changed. Therefore, you need to pay attention to the use of class names.
  • It is usually after the reset.css file and in front of the individual style file

(3) Page unique style

  • Apply to a single HTML page, find a page-specific style, write it in a separate.css file that can only be called from that page
  • Naming conventions: Generally keep the same as the HTML name, such as index. CSS. If you split it more carefully, you can use multiple words, such as index_banner
  • Generally introduced after all common styles, note selector weights
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css"">
<link rel="stylesheet" href="./css/index.css"">
Copy the code

5. Header area

Div usually contains things like logo and navigation nav. To avoid changing the common layout style, div needs to add a new class attribute value

  • Logo: Use h1> A structure with appropriate SEO search keywords (background drawing)
<! -- Logo area -->
<h1 class="logo">
    <a href="index.html">Pull hook recruiting | | | | Internet job recruitment training Java | | front end</a>
</h1>
Copy the code
.header-c .header-left .logo a {
    /* Logo to block element */
    display: block;
    width: 43px;
    height: 21px;
    /* Logo */
    background: url(../images/logo.png);
    /* The words of the a label are indented and fly out of the box then hidden */
    text-indent: -999em;
    overflow: hidden;
}
Copy the code
  • Nav navigation: ul> LI > A list structure
<! -- Navigation area -->
<ul class="nav">
    <li class="current"><a href="index.html">Home page</a></li>
    <li><a href="company.html">The company</a></li>
    <li><a href="school.html">Campus recruitment</a></li>
    <li><a href="#">As said</a></li>
    <li><a href="#">position</a></li>
    <li><a href="#">course<span class="tips">new</span></a></li>
</ul>
Copy the code
  • The Sprite can be a padding-style image or a small label that acts as a hook (box) to locate the parent phase of the child
<div class="header-right">
    <a href="#" class="upload">Upload your resume</a>
    <a href="#" class="position">Job subscription</a>
    <! -- I tag is the hook -->
    <a href="#" class="login">The login<i></i></a>
    <span>|</span>
    <a href="#" class="register">registered</a>
    <a href="#" class="app">Pull hook APP<i></i></a>
    <a href="#" class="enter">Enter enterprise Edition</a>
 </div>
Copy the code
/* Small hook Sprite map location */
.header-c .header-right .app i {
    position: absolute;
    left: -20px;
    top: 11px;
    width: 12px;
    height: 18px;
    background: url(../images/sprite_01.png) no-repeat -64px -212px;
}
Copy the code

6. Search area

  • Form tags need to be added to ensure that data can be submitted to the database
  • The text box input tag can be set to a placeholder property with the default prompt text, and the plaeHolder property will automatically disappear when you click on the placeholder property to enter the text

7. Css3 box shadow attribute

/* box-shadow: horizontal shadow position vertical shadow position Blur Distance Shadow size Shadow color inner/outer shadow */
box-shadow:3px 3px 5px 4px rgb(0.0.0);
Copy the code

8, redundant text displayed as ellipsis

.word_cut {
	/* Cannot break line */
    white-space: nowrap;
    overflow: hidden;
    /* Displays three small dots over the portion */
    text-overflow: ellipsis;
}
Copy the code