By implementing pages in the design model, you can gain a deep understanding of the background knowledge and positioning of CSS.
The design model diagram is as follows:
I. design requirements:
The design is stream (fluid) or easy to change, that is to say, its height and width should be able to adapt to the user's browser, while maintaining the necessary proportion. The specific requirements are as follows:
1) Each image on the left must be fixed in the original position;
2) the tree and logo must be able to move to the right, that is, the tree must always be associated with the bottom of the layout;
3) on the hierarchy, the tree must be at the bottom of the logo and other sections, and the picture module on the left is at the top of the hierarchy.
Ii. Basic concepts of CSS Background:
First look at the CSS code of a background attribute:
body{ background: #1299AB url(images/myBackground.gif) no-repeat fixed 10% 50px;}
The background of CSS can be divided into five independent attributes: color, image, repetition, appending, and position. The following describes three attributes: Repetition, appending, and location.
1. Repetition: The repetition Property specifies the repetition of the image, which has several valid values: n0-repeat (not repeated, the image is only generated once ), repeat-X (repeating from left to right in the horizontal direction), repeat-y (repeating the image from the top of the element along the Y axis), repeat (default attribute value, tile the entire element from the upper left corner of the element ).
2. Additional: the additional property defines whether the calculation of the "location" attribute is related to the page content or browser's viewport. Therefore, it has two valid values: fixed and scroll (default ). Fixed can specify that the background image will remain unchanged, while scroll means that the background image will move along with the rest of the page.
3. Position: This attribute defines the starting X and Y coordinates of the background image. Keywords used to determine the horizontal direction of the X coordinate of the background image include left (default), center, and right. keywords used to determine the vertical direction of the Y coordinate of the background image include top (default), center, bottom; other valid options include relative value (percentage) or absolute value (PX/EM/MM/Pt ).
3. html page
Return to the instance and write the following HTML code based on the design model:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">The HTML code is interpreted as follows:
Iv. CSS code
The CSS code written for the preceding page is as follows:
/* CSS style sheet for [a homepage for CSS-based setting] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [http://blog.csdn.net/cxwen78#//# * // body style * // the horizontal direction of the background image is repeated. The bottom color of the image is similar to the background color gray # a4a4a4a4, achieving high performance and adaptability, high Efficiency */body {Background: # a4a4a4 URL (images/bg_gradient.gif) Repeat-X;}/* tree Div block style */# tree {position: absolute; /* to fix the DIV in the lower right corner, take absolute positioning */bottom: 0;/* close to the bottom of the page */right: 40px;/* and the right side of the page is 40 PX */B Ackground: URL (images/tree.gif) No-Repeat;/* background image, no duplicates * // * set the width and height of the DIV Based on the image size */width: 331px; height: 400px;}/* style of the logo Div block */# logo {position: absolute;/* absolute positioning */top: 15%;/* use the percentage value to make the logo better adapt to the display */right: 40px;/* and the right side of the page is 40px */width: 334px; Height: 36px; Background: URL (images/logo.gif) No-Repeat;/* Background logo image, no duplicates */Text-indent:-9999em;/* Add the H1 description in HTML to make the page meaningful, set negative text-indent This is reversely transferred out of the page */margin: 0; Z-index: 3;/* elements with a higher Z-index value will overwrite elements with a lower value, place the logo on the upper layer of the tree */}/* style of the DIV block of the introductory section */# intro {position: absolute; top: 15%;/* echo with the logodiv block, place the DIV at a position of 15% */left: 40px from the top;/* 40 px from the left boundary of the Body element */Background: URL (images/d.gif) No-Repeat; /* The first letter D in the paragraph is an image */padding: 5px 0 0 61px;/* to ensure that the text does not overwrite the background image of this Div, add the padding of 61px and 5px to the left and top of the image respectively */width: 250px; color: # FFF; font-family: Georgia, Serif; font-size: 0.8em;}/* to ensure the integrity of the text Deadwood, insert the text letter D to the span element and place it outside the page */# intro span {position: absolute; top: -1000px;/* place the span element outside the page */} # intro P {margin: 0 0 12px 0;}/* the work area of the page, including 6 links, link to different pages to display the style requirements of the portfolio * // *. Design a grid model that spans the entire page and is located under the image of the tree. Therefore, in HTML, the portfolio Div block first corresponds to the tree Div */# portfolio {position: absolute; top: 35%; left: 0; width: 100%; Height: 294px; Background: URL (images/bg_checkered.gif);/* use a 40*40 square image as the grid Sub-background */}/* unordered list show portfolio */ul {position: absolute; top: 35%; left: 40px; padding: 0; Z-index: 4; /* Elements with higher Z-index values will overwrite low-value elements, which will be placed on the upper layers of portfolio and tree */list-style: None inside;/* List style: the list item tag is placed within the text, and the surrounding text is aligned according to the tag. */Width: 482px; Height: 294px; margin: 0;} ul Li {width: 138px; Height: 138px; float: Left; margin: 0 18px 18px 0; Background: URL (images/bg_checkered_dark.gif);/* set an 8*8 pixel lattice image as the background, looks a little darker */}/* link the image area settings */ul Li a {float: Left; width: 102px; Height: 102px; margin: 18px 0 0 18px ;} ul Li a IMG {border: 0 ;}The final result is as follows:
5. Material Images
Reference: The Art & Science of CSS
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
