Home > Developer > Web Develop
Introduction
1. What is a Web page layout
Web page layout is the basis of Web page production, using div+css layout page is the basis of the Foundation.
2. Flow layout, Floating layout, absolute positioning Layout. Related knowledge points: standard document flow, box model, float Property position property, etc.
The standards include structured standard language, performance standard language, behavior standard language, advocating structure, style, and behavior Separation.
css, There are three kinds of positioning mechanisms: standard document flow, floating, absolute positioning.
Standard document Flow
Features: from top to bottom, output document content from left to right
Consists of block-level elements and row-level elements
Block-level elements: pages are filled from left to right, and lines are wrapped when an exclusive line touches the edge of the Page.
Row-level elements: can be displayed in the same row, without altering the structure of the HTML Document.
Box Model: the basis of the layout of a Web page consists of four parts: border (border) margin (margin) padding (padding) the contents of the box (content) in the Web page of the picture, content, audio and video, and so On.
Three-dimensional picture of the box model, from the first layer to the fifth Level: border, content+padding, background-image, background-color, margin.
Use the box model to Create:
Experience:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Introduction to several meters</title>6 <Linkrel= "stylesheet"type= "text/css"href= "css/style.css"><!--Import external CSS styles -7 </Head>8 <Body>9 <Divclass= "content book"> <!--Guide Sample Append -Ten <imgsrc= "images/book1.jpg"width= "a"Height= "a"> one <imgsrc= "images/book2.jpg"width= "a"Height= "a"> a <imgsrc= "images/book3.jpg"width= "a"Height= "a"> - <imgsrc= "images/book4.jpg"width= "a"Height= "a"> - <imgsrc= "images/book5.jpg"width= "a"Height= "a"> the </Div> - </Body> - </HTML>HTML code
img{margin:10px 18px;Border:1px solid #b1adad;}. Content{Border:4px Solid #badbdb;padding:44px 15px 15px;width:700px;}. book{background:URL (.. /images/t_book.gif) no-repeat #eff9f9;/*special attention to reference*/}*{margin:0;padding:0;/*eliminate outer and inner fills of browser settings*/}CSS Code
1. Refer to external CSS styles to add code in
2. about Path:. \ Indicates the directory under the directory where the project file Resides.
.. \ Indicates the directory where the project file is located in the directory up to the top level.
.. \.. \ Indicates the directory where the project file is located under the directory up to level Two.
3.*{margin:0;padding:0; /* eliminate outside padding and padding for browser settings */} eliminate default label padding and padding in the browser
Automatically center a column of layout cases
Master three skill Points: standard document flow, block-level element, margin Property-set Auto Center
Experience: Figure 13 Layers each layer is full page, let the page automatically center, for three blocks set a wrap layer wrap #wrap {width:700px;margin:0px auto;}
Auto automatically sets the margins for both sides automatically based on the width of the browser. Principle: (width of the browser-the width of the outer containing layer)/2= margin if you want the page to be centered automatically, you cannot set the float or absolute positioning property when the margin property is set to Auto.
<Body> <DivID= "wrap"> <DivID= "header"></Div> <DivID= "mainbody"> <Divclass= "content book"> <!--Guide Sample Append - <imgsrc= "images/book1.jpg"width= "a"Height= "a"> <imgsrc= "images/book2.jpg"width= "a"Height= "a"> <imgsrc= "images/book3.jpg"width= "a"Height= "a"> <imgsrc= "images/book4.jpg"width= "a"Height= "a"> <imgsrc= "images/book5.jpg"width= "a"Height= "a"> </Div> </Div> <DivID= "footer"></Div> </Div></Body>CSS block-level element Width will continue to be the parent element width, Adaptive #header {width:100%; height:200px; BORDER:1PX Solid red;} #mainbody {width:100%; height:200px; BORDER:1PX Solid black;} #footer {width:100%; height:200px; BORDER:1PX Solid blue;} #wrap {width:770px;margin:0 auto;}View Code
B. Floating layout case-float properties/methods to resolve floating effects
C. Absolute positioning layout case-absolute positioning enables two or more columns of horizontal Layout.
Web Page Layout ..... To be more (three phases, expected to be completed within two Weeks)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
