Use CSS to design the website navigation bar and css navigation bar.
1. preview the navigation menu effect for background conversion:
Source code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> navigation menu for background conversion </title> <! -- Use # nav to define the div style, including width, right border, filled attributes, Font, font size, background color, and font color. Use # nav ul to define the style of ul objects under the div, including list attributes list-style, margin, padding, and border attributes # use nav li to define the style of the li object # use nav li a to define the link text style of the li object # nav li: hover defines the link text activation style under the li object ---> <style type = "text/css" >#nav {width: 150px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: ""; font-size: 13px; background-color: # ff9933; color: #000000 ;} # nav ul {list-style: none; margin: 0; padding: 0; border: none ;}# nav li {margin: 0; border-bottom: 1px solid # ffff00 ;}# nav li a {display: block; padding: 5px 5px 5px 0.5em; background-color: # ff9933; color: # fff; text-decoration: none; width: 100%; border-right: 10px solid # ffcc00; border-left: 10px solid # ffcc00;} html> body # nav li a {width: auto ;} # nav li a: hover {background-color: # ffcc00; color: # fff; border-right: 10px solid # ff00ff; border-left: 10px solid # ff00ff ;} </style>2. Use CSS to create horizontal navigation
Effect preview:
Source code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> Use CSS to create a horizontal navigation </title> <! -- First define the li object under ul and specify the float: left attribute for # navh li. All li objects are moved to the left, to form a horizontal arrangement, the key to navigation is the style control of the link object. Here we use # navh li a {} to write a style display for each a link object under li: block changes the display mode of a link object from a piece of text to a block object, in this way, you can add a series of styles to the link tag using the CSS attributes such as the margin, padding, and border --> <style type = "text/css"> # navh li {float: left ;}# navh ul {list-style: none; margin: 0; padding: 0; border: none ;}# navh li a {color: # ffffff; text-decoration: none; padding-top: 4px; display: block; width: 65px; height: 20px; text-align: center; background-color: # 6600cc; margin-left: 2px ;} # navh li a: hover {background-color: # 9999ff; color: # ffffff ;} </style>Source: section 13.3 "HTML, CSS, and Javascript webpage creation from entry to mastery"
<Div style = "display: inline-block; width: 100%; float: left;"> navigation bar for the benefit bar </div>
<Div style = "display: inline-block; width: 100%; float: left;"> yellow background </div>
How to Create a navigation bar using CSS + Images
In fact, all the actions in the navigation bar are implemented by js or vbs script language. css only provides a static display.
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
