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 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
Recommend
Introduction and analysis of three Binlog formats in MySQL
one. Mysql Binlog format introduction Mysql binlo...
Solution to 1045 error when navicat connects to mysql
When connecting to the local database, navicat fo...
How to reset the root password in mysql8.0.12
After installing the database, if you accidentall...
Detailed explanation of Tomcat's Server Options
1. Configuration By default, the first two are no...
Detailed discussion of memory and variable storage in JS
Table of contents Preface JS Magic Number Storing...
CentOS 6.4 MySQL 5.7.18 installation and configuration method graphic tutorial
The specific steps of installing mysql5.7.18 unde...
MySQL cursor functions and usage
Table of contents definition The role of the curs...
Reasons and solutions for multiple executions of the watch method when Vue monitors route changes
Table of contents Requirement description: Requir...
What are the drawbacks of deploying the database in a Docker container?
Preface Docker has been very popular in the past ...
How to set process.env.NODE_ENV production environment mode
Before I start, let me emphasize that process.env...
Simple implementation of vue drag and drop
This article mainly introduces the simple impleme...
How to implement draggable components in Vue
This article shares with you how to implement dra...
How to smoothly upgrade and rollback Nginx version in 1 minute
Today, let's talk about a situation that is o...
VMware 15.5 version of the graphic tutorial to build a yum warehouse by mounting the system CD
1. Open the CentOS 7 virtual machine. 2. Log in t...
A simple way to implement all functions of shopping cart in Vue
The main functions are as follows: Add product in...