Teacher's Notes:
Previously review:
day49 Chaos is the ladder. 1. Previously review HTML HTTP and HTML document bodies<!Doctype HTML>HTML Head<Meta> <title> <Link>icon<style> Direct write CSS style <link> css file <script> js file body Common Tags: Div span H1~h6 A P img Form Input text Password number Email Radio checkbox Sumbit button Reset Select textarea Label ul ol DL Table Tag Property ID class style Input Name value type form to upload the file. Can't remember, but can remember the one (after Class) Select Mutiple Multi-Select Selected default Check optgroup Group display (Label property = Group name) checkbox Checked default check hidden hide input disabled Input Type=text/password readonly---read-only Placehol Der-and tips for CSS: Find a label to modify the style selector (find label): Basic selector Tag Selector #ID选择器. class selector * (embracing) Selector level selector Descendant Selector (space) sub-selector (>) adjacent selector (+)/(label+input) Brother Selector (~) Combination selector (,) propertySelector label can be custom properties [Egon] [egon= ""]/input[type= "button"] Pseudo-class selector a:hover (browser how to see) Selector priority: 1.!important Don't Speak Reason 2. Inline (write style property directly on label) 3.ID selector 4.class Selector 10 5. Tag Selector 1 6. Inherited CSS Properties: Color text background background Background-color background-img Background-position (concrete) font font font-family f Ont-size font-weight line-height (vertical center) text-aligin (horizontal center) Border Border Border-color Border-style borfer-width Border:1px solid red; Border-radius CSS Box Model: content (contents) Padding (inner fill) border (border) magin (margin) margin:0 Auto; (center of Block label) a text-decoration=none (remove underline)
View Code
Today's content:
Float (float) and position (positioning)
Float (floating) left right none floating rule: Float only control yourself if the previous label is also floating, put it next to it if the previous label is not floating, start placing it on the next line Clear float: Clear:left right both None. Clearfix:after {content: ""; Display:block; Clear: "Both"; }: After and: Before display: block-level label features: Exclusive line, can be set long and wide Inline tag features: can be placed on one line, can not be set long and wide, according to the content of the adaptive length and width of none---not show block --Block level inline--and inline inline-block--both on one line and Set length and width positioning: relative (relative positioning) positioning according to their original position () aBsolute (absolute positioning) locates (usually with relative positioning) fixed (fixed positioning) based on the upper left corner of the element that has been positioned relative to ) Z-index modal pop-up box z-index:999 z-index:1000View Code
Day 49-css Supplement (end) [Floating and positioning]