HTML for Beginners - Chapter 6 Flow, Floating Model, Menu and Page Layout

Database 2023-09-15 18:06:53 views: null

1. Interview questions in this chapter

1.1 What is a flow model?

1.2 What are the basic layout methods in web pages?

2. Knowledge points

2.1 Review of the previous chapter

In the previous chapter, we learned the basic classification of web page elements and the box model.

2.2 Key points of this chapter

​ This chapter mainly studies the web page positioning model and basic layout.

3.Specific content

3.1 CSS positioning properties

The positioning method of CSS can help designers make documents easier to read. CSS mainly performs positioning through the position attribute.

3.1.1 Forward flow direction

​Normal flow direction is a preset positioning method. By default, the web page layout is based on the normal flow of the document flow, that is, in the structural order of HTML. The direction from top to bottom and from left to right is the so-called normal flow direction, and the browser also interprets our encoding based on this direction.

To put it another way, in most cases, normal flow refers to the way elements in a web page are marked. In addition, most HTML elements are inline elements or block-level elements. Block-level elements can contain inline elements and block-level elements, but inline elements cannot contain block-level elements.

​ In normal flow, block-level element boxes will be arranged from top to bottom in their parent object boxes, while inline element boxes will be arranged from left to right.

<!DOCTYPE html>
<html>
<head>
<title>Normal flow</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    background:#ba9578;
    color:#FFF;
}
#div2{
    background:#cef091;
    color:#000;
}
#div3{
    background:#70c17f;
    color:#FFF;
}
b{
    border:1px solid red;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2">
    <p>div2</p>
    <b>b元素1</b>
    <b>b元素2</b>
    <b>b元素3</b>
</div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.1.2 Positioning offset attributes top, bottom, right,left

Basic syntax:

top: auto | length | percentage;
bottom: auto | length | percentage;
right: auto | length | percentage;
left: auto | length | percentage;

​ Grammar description:

  • auto: No special positioning, allocated in the document flow according to HTML positioning rules.

  • Length: Use the length value to define the offset, which can be a negative value.

  • Percent: Use percentage to define the offset. The percentage refers to the height of the containing block and can be a negative value.

3.1.3 Positioning method position

Positioning allows defining where an element should appear relative to its normal position, or relative to a parent element, another element or even the browser window. CSS uses the position attribute to control the positioning type, and controls the offset with the four positioning offset attributes left, right, top, and bottom.

Basic syntax:

position : static | relative | absolute | fixed | center | page | sticky;

1. Relative positioning

​ Static positioning static follows the normal document flow and is the default positioning method for all elements. At this time, the four positioning offset attributes will not be applied. Generally, there is no special setting unless you want to cancel the inheritance of the special positioning of other elements.

​ Relative positioning follows the normal document flow. The reference position is its position in the normal document flow. It usually requires top, bottom, right, and left attributes to complete the offset of the element relative to its original position. An element set to relative positioning will be offset by a certain distance. The element will still maintain its shape before being offset. The space it originally occupied will still be retained. The element may cover other elements after it is moved.

Relative positioning will initially be positioned according to the "normal flow direction", and all boxes will be positioned first. Once a box gets its position according to the normal flow direction, it can also be offset relative to that position. This is relative positioning.

<!DOCTYPE html>
<html>
<head>
<title>Relative positioning</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:static; /*static positioning*/
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:relative; /*relative positioning*/
    top:60px;
    left:30px;
    background:#cef091;
    color:#000;
}
#div3{
    position:static; /*static positioning*/
    background:#70c17f;
    color:#FFF;
}
b{
    border:1px solid red;
}
.b2{
    position:relative; /*relative positioning*/
    left:80px;
    top:60px;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2">
    <p>div2</p>
    <b>b元素1</b>
    <b class="b2">b element 2</b>
    <b>b元素3</b>
</div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

2. Absolute positioning

​ Absolute positioning absolute, the element set to absolute positioning is deleted from the document flow. The element's original position in the document flow will be canceled and it will no longer occupy the original space. Absolute positioning is "relative to" the element's nearest positioned ancestor element. If there is no positioned ancestor element, it will always go back to the body element. The offset position of an absolutely positioned box does not affect any elements in the regular document flow.

​ Absolutely positioned boxes do not have normal flow problems, and will not affect other BOX in the normal flow direction.

<!DOCTYPE html>
<html>
<head>
<title>Absolute positioning</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:absolute; /*Absolute positioning*/
    top:100px;
    right:30px;
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:relative; /*relative positioning*/
    top:60px;
    left:30px;
    background:#cef091;
    color:#000;
}
#div3{
    position:static; /*static positioning*/
    background:#70c17f;
    color:#FFF;
}
b{
    border:1px solid red;
}
.b2{
    position:absolute; /*Absolute positioning*/
    left:-20px;
    top:120px;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2">
    <p>div2</p>
    <b>b元素1</b>
    <b class="b2">b element 2</b>
    <b>b元素3</b>
</div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3. Fixed positioning

​ Fixed positioning is consistent with absolute. Offset positioning is generally based on the window. When the scroll bar appears, the object will not scroll with it. The original position and space of the element are not retained, and the object is separated from the regular flow.

Fixed positioning is a subcategory of absolute positioning. The only difference is that for continuous media, the fixed BOX does not move as the document scrolls, similar to a fixed background image. For paginated media, the fixed positioning BOX is repeated on each page. This method is very useful when the same content needs to be placed on each page (such as placing a signature at the bottom).

<!DOCTYPE html>
<html>
<head>
<title>Fixed positioning</title>
<style type="text/css">
body{
    height:700px;
}
header{
    position:fixed;
    width:100%;
    height:100px;
    top:0px;
    right:0px;
    bottom:auto;
    left:0px;
    border:1px dashed black;
    color:#FFF;
    background-color:#5f6062;
    text-align:center;
    line-height:3;  
}
aside{
    position:fixed;
    width:200px;
    height:auto;
    top:100px;
    right:auto;
    bottom:100px;
    left:0px;
    border:1px dashed black;
    background-color:#f6edc6;
    text-align:center;
    line-height:3;      
}
section{
    position:fixed;
    width:auto;
    height:auto;
    top:100px;
    right:0px;
    bottom:100px;
    left:200px;
    border:1px dashed black;
    background-color:#fde8ed;
    text-align:center;
    line-height:3;  
    overflow:auto;  
}
footer{
    position:fixed;
    width:100%;
    height:100px;
    top: auto;
    right:0;
    bottom:0;
    left:0px;
    border:1px dashed black;
    background-color:#f0ede4;
    text-align:center;
    line-height:3;      
}
</style>
</head>
<body>            
<header>Header</header>
<aside>侧栏</aside>
<section>Subject content</section>
<footer>页脚</footer>     
</body>
</html>

4. Adsorption positioning sticky

​ Sticky is a new keyword in CSS3. The object follows the normal flow when it is normal. That is, when the object is displayed normally on the screen, it is typed according to the normal flow. When it is scrolled out of the screen, it behaves like fixed. The performance of this attribute is the adsorption effect we see in reality.

​ Sticky follows the document flow when positioned on the screen for normal display. However, when the scroll bar moves and may roll to the outside of the screen, it will show a fixed adsorption effect.

<!DOCTYPE html>
<html>
<head>
<title>Adsorption positioning</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:static; /*static positioning*/
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:sticky; /*adsorption positioning*/
    top:60px;
    left:100px;
    background:#cef091;
    color:#000;
}
#div3{
    position:static; /*static positioning*/
    background:#70c17f;
    color:#FFF;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2"><p>div2</p></div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.1.4 Hierarchical presentation of z-index

Basic syntax:

z-index: auto | number;

​ Grammar description:

  • auto: The element's stacking level in the current stacking context is 0. An element does not create a new local stacking context unless it is the root element.

  • Number: Use an integer value to define the stacking level. The smaller the value of z-index, the lower the level of the BOX. It is in the lower layer when stacking occurs, and vice versa. If the z-index of two elements is the same, it will be determined according to the order of appearance, and the element that appears later will be stacked on top.

<!DOCTYPE html>
<html>
<head>
<title>Stacking order</title>
<style type="text/css">
div{
    position:staic;
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:absolute; /*Absolute positioning*/
    z-index:2; /*Stacking order*/
    top:0px;
    left:50px;
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:absolute; /*Absolute positioning*/
    z-index:6; /*Stacking order*/
    top:50px;
    left:10px;
    background:#cef091;
    color:#000;
}
#div3{
    position:absolute; /*Absolute positioning*/
    z-index:4; /*Stacking order*/
    top:60px;
    left:150px;
    background:#70c17f;
    color:#FFF;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2"><p>div2</p></div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.1.5 Cut clip

Basic syntax:

clip：auto | <shape>
<shape>：rect(<number>|auto <number>|auto <number>|auto <number>|auto)

​ Grammar description:

  • auto: Default, no cropping.

  • rect( <number>|auto <number>|auto <number>|auto <number>|auto): Provides four offset values ​​calculated with the upper left corner of the object as (0,0) coordinates in the order of top-right-bottom-left. Any of these values ​​can be replaced with auto. , that is, this edge is not cut.

  • Cropping in the "top-left" orientation: start cropping from 0 until the set value, that is, the auto value of the "top-left" orientation is equal to 0; cropping in the "right-bottom" orientation: start cropping from the set value until the end The auto values ​​for the right and bottom sides, that is, the "right-bottom" orientation, are the actual width and height of the box.

<!DOCTYPE html>
<html>
<head>
<title>裁切</title>
<style>
div{
    position:absolute; /*Absolute positioning*/
    width:180px;
    height:60px;
    font-size:24px;
    line-height:2;
    background:#cef091;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    left:20px;
    top:20px;
}
#div2{
    left:220px;
    top:20px;
    clip:rect(0px auto 50px 40px); /*Crop*/
}
</style>
</head>
<body>
<div id="div1">Uncropped effect</div>
<div id="div2">The effect after being cropped</div>
</body>
</html>

3.2 CSS layout properties

The CSS layout (Layout) property controls how HTML elements to which CSS style rules have been applied interact with other elements on the page. For example, hide elements, set the floating effect of elements, set overflow attributes to determine whether scroll bars can appear, etc.

3.2.1 Visibility

Basic syntax:

visibility: visible | hidden | collapse;

​ Grammar description:

  • visible: The element is visible.

  • hidden: The element is hidden, but the element retains the original space it occupies, affecting the layout of the page.

  • collapse: Mainly used to hide rows or columns of tables. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden.

<!DOCTYPE html>
<html>
<head>
<title>Visibility</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    visibility:visible; /*visible*/
    background:#ba9578;
    color:#FFF;
}
#div2{
    visibility:hidden; /*hide*/
    background:#cef091;
    color:#000;
}
#div3{
    background:#70c17f;
}
.vc{
    visibility:collapse; /*Hide table rows and columns*/
}
</style>
</head>
<body>            
<div id="div1"><p>显示</p></div>
<div id="div2"><p>Hide</p></div>
<div id="div3">
<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    <td>Cell 3</td>
    </tr>
        <tr class="vc">
        <td>Cell 4</td>
        <td>Cell 5</td>
    <td>Cell 6</td>
    </tr>
        <tr>
        <td class="vc">Cell 7</td>
        <td>Cell 8</td>
    <td>Cell 9</td>
    </tr>
</table>
</div>      
</body>
</html>

3.2.2 overflow

Basic syntax:

overflow：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;
overflow-x：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;
overflow-y：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;

​ Grammar description:

  • visible: Do not handle overflow content, and the content may exceed the container.

  • hidden: Hides the content of the overflow container and does not appear scroll bars.

  • scroll: Scroll bars appear regardless of overflow.

  • auto: The scroll bar does not appear when the content does not overflow the container. The scroll bar appears when the content overflows the container. The scroll bar appears on demand. This is the default value for body elements and textarea.

  • The page-x, page-y, page-x-controls, page-y-controls and fragments attribute values ​​are all newly added to CSS3. Currently, they are not supported by mainstream browsers and will not be described in detail.

<!DOCTYPE html>
<html>
<head>
<title>Overflow</title>
<style type="text/css">
div{
    width:200px;
    height:100px;
    margin:30px 5px ;
    padding:5px;
    border:1px solid #000;
    text-align:center;
    float:left;
    background:#daf6f7;
}
#div1{
    overflow:visible; /*The overflow content is visible and will not be processed*/
}
#div2{
    overflow:hidden; /*Hide the contents of the overflow container without scroll bars*/
}
#div3{
    overflow:scroll; /*There are scroll bars regardless of overflow or not*/
}
#div4{
    overflow:auto; /*Scroll bars appear as needed*/
}
</style>
</head>
<body>            
<div id="div1">
Shoudelian opens the knot and travels. <br />About the orchid boat on the water chestnut leaves. <br />When I came to Pukou, the clouds were flowing,<br />
Pick up the moon-filled building by the river. <br />The flowers are silent and the water is empty. <br />Every year I have to worry about the flowers. <br />
In the Ming Dynasty, if the west wind blows,<br />I will fight for the beauty and cannot bear the autumn.
</div>  
<div id="div2">
Shoudelian opens the knot and travels. <br />About the orchid boat on the water chestnut leaves. <br />When I came to Pukou, the clouds were flowing,<br />
Pick up the moon-filled building by the river. <br />The flowers are silent and the water is empty. <br />Every year I have to worry about the flowers. <br />
In the Ming Dynasty, if the west wind blows,<br />I will fight for the beauty and cannot bear the autumn.
</div>
<div id="div3">
Shoudelian opens the knot and travels. <br />About the orchid boat on the water chestnut leaves. <br />When I came to Pukou, the clouds were flowing,<br />
Pick up the moon-filled building by the river. <br />The flowers are silent and the water is empty. <br />Every year I have to worry about the flowers. <br />
In the Ming Dynasty, if the west wind blows,<br />I will fight for the beauty and cannot bear the autumn.
</div>
<div id="div4">
Shoudelian opens the knot and travels. <br />About the orchid boat on the water chestnut leaves. <br />When I came to Pukou, the clouds were flowing,<br />
Pick up the moon-filled building by the river. <br />The flowers are silent and the water is empty. <br />Every year I have to worry about the flowers. <br />
In the Ming Dynasty, if the west wind blows,<br />I will fight for the beauty and cannot bear the autumn.
</div>              
</body>
</html>

3.2.3 display display

Basic syntax:

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box| flexbox | inline-flexbox| flex| inline-flex;

​ Grammar description:

  • none: Hidden object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for the hidden object.

  • inline: Specifies the object as an inline element. block: Specify the object as a block-level element. list-item: Specifies the object as a list item. inline-block

  • Specifies that the object is an inline block element. table: Specifies the object as a table at the block element level. Similar to the html tag <table>.

  • inline-table: Defines the object as an inline element-level table. Similar to the html tag <table>.

  • table-caption: Specify the object as the table title. Similar to the html tag <caption>.

  • table-cell: Specifies the object as a table cell. Similar to the html tag <td>.

  • table-row: Specifies the object as a table row. Similar to the html tag <tr>.

  • table-row-group: Specify the object as a table row group. Similar to the html tag <tbody>.

  • table-column: Specify the object as a table column. Similar to the html tag <col>.

  • table-column-group: Specifies the object to be displayed as a table column group. Similar to the html tag <colgroup>.

  • table-header-group: Specify the object as the table header group. Similar to the html tag <thead>.

  • table-footer-group: Specify the object as the table footer group. Similar to the html tag <tfoot>.

  • run-in: CSS3 new keyword, which determines whether the object is an inline object or a block-level object based on the context.

  • box: A new keyword in CSS3 to display the object as a flexible box (the oldest version of the flexible box)

  • inline-box: A new keyword in CSS3 that displays the object as an inline block-level elastic box (the oldest version of the elastic box).

  • Flexbox: A new keyword in CSS3 to display the object as a flexible box (transitional version of the flexible box).

  • inline-flexbox: A new keyword in CSS3 that displays the object as an inline block-level flexible box (transitional version of the flexible box).

  • Flex: A new keyword in CSS3 to display the object as a flexible box (the latest version of the flexible box).

  • inline-flex: CSS3 adds a new keyword to display the object as an inline block-level elastic box (the latest version of the elastic box).

<!DOCTYPE html>
<html>
<head>
<title>table constructed by display</title>
<!--
<style type="text/css">
body{
    font-size:13px;
    line-height:1.5;
    text-align:center;
}
.table{
    display:table; /*Display as table*/
    margin:0 car;
    border-collapse:collapse;
    border:1px solid #ccc;
}
.table-caption{
    display:table-caption; /*Display as table title*/
    font-size:16px;
    text-align:center;
}
.table-header-group{ /*Displayed as table header row*/
    display:table-header-group;
    background:#eee;
    font-weight:bold;
}
.table-row-group{ /*Displayed as table row group*/
    display:table-row-group;
}
.table-row{
    display:table-row; /*Display as table row*/
}
/*The background color of the table rows in the table row group is light yellow when the mouse passes over it#ffffcc*/
.table-row-group .table-row:hover{     
    background:#ffffcc; 
}
.table-cell{
    display:table-cell; /*Display as table cell*/
    padding:0 5px;
    border:1px solid #ccc;
    width:100px;
}
</style>
-->
</head>
<body>
<div class="table">
    <h2 class="table-caption">Student information table</h2>
    <div class="table-header-group">
        <ul class="table-row">
            <li class="table-cell">学号</li>
            <li class="table-cell">姓名</li>
            <li class="table-cell">年龄</li>
        </ul>
    </div>
    <div class="table-row-group">
        <ul class="table-row">
            <li class="table-cell">201677001</li>
            <li class="table-cell">袁天一</li>
            <li class="table-cell">19</li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">201677002</li>
            <li class="table-cell">马丽娜</li>
            <li class="table-cell">18</li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">201677003</li>
            <li class="table-cell">侯雨欣</li>
            <li class="table-cell">20</li>
        </ul>
    </div>
</div>
</body>
</html>

3.2.4 float float

Basic syntax:

float: none | left | right

​ Grammar description:

  • none: Set the element not to float;

  • left: Set the element to float on the left;

  • right: Set the element to float on the right.

<!DOCTYPE html>
<html>
<head>
<title>Floating</title>
<style type="text/css">
section{
    width:500px;
    height:120px;
    border:1px solid #000;
    margin:10px;
    background:#f3de83;
}
h1,h2,h3{
    background:#daf6f7;
    margin:10px;
    padding:5px;
    border:1px solid #000;
    font-size:14px;
    text-align:center;
    height:auto;
}
h1{
    width:60px;
}
h2{
    width:100px;
}
h3{
    width:150px;
}
.float_none{
    float:none; /*No floating*/
}
.float_left{
    float:left; /*float on the left*/
}
.float_right{
    float:right; /*float on the right*/
}
</style>
</head>
<body>
<!--The floating method of the three boxes in the first group: no floating-->            
<section>
<h1 class="float_none">H1</h1>
<h2 class="float_none">H2</h2>
<h3 class="float_none">H3</h3>
</section>
<!--The floating method of the second group of three boxes: the first two float on the left, the third one floats on the right-->     
<section>
<h1 class="float_left">H1</h1>
<h2 class="float_left">H2</h2>
<h3 class="float_right">H3</h3>
</section>
<!--The floating method of the three boxes in the third group: floating on the right-->     
<section>
<h1 class="float_right">H1</h1>
<h2 class="float_right">H2</h2>
<h3 class="float_right">H3</h3>
</section>
</body>
</html>

3.2.5 Clear clear

Basic syntax:

clear: none | left | right | both;

​ Grammar description:

  • none: Allows floating elements on both sides.

  • both: No floating elements are allowed.

  • left: No floating elements are allowed on the left.

  • right: No floating elements are allowed on the right.

<!DOCTYPE html>
<html>
<head>
<title>Clear float</title>
<style type="text/css">
section{
    width:500px;
    height:120px;
    border:1px solid #000;
    margin:10px;
    background:#f3de83;
}
h1,h2,h3{
    background:#daf6f7;
    margin:10px;
    padding:5px;
    border:1px solid #000;
    font-size:14px;
    text-align:center;
    height:auto;
}
h1{
    width:60px;
}
h2{
    width:100px;
}
h3{
    width:150px;
}
h4{
    width:200px;
    padding:10px;
    background:#f9aa9d;
    border:2px dashed #000;
    font-size:14px;
    text-align:center;      
}
p{
    font:13px/1.5 Song Dynasty;
}
.float_none{
    float:none; /*No floating*/
}
.float_left{
    float:left; /*float on the left*/
}
.float_right{
    float:right; /*float on the right*/
}
.clear_both{ /*Clear floats on both sides*/
    clear:both;
}
</style>
</head>
<body>
<!--The floating method of the first group of 4 boxes: the first two are floating on the left, the third is floating on the right, and the fourth is not floating-->     
<section>
<h1 class="float_left">H1 float left</h1>
<h2 class="float_left">H2 float left</h2>
<h3 class="float_right">H3 float right</h3>
<h4 class="float_none">H4 does not float</h4>
</section>
<!--The floating method of the second group of three boxes: the first two are floated on the left, the third one is floated on the right, and the paragraph is not floated-->     
<section>
<h1 class="float_left">H1 float left</h1>
<h2 class="float_left">H2 float left</h2>
<h3 class="float_right">H3 float right</h3>
<p>Paragraph text does not float, and does not clear the floating effect. Paragraph text does not float, and does not clear the floating effect. Paragraph text does not float, and does not clear the floating effect. Paragraph text does not float, and does not clear the floating effect. </p>
</section>
<!--The floating method of the third group of 4 boxes: the first two are floating on the left, the third is floating on the right, the fourth is not floating and is not allowed to float on both sides-->     
<section>
<h1 class="float_left">H1 float left</h1>
<h2 class="float_left">H2 float left</h2>
<h3 class="float_right">H3 float right</h3>
<h4 class="float_none clear_both">H4 does not float, clear floats on both sides</h4>
</section>
<!--The floating method of the fourth group of three boxes: the first two are floated on the left, the third one is floated on the right, and the paragraph is cleared to float -->     
<section>
<h1 class="float_left">H1 float left</h1>
<h2 class="float_left">H2 float left</h2>
<h3 class="float_right">H3 float right</h3>
<p class="clear_both">Paragraph text does not float, except when the floating left and right sides move. Paragraph text does not float, except for the floating effect when the left and right sides are moved. Paragraph text does not float, except for the floating effect when the left and right sides are moved. Paragraph text does not float, except for the floating effect when the left and right sides are moved. </p>
</section>
</body>
</html>

 

3.3 Web page layout method

​ Web page layout is the basis of web design and production. It arranges the images, text, videos and other page elements in the web page to the best position according to certain rules.

​ Splitting and organizing the page into chunks, and conveying important information to make the page easier to read and make the page more friendly and usable are the most important goals of web design. The content in a web page can be regarded as "boxes (rectangular blocks)" one by one. Multiple "boxes" are organized in rows and columns to form a web page.

3.3.1 DIV+CSSLayout

​ DIV is the most commonly used box in web page layout. Currently, DIV+CSS is a more effective way of positioning and layout. This method of typesetting has the characteristics of flexibility, easy operation, and powerful functions. It is increasingly used in web page layout. middle.

​ DIV is a mark in the HTML language and a commonly used block container element; CSS is a computer language used to express the style of HTML elements. The DIV element is used to divide page content into blocks, and CSS controls the style of these blocks.

Of course, this does not mean that layout can only use DIV+CSS. Broadly speaking, it should be "BOX+CSS". DIV is just the most commonly used box in layout. HTML5's new structural tags <header> and <footer> , <nav>, <aside>, <section>, etc. are all very practical BOX for layout.

<!DOCTYPE html>
<html>
<head>
<title>div block example</title>
<style type="text/css">
/*Set styles for all elements*/
*{ 
    margin:0 car;
    box-sizing:border-box;
    
}
/*Set body element style*/
body{
    padding:0px;
    margin:0px;
    text-align:center;
}
/*Outer parent div style*/
#container{
    width:980px;
    border:1px solid black;
}
/*Three layers of upper, middle and lower styles*/
#top{
    width:100%;
    height:100px;
    padding:10px;
        background-color:#FFFFCC;
}
#main{
    width:100%;
    height:380px;
    padding:10px;
    background-color:#FFFFFF;
}
#foot{
    width:100%;
    height:auto;
    padding:30px;
    background-color:#BBE9E0;
    font-size:20px;
}
/*Header left and right columns*/
#logo{
    width:200px;
    height:80px;
    float:left; 
    font-size:20px;
    background-color:#FF9391;
    padding-top:30px;
}
#search{
    width:750px;
    height:80px;
    float:right; 
    font-size:20px;
        background-color:#F4ECE8;
    padding-top:30px;
}
/*The main part is divided into three horizontal columns*/  
#left{
    width:200px;
    height:360px;
    font-size:20px;
        background-color:#F4ECE8;
    float:left;
    padding-top:40px;
}
#center{
    width:540px;
    height:360px;
    float:left;
    margin-left:10px;   
    font-size:20px;
    background-color:#FF9391;
    padding-top:40px;
}
#right{
    width:200px;
    height:360px;
    float:right;
    color:#FFFEFF;
    font-size:20px;
    background-color:#63433F;
    padding-top:40px;
}
​
</style>
</head>
<body>
<!--global parent div-->
<div id="container">                 
    <!--Header div-->
    <div id="top">               
        <div id="logo">logo</div>
        <div id="search">Search</div>
    </div>
    <!--Main content area-->
    <div id="main">                  
        <div id="left">Left column: content classification</div>
        <div id="center">Middle column: content recommendation</div>
        <div id="right">Right column: site announcement</div>
    </div>
        <!--footer div-->
    <div id="foot">footer</div>
</div>
</body>
</html>

Implementation steps:

1. Divide the page into blocks using divs

​ First, consider how to use divs to divide it into blocks as a whole, that is, consider that the web page needs to be divided into several parts, and the main content or functions displayed in each part.

Web page layout can usually adopt a top-middle-bottom structure, a left-right structure, or a three-column structure. For example, if you use a top-middle-bottom structure, you can first divide the page into three blocks, and arrange them from top to bottom into header blocks, body blocks, and footer blocks. Put these three blocks in a parent div to facilitate overall adjustment and later development. Typesetting maintenance, and finally adjusting the number and layout of sub-blocks included in the block according to the specific content.

2. Design the location of each block

By using CSS syntax, div blocks can be positioned and styled.

3. Design the details of each block

After the block division is completed, you need to design the details of each block. Of course, the details in each div are also various boxes. The whole design can be completed by layout design of these boxes in blocks.

3.4 Design hyperlink/menu style

Hyperlink is a frequently used HTML element in web pages, because various pages of the website are connected by hyperlinks. The hyperlinks studied in the HTML part mainly start from its functions and link forms. Before formally learning the layout in this chapter, we need to understand the styles of hyperlinks, especially the hyperlinks in the navigation part.

3.4.1 Hyperlink style transformation

3.4.2 Button hyperlink

​ There are various button hyperlinks on many web pages. These effects generally use pictures as buttons. Picture links are not easy for search engines to retrieve keywords. This section uses CSS styles to create button effects.

<!DOCTYPE html>
<html>
<head>
<title>Button link</title>
<style type="text/css">
body{
    text-align:center;
}
/* Navigation bar style settings*/
#navi{
    font-size:14px;
    margin:0 car;
    width:960px;
}
/*Setting the style of some links in the navigation bar*/
#navi a{ /*Link universal style*/
    display:block; /*Display as block-level element*/                          
    float:left; /*float on the left*/
    width:100px; /*100 pixels wide*/
    color:white; 
    font-family: Microsoft YaHei, HeiTi, SongTi;
    text-decoration:none; /*No underline*/
    margin:2px; /*Button margins*/   
    padding:6px 15px;
    border-radius:2px;
}
#navi a:link,#navi a:visited{ /* Unvisited and visited link styles*/
    background:linear-gradient(#684621,#ddaf7c); /*Gradient background*/
    /* The upper left border has the same color and the lower right border has the same color */
    border-top:#cccccc 1px solid;
    border-left:#cccccc 1px solid;
    border-right:#0d0503 1px solid;
    border-bottom:#0d0503 1px solid;    
}
#navi a:hover{ /* Hyperlink when the mouse passes over it*/         
    background:#724b20;
    /* Swap the colors of the upper left border and lower right border */
    border-bottom:#cccccc 1px solid;
    border-right:#cccccc 1px solid;
    border-left:#0d0503 1px solid;
    border-top:#0d0503 1px solid;
}
</style>
</head>
<body>
<div id="navi">
    <a href="#">Back to homepage</a>
    <a href="#">Center Overview</a>
    <a href="#">Organization</a>
    <a href="#">Talent Team</a>
    <a href="#">Innovative direction</a>
    <a href="#">Talent development</a>
    <a href="#">Policy document</a>
</div>
</body>
</html>

3.4.3 Using lists to create menus

​ When the bullets of the list are set to none through list-style-type, a variety of menus and navigation bars can be created. This is also one of the biggest uses of lists. Unexpected navigation can be achieved by combining the transformation of CSS attributes. Effect.

3.4.3.1 Use lists to create vertical menus

<!DOCTYPE html>
<html>
<head>
<title>Create a vertical menu with a list</title>
<style type="text/css">
body{
    background-color:#6cc1ea;
    text-align:center;
}
/*Navigation menu style settings*/
#navi{ /*Navigation box style*/
    width:160px;
    font:14px Microsoft Yahei, bold, Song font;
    margin:0 car;
}
#navi ul { /*Style of list in navigation bar*/
    list-style-type:none; /* No bullets*/
    padding:0px;
}
#navi li { /*Style of list items in navigation bar*/
    border-bottom:1px solid #6cc1ea; /* Add a divider*/
    width:160px;
}
#navi li a{ /*Link universal style*/
    display:block; /* block display*/
    padding:10px;
    text-decoration:none; /* No underline*/   
    border-left:20px solid #0f155f; /* thick border on the left*/
    border-right:1px solid #0f155f; /* right border*/
    color:white;
}
#navi li a:link, #navi li a:visited{  
        background-color:#353eae; /*Background color of visited and unvisited links*/
}
#navi li a:hover{               
        background-color:#2d3494; /* Change the background color when the mouse passes over the link*/
}
</style>
</head>
<body>
<div id="navi">
    <ul>
        <li><a href="#">Baika Mall</a></li>
        <li><a href="#">Latest events</a></li>
        <li><a href="#">Brand Story</a></li>
        <li><a href="#">Member Center</a></li>
        <li><a href="#">Store information</a></li>
        <li><a href="#">Reservation Center</a></li>
        <li><a href="#">Official Weibo</a></li>
    </ul>
</div>
</body>
</html>

3.4.3.2 Use lists to create horizontal menus

​ Compared with the vertical menu, the most important change is that the vertical menu becomes a horizontal menu. Here you need to use the floating attribute float and display each list item horizontally through "float: left;".

<!DOCTYPE html>
<html>
<head>
<title>Create a horizontal menu with a list</title>
<style type="text/css">
body{
    background-color:#6cc1ea;
    text-align:center;
}
/*Navigation menu style settings*/
#navi{ /*Navigation box style*/
    width:960px;
    font:14px Microsoft Yahei, bold, Song font;
    margin:0 car;
}
#navi ul { /*Style of list in navigation bar*/
    list-style-type:none; /* No bullets*/
    padding:0px;
}
#navi li { /*Style of list items in navigation bar*/
    float:left;
    width:130px;
    margin:3px;
}
#navi li a{ /*Link universal style*/
    display:block; /* block display*/
    padding:10px;
    text-decoration:none; /* No underline*/   
    border-left:20px solid #0f155f; /* thick border on the left*/
    border-right:1px solid #0f155f; /* right border*/
    color:white;
}
#navi li a:link, #navi li a:visited{  
        background-color:#353eae; /*Background color of visited and unvisited links*/
}
#navi li a:hover{               
        background-color:#2d3494; /* Change the background color when the mouse passes over the link*/
}
</style>
</head>
<body>
<div id="navi">
    <ul>
        <li><a href="#">Baika Mall</a></li>
        <li><a href="#">Latest events</a></li>
        <li><a href="#">Brand Story</a></li>
        <li><a href="#">Member Center</a></li>
        <li><a href="#">Store information</a></li>
        <li><a href="#">Reservation Center</a></li>
        <li><a href="#">Official Weibo</a></li>
    </ul>
</div>
</body>
</html>

3.5 Board layout

​ The layout of web pages is mainly realized through CSS. This section learns commonly used layouts, mainly introducing basic single-column layout, two-column layout, three-column layout and banner layout. Other complex layouts can be expanded and changed on this basis. .

3.5.1 Version design and layout process

When it comes to layout, we have to mention the "center of the page", because most of the layout in web pages needs to be completed within the "center of the page", which is similar to the "center of the page" in paper media. The so-called "center of the page" refers to the area where the main content of the web page is located. The "center of the page" is generally displayed horizontally and centered in the browser window. Common width values ​​are 960px, 980px, 1000px, etc.

​ When laying out, you usually need to follow a certain layout process:

  1. Determine the layout of the page.

  2. Analyze the row modules in the page and analyze the column modules within each row module.

  3. Control the style of each module through DIV+CSS layout.

3.5.2 Single column layout

​ Single-column layout is the basis of web page layout, and all complex layouts can be evolved on this basis.

/*File 3_5_2.css*/
/*Set body element style*/
body{
    margin:0px;
    text-align:center;
    font:20px/2 Microsoft Yahei, bold, Song font;
}
div{
    border:1px solid #000;
    margin:5px;
}
#container{ /*Outer parent div style*/
    margin:0 car;
    width:980px;
}
#top{ height:90px; }
#navi{ height:40px; }
#focus{ height:210px; }
#main{ height:200px; }
#foot{ height:80px; }

 

<!DOCTYPE html>
<html>
<head>
<title>Single column layout diagram</title>
<link href="3_5_2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container"> <!--global parent div-->              
    <div id="top">Header#top</div>               
    <div id="navi">Navigation#navi</div>
    <div id="focus">焦点#focus</div>
    <div id="main">Main content #main</div>
    <div id="foot">页脚#foot</div>
</div>
</body>
</html>

3.5.3 Two-column layout

​ The single-column layout is simple, clear, unified and orderly, but sometimes it is a bit dull, and when the amount of information is large, the area division will not be fine enough. In this case, you can consider using a two-column layout. The two-column layout is similar to the one-column layout, except that the web content is divided into left and right parts.

/*File:3_5_3.css*/
body{
    margin:0px;
    text-align:center;
    font:20px/2 Microsoft Yahei, bold, Song font;
}
div{  
    border:1px solid #000;
    margin:9px;
}
#container{                 
    margin:0 car;
    width:960px;
}
#top{ height:180px;}
#navi{ height:30px; }
#main{ height:540px; }
#left{
    float:left;
    width:200px;
    height:360px;
}
#right{
    float:right;
    width:700px;
    height:520px;
}
#foot{ padding:20px;}

 

<!DOCTYPE html>
<html>
<head>
<title>Two column layout</title>
<link href="3_5_3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
    <div id="top">Header#top</div>
    <div id="navi">Horizontal navigation bar#navi</div>
    <div id="main">
        <div id="left">Left navigation bar#left</div>
        <div id="right">Right content#right</div>
    </div>
    <div id="foot">页脚#foot</div>
</div>
</body>
</html>

3.5.4 Three-column layout

​ For some large websites, due to the large number of content categories, it is usually necessary to adopt the "three-column layout" page layout method. In essence, there is not much difference between the three-column layout and the two-column layout, except that the main content is divided into three columns: left, middle, and right.

/*File:3_5_4.css*/
/*body style*/
body{
    margin:0px;
    text-align:center;
    font:28px/2 Microsoft Yahei, bold, Song font;
}
div{
    border:1px solid #000;
    margin:5px;
}
/*Style of parent container #container*/
#container{
    margin:0 car;
    width:960px;
    height:1100px;
}
​
#top{ height:100px; }
#focus{ height:200px;}
#navi{ height:50px; }
#main{ height:540px; }
#left,#center,#right{ /*Styles of three sub-divs in the main content area*/
      float:left;
      width:290px;
      height:500px;
      margin:10px;
}
#foot{ height:150px;}

 

<!DOCTYPE html>
<html>
<head>
<title>Three-column layout</title>
<link href="3_5_4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="top">Header#top</div>  
	<div id="focus">焦点#focus</div>             
	<div id="navi">Navigation#navi</div>
	<div id="main">
    	<div id="left">Left column of main content area#left</div>
		<div id="center">Middle column of main content area #cener</div>
		<div id="right">Right column of main content area#right</div>
    </div>
	<div id="foot">页脚#foot</div> 
</div>
</body>
</html>

3.5.5 Banner layout

​ One of the more popular methods on mainstream websites is to display some horizontal modules, such as headers, navigation, focus images or footers, as banners.

​ In this section, we transform the previous single-column layout and three-column layout cases into a column layout. There are almost no changes to the HTML file here. We focus on the CSS file. We can no longer use the parent layer #container, set the margin and width attributes for each horizontal box, and set the width of the banner to 100%. Of course, in some cases, #container is also retained and set to 100%. Readers can decide these details during design.

/*File:3_5_5.css*/
/*Set body element style*/
body{
	margin:0px;
	text-align:center;
	font:20px/2 Microsoft Yahei, bold, Song font;
}
#top{
	width:100%;
	height:90px;
	background:#FF9; 
}
#navi{
	margin:0 car;
	width:980px; 
	height:40px; 
	background:#F66;
}
#focus{
	margin:0 car;
	width:980px;
	height:210px;
	background:#FC9;
}
#main{ 
	margin:0 car;
	width:980px;
	height:200px;
	background:#FF3; 
}
#foot{
	width:100%; 
	height:80px; 
	background:#F96;	
}

 

<!DOCTYPE html>
<html>
<head>
<title>Single column banner layout layout illustration</title>
<link href="3_5_5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="top">Header#top</div>               
<div id="navi">Navigation#navi</div>
<div id="focus">焦点#focus</div>
<div id="main">Main content #main</div>
<div id="foot">页脚#foot</div>
</body>
</html>

 

/*File:3_5_5_2.css*/
/*body style*/
body{
	margin:0px;
	text-align:center;
	font:28px/2 Microsoft Yahei, bold, Song font;
}
/*Style of parent container #container*/
#container{
	margin:0;
	width:100%;
	height:1100px;
}

#top{ 
	height:100px;
	background:#cef091;
}
#focus{
	height:200px;
	background:#70c17f;
}
#navi{
	height:50px;
	background:#cef091; 
}
#main{
	margin:0 car;
	width:960px; 
	height:540px; 
	background:#7c5e46;
}
#left,#center,#right{ /*Styles of three sub-divs in the main content area*/
	  float:left;
      width:290px;
      height:500px;
	  margin:15px;
	  background:#f3de47;
}
#foot{ 
	height:150px;
	background:#cef091;
}

 

<!DOCTYPE html>
<html>
<head>
<title>Three-column banner layout structure</title>
<link href="3_5_5_2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="top">Header#top</div>  
	<div id="focus">焦点#focus</div>             
	<div id="navi">Navigation#navi</div>
	<div id="main">
    	<div id="left">Left column of main content area#left</div>
		<div id="center">Middle column of main content area #cener</div>
		<div id="right">Right column of main content area#right</div>
    </div>
	<div id="foot">页脚#foot</div> 
</div>
</body>
</html>

 

 

4. Summary of this chapter

4.1 Summarize the knowledge points in this chapter

4.2 Answers to interview questions

4.2.1 What is a flow model?

​Normal flow direction (flow model) is a preset positioning method. By default, the web page layout is based on the normal flow of the document flow, that is, in the structural order of HTML. The direction from top to bottom and from left to right is the so-called normal flow direction, and the browser also interprets our encoding based on this direction.

4.2.2 What are the basic layout methods in web pages?

​ Basic layout methods in web pages: single-column layout, two-column layout, three-column layout, and banner layout.

 

5. Computer practice

5.1 Task 1

5.2 Task 2

5.3 Task 3

5.4 Task 4

 

 

Guess you like

Origin blog.csdn.net/woshishq1210/article/details/95050493
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com