- Make your own navigation bar.
- HTML Header elements:
- <base> defines the default link address for page link labels
- <style> style files that define HTML documents
- <link> defines a relationship between a document and an external resource
- Practice Style Sheet:
- Inline style sheet
- Inline style sheet
- External style sheet
- Practice defining three categories of selectors, respectively:
- HTML Selectors
- Class Selector
- ID Selector
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <BaseTarget= "_blank"> <title>Title</title> <Linkrel= "stylesheet"href= "T.css"type= "Text/css"> <style>P{Color:Fuchsia; }. KK{Color:Darkcyan;Font-weight:Bold;Font-style:Italic;font-size:20px; }#abc{Color:Darkblue;text-decoration:Underline;font-size:25px; } </style>></Head><Body><nav> <imgsrc= "http://s4.sinaimg.cn/mw690/6e3c5180gd7e41fd99ef3&690"Height= " the"width= " the"> <ahref= "http://www.41vs.com/WerewolfWeb/41vs/TotalFlow.do?website=36041">The werewolf kills the official homepage.</a> <ahref= "http://zhushou.360.cn/detail/index/soft_id/3583525">Install apps with one click</a><BR> <imgsrc= "Http://upload.chinaz.com/2017/0329/17032914121881842.jpg"Height= " the"width= " the"> <ahref="">Login</a> <ahref="">Registered</a> <inputtype= "text"placeholder= "Please enter search content"> <inputtype= "button"value= "Search"></nav><HR><DivID= "Container"style= "width:400px" > <DivID= "header"style= "Background-color:skyblue;"><H2Align= "Center"style= "margin-bottom:0;">Werewolf Kill User Login</H2></Div> <DivID= "Content"style= "Background-color: #EEEEEE; height:210px;width:400px;float:left;text-align:center;"> <form> <BR>User name<inputtype= "text"name= "User"placeholder= "Please enter user account"><BR> <BR>Password<inputtype= "Password"name= "Pass"><BR> <BR><inputtype= "Radio">Normal User<inputtype= "Radio">VIP Users<BR> <BR><inputtype= "button"value= "Login"> <inputtype= "button"value= "Register"> </form> </Div> <DivID= "Footer"style= "Background-color:skyblue;clear:both;text-align:center;">Copyright *liuda</Div></Div><HR><Div> <P>Hot Game Werewolf Kill!</P> <Pclass= "KK">Hot Game Werewolf Kill!</P> <PID= "ABC">Hot Game Werewolf Kill!</P> <P>Hot Games<spanstyle= "background-color:grey;font-family: ' Helvetica Neue ', Helvetica, Arial, sans-serif;font-size:35px;color:red" >The werewolf killed him!</span></P></Div></Body></HTML>
p{ color:fuchsia; } . KK{ color:Darkcyan; Font-weight: bold; font-style: Italic; font-size: 20px; } #abc{ color: darkblue; Text-decoration: underline; font-size: 25px; }
Navigation, head, CSS Basics