Detailed explanation of common CSS navigation bar operations-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Detailed explanation of common CSS navigation bar operations

高洛峰

Mar 26, 2017 am 11:07 AM

css

This article mainly explains in detail the layout classes of Css commonly used navigation bar methods. Interested friends can refer to

1. Vertical navigation bar

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
 
a:link,a:visited{
    text-decoration: none;
    display: block;
    background-color: aqua;
    color: black;
    width: 50px;
    text-align: center;
}
 
a:active,a:hover{
    background-color: crimson;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
 
    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
    </ul>
 
</body>
</html>

2. Horizontal Navigation bar

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: aqua;
    width: 250px;
    text-align: center;
}
 
a:link,a:visited{
    font-weight: bold;
    text-decoration: none;
    background-color: aqua;
    color: black;
    width: 50px;
    text-align: center;
}
 
a:active,a:hover{
    background-color: crimson;
}
 
li{
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

The above is the detailed content of Detailed explanation of common CSS navigation bar operations. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Show Search Button when Search Field is Non-EmptyApr 15, 2025 am 10:00 AM

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input () when that placeholder is present.

The Trick to Animating the Dot on the Letter 'i'Apr 15, 2025 am 09:55 AM

Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate

Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window APIApr 15, 2025 am 09:53 AM

In this week's roundup: "Add to home screen" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how

Making a Chart? Try Using Mobx State Tree to Power the DataApr 15, 2025 am 09:49 AM

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Blocking Third-Party Hands from the Cookie JarApr 15, 2025 am 09:48 AM

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

Ten-Ton WidgetsApr 15, 2025 am 09:43 AM

At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example

Recipes for Performance Testing Single Page Applications in WebPageTestApr 15, 2025 am 09:42 AM

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at

Stop Animations During Window ResizingApr 15, 2025 am 09:40 AM

Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they

See all articles