HTML+CSS to achieve simple navigation bar function

Without further ado, I'll go straight to the code (Newbie: There's really nothing much to say)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Navigation Bar</title>
    <style type="text/css">
     #nav{
         width:100%;
         height:39px;
        margin:0px;
        background:#808080
    }
     #nav ul li{
         margin:5px 10px;
         float:left;
         list-style:none;
     }
     #nav ul li a{
         float:left;
         padding:0px 16px;
         <!--margin:auto;-->
         color:#ffffff;
         font-size:15px;
     }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li ><a href="#">Home</a></li>
            <li ><a href="#">Friends</a></li>
            <li ><a href="#">Shop</a></li>
            <li ><a href="#">Download the client</a></li>
        </ul>
    </div>
</body>
</html>

The main thing is to use CSS (Cascading Style Sheets) to format the HTML content (not very good at expressing);

You can directly use the identifier to set the format of the element; to format an element with the id nav, add # in front of it; to modify the format of class="nav", add "." in front of nav.

I am not very familiar with these three applications, so I will not talk about them in detail. I hope some experts can give me some guidance, or someone can discuss with me.

CSS code can be written in the head of the HTML document using the start <style type="txt/css">、 end tags </style> , that is, embedded in the head.

Here is a simple navigation bar CSS code, not much, just embedded in the head

The above is a way to reference CSS: embedded style sheet

---------------------------------------------------------------------------------------------------------------------------

If there are a lot of CSS codes, you can write the codes directly in the CSS file, and then use the link tag to introduce the style sheet CSS in the head of the HTML file.

The second way to quote the above facts: external style sheet (nowadays web pages are complicated, this method is more commonly used)

Another type is inline style sheets, which will not be explained here.

Summarize

The above is the editor's introduction to the simple navigation bar function implemented by html+css. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: CentOS 7 cannot access the Internet after modifying the network card

>>: The Complete List of MIME Types

Top 10 useful and important open source tools in 2019

JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain

Table of contents JS Three Mountains Synchronous ...

HTML+CSS to achieve simple navigation bar function

Top 10 useful and important open source tools in 2019

HTML table markup tutorial (4): border color attribute BORDERCOLOR

CSS horizontal centering and limiting the maximum width

Summary of MySQL 8.0 Online DDL Quick Column Addition

Zabbix configures DingTalk's alarm function with pictures

Detailed explanation of the problem when combining CSS ellipsis and padding

Detailed explanation of Metadata Lock that you must know when changing the MySQL table structure

Tips for writing concise React components

MySQL 5.7.17 installation and configuration graphic tutorial

Introduction to Linux File Compression and Packaging

Recommend

How to change the color of the entire row (tr) when the mouse stops in HTML

Creating a Secondary Menu Using JavaScript

Docker image management common operation code examples

Detailed explanation of how to dynamically set the browser title in Vue

MySQL derived table (Derived Table) simple usage example analysis

How to install Composer in Linux

A brief analysis of CSS :is() and :where() coming to browsers soon

Detailed explanation of MySQL 8.0 password expiration policy

Solve the error of installing VMware Tools on Ubuntu 18.04

Is it necessary to create a separate index for the MySQL partition field column?

Detailed explanation of MySQL slow queries

JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain

Master-slave synchronous replication configuration of MySQL database under Linux

MySQL 8.0.16 installation and configuration tutorial under CentOS7

Detailed explanation of custom configuration of docker official mysql image