Simple horizontal navigation bar and simple navigation bar
Let's not talk much about it. Check the Code:
Html section
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Our Work</a></li> <li><a href="#">News</a></li> <li><a class="last" href="#">Contact</a></li> </ul></body>
Css Processing
ul { padding: 0; margin: 0; list-style: none; width: 980px; float: left; background: #FAA819;}ul li { float: left;}ul a { display: block; padding: 0.2em; line-height: 2.1em; text-decoration: none; color: #fff;}ul a:after { content: " |";}ul a.last:after { content: "";}
Note that it is troublesome to add a split line. You can use a background image containing a split line to load it into the tag. However, this loading is slow. You can also use a: after {content: "| ";}, this is actually a little troublesome, so I cannot think of other good methods for the moment.
:
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
