html5与css网页设计基础terry felke-morris著课件英文chapter

1、Basics of Web DesignChapter 7Page Layout BasicsKey Concepts1Copyright 2016 Pearson Education, Inc., Hoboken NJLearning esConfigure float Configure fixed positioning Configure relative positioningConfigure absolute positioning Create two-column page layouts Configure vertical navigation in an unorder

2、ed listConfigure horizontal navigation in an unordered list.Add interactivity to hyperlinks with CSS pseudo-classesConfigure CSS sprites2Copyright 2016 Pearson Education, Inc., Hoboken NJNormal FlowBrowser display of elements in the order they are coded in the Web page documentFigure 7.1Figure 7.2Co

3、pyright 2016 Pearson Education, Inc., Hoboken NJ3float PropertyElements that seem to “float on the right or left side of either the browser window or another element are often configured using the CSS float property.4h1 background-color: #A8C682; padding: 5px; color: #000000; p font-family: Arial, s

4、ans-serif; #yls float: right; margin: 0 0 5px 5px; border: solid; Copyright 2016 Pearson Education, Inc., Hoboken NJclear PropertyUseful to “clear” or terminate a floatValues are left, right, and bothThe h2 text is displayed in normal flow.clear: left; was applied to the h2. Now the h2 text displays

5、 AFTER the floated image.Copyright 2016 Pearson Education, Inc., Hoboken NJ5overflow PropertyConfigures the display of elements on a web page. Useful to “clear” or terminate a float before the end of a container elementValues are auto, hidden, and scrollThe background does not extend as far as youd

6、expect.overflow: auto; was applied to the container div.Now the background extends and the h2 text displays AFTER the floated image.Copyright 2016 Pearson Education, Inc., Hoboken NJ6Basic Two-Column Layout Copyright 2016 Pearson Education, Inc., Hoboken NJ7Basic Two-Column Layout#wrapper width: 80%

7、; margin-left: auto; margin-right: auto; background-color: #EAEAEA; header background-color: #CCCCFF; h1 margin: 0; padding: 10px; nav float: left; width: 150px; padding: 10px; main margin-left: 160px; padding: 10px; background-color: #FFFFFF; footer text-align: center; font-style: italic; backgroun

8、d-color: #CCCCFF; Copyright 2016 Pearson Education, Inc., Hoboken NJ8Vertrical Navigation with an Unordered Listnav Home Menu Directions ContactCSS removes the list marker and underline:nav ul list-style-type: none; nav a text-decoration: none; 9Copyright 2016 Pearson Education, Inc., Hoboken NJdisp

9、lay PropertyConfigures how and if an element is displayed display: none;The element will not be displayed.display: block;The element is rendered as a block element even if it is actually an inline element, such as a hyperlink.display: inline;The element will be rendered as an inline element even if

10、it is actually a block element such as a .10Copyright 2016 Pearson Education, Inc., Hoboken NJHorizontal Navigation with an Unordered ListHTML:nav Home Menu Directions ContactCSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display.nav ul lis

11、t-style-type: none;nav a text-decoration: none; padding-right: 10px; nav li display: inline; 11Copyright 2016 Pearson Education, Inc., Hoboken NJCSS Pseudo-classesPseudo-classes and the anchor element:link default state for a hyperlink :visited a hyperlink that has been visited:focus triggered when

12、the hyperlink has focus:hover triggered whenthe mouse moves over the hyperlink:active triggered when the hyperlink is being clicked a:link color:#000066; a:visited color:#003366; a:focus color:#FF0000; a:hover color:#0099CC; a:active color:#FF0000;Copyright 2016 Pearson Education, Inc., Hoboken NJ12

13、CSSPseudo-classesa:link color: #ff0000; a:hover text-decoration: none; color: #000066; 13Copyright 2016 Pearson Education, Inc., Hoboken NJPosition Property14Copyright 2016 Pearson Education, Inc., Hoboken NJFixed Positioningnav position: fixed; 15Copyright 2016 Pearson Education, Inc., Hoboken NJRe

14、lative PositioningChanges the location of an element in relation to where it would otherwise appear in normal flow16p position: relative; left: 30px; font-family: Arial, sans-serif; Copyright 2016 Pearson Education, Inc., Hoboken NJAbsolute PositioningPrecisely specifies the location of an element o

15、utside of normal flowin in relation to its first parent non-static element17p position: absolute; left: 200px; top: 100px; font-family: Arial, sans-serif; width: 300px; Copyright 2016 Pearson Education, Inc., Hoboken NJCSS SpritesSpritean image file that contains multiple small graphicsadvantage: sa

16、ves download time18Copyright 2016 Pearson Education, Inc., Hoboken NJCSS Debugging TipsManually check syntax errorsUse W3C CSS Validator to check syntax errors Configure temporary background colorsConfigure temporary bordersUse CSS comments to find the unexpected/* the browser ignores this code */Dont expect your pages to look exactly the same in all browsers!Be patient!19Copyright 2016 Pearson Education, Inc., Hoboken NJSummaryThis chapter expanded your CSS skillset.You configured web pages with floating elements with CSS.You were introduced to fixed, relative, and absolute positioning.You c