Home > Developer > CSS

CSS + ul + Li create navigation

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! 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> untitled document </title>
<Style type = "text/CSS">
<! --

. My_nav {
 Height: 30px;
 Width: 700px;
 Background-image: url(nav_bg.jpg );
 Background-repeat: Repeat-X;
 Margin: 0px 0px;
}
. My_nav ul {
 List-style: none;
 Margin: 0px 0px;
}
. My_nav ul Li {
 Float: left;
 Margin: 0px 0px;
 Padding: 5px 7px;
 Background-image: url(nav_li.jpg );
 Background-repeat: No-Repeat;
 Font-size: 16px;
 Text-align: center;
 Background-position: Right Center;
}
. My_nav ul {
 Color: # ffffff;
 Text-Decoration: none;
}
. My_nav ul a: hover {
 Color: # ffcc00
}
-->
</Style>
</Head>

<Body>
<Div class = "my_nav">
   <Ul>
   <Li class = "on"> <a href = "/shows/index/EN"> Home </a> </LI>
   <Li> <A href = "/shows/newsletter/EN"> newsletter </a> </LI>
   <Li> <A href = "/shows/talent/EN"> talent </a> </LI>
   <Li> <A href = "/shows/celeb/EN"> celebrity </a> </LI>
   <Li> <A href = "/shows/COM/EN"> company </a> </LI>
   <Li> <A href = "/shows/event/EN"> event </a> </LI>
 <Li> <A href = "/shows/job/EN"> job </a> </LI>
 <Li> <A href = "/shows/contact/EN"> contact </a> </LI>
 <Li> <A href = "/shows/service/EN"> service </a> </LI>
 </Ul>
</Div>
</Body>
</Html>
**************************************** **************************************** **************

Step 1: Compile the HTML code architecture of the horizontal menu

Add the following code to the navigation bar of the HTML document.

<Ul id = "menu"> <li> <a href = "http://www.baidu.com"> Baidu. com </a> </LI> <li> <a href = "http://www.CoDe52.net "> CoDe52.net </a> </LI> <li> <a href = "http://www.yahoo.com"> Yahoo. com </a> </LI> <li> <a href = "http://www.google.com"Step 2: Write CSS Code 1. Set public stylesAdd the following CSS code to the 

<style type="text/css">#menu { font:12px verdana, arial, sans-serif; }#menu, #menu li {list-style:none; padding:0; margin:0; }</style>


As we all know, <li> entries in <ul> are arranged vertically by default. We need to define CSS to arrange them horizontally.TIPS:Because we now pull out the navigation bar for independent explanation, we need to set some public styles. If you have reset the default effect in the body or other places, the above Code can be removed2. Arrange text horizontallyAs we all know, projects under the <ul> label <li> are vertically arranged by default. We need to define additional CSS attributes for horizontal arrangement.


<style type="text/css">#menu li { float:left; }</style>


3,Set link style:


<style type="text/css">#menu li a {display:block; padding:8px 50px; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000; }</style>


We use padding (padding) to make each menu wider. If your menu is a mix of Chinese and English, we recommend setting the height and width of a single menu, in this way, the height error caused by high inconsistency between Chinese and English characters can be avoided. Set the fixed height:


<style type="text/css">#menu li a {display:block; width:150px; height:30px; line-height:30px; text-align:center; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000; }</style>


4. Link hover effect:Through the combination of the preceding steps, the preliminary framework of a horizontal navigation bar appears. This step mainly defines the hover effect of the link to make the navigation bar more beautiful. Of course, to make the navigation bar more elegant, you can define the background image on the CSS hover attribute.


<style type="text/css">#menu li a:hover {background:#146C9C; color:#fff; }</style>


The code here is a defect, and a border will be displayed on the rightmost side. Because the first-Child pseudo class is not supported by IE browsers, we can only write one style separately, remove the last border and add an extra selection character to the HTML code.


<ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" type="text/css">#menu li a.last {border-right:0; }</style>


Now, a simple horizontal navigation menu is created, isn't it easy? The complete code is provided below:


<style type="text/css">#menu { font:12px verdana, arial, sans-serif; }#menu, #menu li {list-style:none;padding:0;margin:0;}#menu li { float:left; }#menu li a {display:block;padding:8px 50px;background:#3A4953;color:#fff;text-decoration:none;border-right:1px solid #000;}#menu li a:hover {background:#146C9C;color:#fff;text-decoration:none;border-right:1px solid #000;}#menu li a.last {border-right:0; }</style><ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com">Google</a></li></ul>










Transferred from:


http://blog.sina.com.cn/s/blog_611ab6c50100g5fd.html

                

                    
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
Contact Us

            
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
                products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
                content of the page makes you feel confusing, please write us an email, we will handle the problem
                within 5 days after receiving your email.

            

                If you find any instances of plagiarism from the community, please send an email to:
                info-contact@alibabacloud.com
                and provide relevant evidence. A staff member will contact you within 5 working days.
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •