Based on the basic horizontal navigation (click to View Details) mentioned above, the top corner of each menu item is required to be rounded. CSS style settings are difficult to implement, so we use rounded corners to achieve this effect. We noticed that the menu items have three different colors. According to common sense, three different label images are needed to create menus. However, if the tag is used as an independent image, when the page is initially loaded to the user-side browser, all images are not loaded. Only when the mouse begins to stay and click the navigation label, the image is not displayed until it is loaded.
Therefore, you can combine the three States into an image (as shown below). In this way, all three states are loaded at the same time, you only need to move the background image through the "background-position" attribute of CSS to select the desired status.
Specify the width of each link based on the style created for the horizontal menu. Therefore, the label image of each status must have the same width. When an image is placed in the Link background, only the part of the image that meets the defined element width and height is displayed. The remaining part remains hidden. The code below:
1. HTML code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">2. CSS code
/* CSS style sheet for inline fixed-tabs.html] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [inline * // * because the navigation font may match other fonts on the page, therefore, font-family should be declared at a high position in CSS */html {Font: Small/1.4 "lucida Grande", tahoma, sans-serif;} body {font-size: 92% ;}# nav {margin: 0; padding: 0; Background: #6f6146;/* the background color is the same as that of the normal tab image */list-style-type: none; width: 767px;/* set the width of unordered list elements */float: Left;/* contain floated list items */} # nav Li {margin: 0; padding: 0; float: Left ;}# nav A {float: Left; width: pixel PX;/* set the width of each navigation item */color: # FFF; text-Decoration: none; /* define standard text. The link text is not underlined */line-Height: 2.5; text-align: center;/* The text is in the middle of each list item */border-right: 1px solid # FFF;/* set only the right border */Background: url(tab.gif) No-Repeat;/* Add a background image that binds three states, */} # nav # nav_con A {border: none;} # nav A: hover {background-color: #4f4532;/* set the background color when the pseudo-class hover is stuck, the color is the same as that of the translated image */background-position:-pixel PX 0;/*-127, indicating that the background image is moved to the left by pixel, implement status change */}/* Associate the navigation ID with the body ID to set the style for the currently accessed navigation element, to highlight the "current location" */# body_hom # nav_hom A, # body_map # nav_map A, # body_jou # nav_jou A, # body_his # nav_his, # body_ref # nav_ref A, # body_con # nav_con A {background-color: # beb06f;/* the background color is the same as the color of the currently accessed tag image */color: #1a1303; /* font color approaching black */font-weight: bold;/* font bold */background-position:-254px 0;/* indicates that the background image is shifted to the left by 254px, implementation status change */}3,
Reference: The Art & Science of 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
