Home > Developer > Web Develop
HTML page code:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Test</title>5 <MetaCharSet= "utf-8">6 <Linkrel= "stylesheet"type= "text/css"href= "style.css">7 <Scripttype= "text/javascript"src= "jquery.js"></Script>8 <Script1type= "text/javascript">9 Ten </Script> one </Head> a <Body> - <DivID= "navigator"> - <ulID= "navlist"> the <Li><ahref="#"class= "menu">Home</a></Li> - <Li><ahref="#"class= "menu">New Essays</a></Li> - <Li><ahref="#"class= "menu">Subscription</a></Li> - <Li><ahref="#"class= "menu">Management</a></Li> + </ul> - </Div> + </Body> a </HTML> at -
CSS style code:
1 A:link{2 Color:Black;3 text-decoration:None;/*set links without underlining*/4}5 6 #navigator{7 Background-color:#AEAEAE;8 position:Absolute;9 left:50%;Ten Margin-left:-200px; one /*bottom:0px;*/ a /*width:400px;*/ - Height:80px; -} the #navList{ - Min-height:80px; - Overflow:Hidden; -} + #navList Li{ - float: left; + List-style:None;/*Set the default black point before no unordered element*/ a} at - #navList a{ - Display:Block; - width:100px; - Height:80px; - Line-height:80px; in font-size:16px; - text-align:Center; to position:relative; + -webkit-transition:all . 4s; -} the #navList a:after, #navList a:before{/*in css, E:after represents pseudo-elements and is used to set gaps between Div*/ * position:Absolute; $ Display:Block;Panax Notoginseng Bottom:2px; - Opacity:0;/*hide the brackets on both sides of the text*/ the -webkit-transition:all . 4s; +} a the #navList A:after{ + content:"]"; - right:20px; $} $ #navList A:before{ - content:"["; - left:20px; the} - #navList a:link, #navList a:visited,/*set a hyperlink that has been accessed by outdated styles*/#navList a:active{Wuyi Color:#eee; the} - wu #navList a:hover{ - Color:#f62459; about text-decoration:None; $} - #navList A:hover:after{ - right:0px; - Opacity:1; a} + #navList A:hover:before{ the left:0px; - Opacity:1; $}
The display results are as follows:
When you hover over a link in the navigation bar, the text will appear with red brackets on both sides.
Description of pseudo-elements in CSSThe above page code looks like this:
<! DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD "> <meta http-equiv= "content-type" content= "text/html; charset=gb2312 "/> <title> single-row fixed-width single-row Adaptive Structure </title> <style> /* set the internal and external patches of all elements in the page to 0 for easy page layout */ *{ margin:0; padding:0; } /* set the header information and the height of the bottom information to 30px, and add a light gray background */ #header, #footer { height:30px; Background-color: #e8e8e8; } /* set the page content area Up-down patch to 10px*/ #container { margin:10px 0; } /* set the main content area width to 70%, background color and text colors, and left display */ . mainbox{ float:left;/* floating the main content area to the left */ width:70%;/* Change the width of the mainbox to 70%*/ Color: #ff0000; Background-color: #333333; } /* Set the sidebar width to 200px, background and text color, and right display */ . sidebox{ float:right;/* float the sidebar to the right */ width:200px;/* Change the width of the sidebox to 200px*/ margin-left:-200px;/* add a negative margin so that the sidebox to the left floating indentation, that is, when the browser window is small and does not change the size of sidebox, then Sidebox will be inserted into the next mainbox, and if not set, The window changes in hours and breaks down the layout */ Color: #ffffff;/* Set Text color */ Background-color: #999999; /* Set Background color */ } /* clear the left and right floating of content area, this paragraph focus on understanding (after what Meaning) */ #container: after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; Content: ""; } /* Add level information to the floating purge of the parent tag element */ #footer { clear:both; } </style> <body> <div id= "header" > header information </div> <div id= "container" > <div class= "mainbox" > <p> Main content Area </p> <p> is no longer just a line of text </p> <p> want to put a lot of things into this area </p> <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. <p> repeat, repeat, ......</p>. </div> <div class= "sidebox" > Sidebar </div> </div> <div id= "footer" > Bottom Info </div> </body> |
This code has a red section, and now the red part of the code is commented to show the page:
Visible when there is no red code section, the bottom information and the main content part is tightly affixed together, there is no gap Between.
#container: after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; Content: ""; } |
The #container:after in this code is a CSS style setting for a pseudo-element, and the HTML page does not have such a div present.
after is the meaning behind the element, which is essentially adding content after the Element.
This pseudo-element allows you to insert the generated content on the last side of the Element's content, and content property to set what happens after the object is Used. By default, This pseudo-element is inline , but you can use the property display to change This.
HTML and CSS set up dynamic navigation and a simple description of pseudo elements in 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
