- 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"> <title>The @@facesymbol@@つロ Cheers ~-bilibili</title><Basehref= "https://www.bilibili.com/"Target= "_blank"> <Linkrel= "stylesheet"type= "Text/css"href= "171.css"> <styletype= "Text/css">P{Color:Red; }. Textblue{Color:Orange; }#a{Color:Blue; }#tt{Color:#FFD700;}. X1{Color:Red;}</style></Head><Body><nav> <imgclass= "C-img c-img6"src= "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2810627290,1080409091&fm=58&s= 8197c732c535fa313e526557030030bb&bpow=121&bpoh=75 "style= "height:75px;"width=200><BR> <imgalt=""src= "//i0.hdslb.com/bfs/archive/[email protected]_220h.webp"width=500,height=500><BR> <ahref="">Home</a> <ahref="">Animation</a> <ahref="">Music</a> <ahref="">Game</a> <ahref="">Technology</a> <ahref="">Film</a> <ahref="">Column</a> <inputtype= "text"name= "Search"> <Buttontype= "Submit">Search</Button></nav><H1><spanstyle= "Background-color:yellow;font-size:larger"; Fon>Blibli Welcomes You</H1><P></P><DivID= "Container"style= "width:400px" > <DivID= "header"style= "Background-color:deepskyblue;"><H2Align= "Center"style= "margin-bottom:0;">Login</H2></Div> <DivID= "Content"style= "Background-color: #EEEEEE; height:150px;width:400px;float:left;"> <formAction="">Username:<inputtype= "text"name= "User"><BR>Password:<inputtype= "Password"name= "Password"> <form><BR> <inputtype= "Radio"name= "Role"value= "Stu">Student<inputtype= "checkbox"name= "Vehicle"value= "Bike">Teacher</form> <BR> <inputtype= "button"value= "Login"> <inputtype= "button"value= "Cancel"> </form> </Div> <DivID= "Footer"style= "Background-color:deepskyblue;clear:both;text-align:center;">Copyright? Mars</Div></Div><HR> <PID= "a">Problems</P><Pclass= "Textblue">Contact Us</P><P>User comments</P><P><spanstyle= "background-color:gold;font-family: ' Helvetica Neue ', Helvetica, Arial, sans-serif;font-size:50px">The @@facesymbol@@つロ Cheers ~-bilibili</span></P></Body></HTML>
Navigation, head, CSS Basics