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
Two ways to solve the problem of MySQL master-slave database not being synchronized
Table of contents Two ways to solve the problem o...
Batch replace part of the data of a field in Mysql (recommended)
Batch replace part of the data of a field in MYSQ...
How to create a MySQL database and support Chinese characters
Let's first look at the MySQL official docume...
Detailed introduction to logs in Linux system
Table of contents 1. Log related services 2. Comm...
About React Native unable to link to the simulator
React Native can develop iOS and Android native a...
JavaScript Basics: Immediate Execution Function
Table of contents Immediately execute function fo...
How to find out uncommitted transaction information in MySQL
A while ago, I wrote a blog post titled "Can...
Detailed explanation of the use of redux in native WeChat applet development
premise In complex scenarios, a lot of data needs...
Implementation of nginx flow control and access control
nginx traffic control Rate-limiting is a very use...
Detailed explanation of mysql replication tool based on python
Table of contents 1. Introduction Second practice...
HTML symbol to entity algorithm challenge
challenge: Converts the characters &, <, &...
js to implement verification code interference (static)
This article shares the specific code of js to im...
MySQL query tree structure method
Table of contents MySQL query tree structure 1. A...
Detailed Analysis of or, in, union and Index Optimization in MySQL
This article originated from the homework assignm...
Detailed tutorial on using Docker to build Gitlab based on CentOS8 system
Table of contents 1. Install Docker 2. Install Gi...