Sharing the structure and expression principles of simple web page layout

Introduction to structure and performance

HTML structure, CSS expression, JavaScript behavior. Web page layout should take into account the principle of separation of structure, expression, and behavior. First, focus on structure and semantics, then consider CSS, JS, etc., to facilitate later maintenance and analysis...

The idea of ​​separating structure from expression

1. Primary developer ideas and production methods: divs are nested layer by layer;
2. Intermediate developer ideas and manufacturing methods: remove redundant divs and simplify;
3. Advanced developer ideas and manufacturing methods: simplify the HTML structure as much as possible, and then set it with CSS to reduce the compatibility between HTML and CSS.
   step:
   Write the code first according to the structure and semantics, and then set the CSS style to reduce the fit between HTML and CSS

overflow:
visible The default value. The content will not be clipped and will be rendered outside the element box.
The hidden content is clipped and the remaining content is invisible.
scroll The content will be trimmed, but the browser will display a scroll bar so that the remaining content can be viewed.
auto If the content is trimmed, the browser displays scroll bars so that the remaining content can be viewed.
inherit Specifies that the value of the overflow property should be inherited from the parent element.

text-indent indents the text to the target position, so you don’t need to add another tag to the text. Reduce redundant code

When you get a web page design drawing, first pay attention to the text content of the web page and the relationship between content modules.
Focus on writing semantic HTML code instead of thinking too much about the style of the design.
After the HTML is written according to the content, consider the implementation of the style.
Complete the visual effect required by the design drawing without changing the existing structure
Margin can be a negative value, through which the content can be moved! Realize movement in four directions.
In the structure (HTML) and style (CSS), you can first write the content in HTML, and then use margin to move the position to achieve typesetting, reduce the coupling of style and structure, and reduce code

Web Page Skinning and Summary

Minimize HTML's reliance on CSS

Web page skinning: same HTML structure, different CSS styles

Here are some of the sharings from Gray Bull WEB students

When we first came into contact with web page production, we learned that html represents structure, css represents style, and javascript represents behavior. In web page production, we have always emphasized the principle of separating structure from expression. The structure here generally refers to HTML. In addition, does separation mean writing them in different files and referencing them? Of course not. We have learned here that separation is not only a method but also an idea. In short, a two-dimensional coordinate plane, where the x-axis represents technological development and the y-axis represents the needs of web page production, separation is achieved based on technological development and our web page production needs!

For example: when we build a house, HTML is equivalent to the structure of the house, CSS is equivalent to the later decoration, and web pages are all completed based on an effect. When we browse the web, the styles are different according to the different renderings, so the pages we browse are varied. So how do we layout the web pages? First of all, don’t think too much about CSS styles. Try to make our HTML structure reasonable, concise and semantic, and then add and improve the CSS style!

When we get the page, different makers have different links to the structural style. According to the different depths of understanding of this structural style, it is tentatively divided into three different levels: elementary, intermediate, and advanced;

For example, a common dialog box has 3 units. First, we need to complete one unit and press CTRL+V for the other. If a primary producer gets the page, he usually divides it according to the boxes above. A large div contains 2 small divs, floating left and right, with img on the left and p, h and other tags on the right. As for the time factor, it is realized by positioning it with the position attribute. The following code explains it.

<div class="demo1">
            <div class="fl">
                <img src="../../images/head02.jpg" alt="">
            </div>
            <div class="fr">
                <span>10 minutes ago</span>
                <h6>Gradually walking away and no more books</h6>
                <p>
                Do you feel busy every day with many lingering thoughts in your mind, but when you think about it carefully, you don’t know what you are really busy with. Only by developing good habits, taking good care of yourself, and following your dreams can you improve your productivity. This also means improving your relationship with your family and friends, because when you change, everything around you changes. What habits of high-performance people are worth learning from?    
                </p>
            </div>
        </div>
        <div class="demo2">
                <img src="../../images/head02.jpg" alt="">
            <div class="fr">
                <span>10 minutes ago</span>
                <h6>Gradually walking away and no more books</h6>
                <p>
                Do you feel busy every day with many lingering thoughts in your mind, but when you think about it carefully, you don’t know what you are really busy with. Only by developing good habits, taking good care of yourself, and following your dreams can you improve your productivity. This also means improving your relationship with your family and friends, because when you change, everything around you changes. What habits of high-performance people are worth learning from?    
                </p>
            </div>
        </div>
        <div class="demo3">
                <img src="../../images/head02.jpg" alt="">
                <span class="time">10 minutes ago</span>
                <h6>Gradually walking away and no more books</h6>
                <p>
                Do you feel busy every day with many lingering thoughts in your mind, but when you think about it carefully, you don’t know what you are really busy with. Only by developing good habits, taking good care of yourself, and following your dreams can you improve your productivity. This also means improving your relationship with your family and friends, because when you change, everything around you changes. What habits of high-performance people are worth learning from?    
                </p>
            </div>
        </div>

=>3 different demos represent 3 different page structures||Write the common part of the page structure to show:

/*reset*/
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "Microsoft YaHei", "Songti", "Tahoma"}
        
        /*Common styles*/
        .demo1,.demo2{
            width: 600px;
            margin-top: 20px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        p{
            text-align: justify;
            text-indent: 2em;
            line-height: 24px;
        }

=>Primary Producer css

/*primary*/
        .demo1{
            width: 600px;
            margin-top: 20px;
            overflow: hidden;
        }
        .demo1 .fl{
            width: 100px;
            float: left;
        }
        .demo1 .fl img{
            margin-left: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .demo1 .fr{
            width:488px;
            float: right;
            border: 1px solid #ccc;
            position: relative;
            padding: 5px;
        }
        .demo1 .fr span{
            position: absolute;
            right:18px;
            top: 5px;
        }

=>Intermediate Maker CSS, compared with the primary one, has a simplified structure, removing the div on the left and retaining the right part;

/*intermediate*/
        .demo2 .fr{
            width:488px;
            float: right;
            border: 1px solid #ccc;
            position: relative;
            padding: 5px;
        }
        .demo2 .fr span{
            position: absolute;
            right:18px;
            top: 5px;
        }
        .demo2 img{
            margin-left: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }

=>Advanced Maker CSS: Write code first according to structure and semantics, then do CSS styling, reduces the fit of CSS with HTML (document movement, image shifting, positioning attributes)

/*upscale*/
        .demo3{
            border: 1px solid #ccc;
            width: 488px;
            margin-left: 100px;
            padding: 5px;
            position: relative;
        }
        .demo3 img{
            float: left;
            margin:-6px 0 0 -86px;
            padding: 10px;
            border: 1px solid #CCCCCC;
        }
        .demo3 span{
            position: absolute;
            top: 10px;
            right: 20px;
        }

Conclusion: When you get a web design, you should first observe the relationship between the text and content modules, and focus on writing semantic HTML code, instead of thinking too much about the layout style between designs. Wait until the HTML code is edited, and then consider how to implement it, and strive to complete the visual effect required by the design without changing the existing page structure! (Click to download the complete code of the structure and performance principles of simple web page layout)

The above is the detailed content of the structure and expression principles of simple web page layout. For more information about the structure and expression principles of simple web page layout, please pay attention to other related articles on 123WORDPRESS.COM!