What is a navigation bar? According to my understanding, it is a set of links or buttons located on the top or side of a web page, which are used to guide you to find different sections of the webpage. You can find the content of the section you want to see at a glance. Today we design a navigation bar at the top of the web page. According to my life experience, the top navigation bar of the web page is more designed, and the side navigation bar is less designed.
Let us design and implement a web page navigation bar step by step.
1 The overall design of the web page: size and background color
The code block is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/111.css" />
</head>
<body>
<div id="aa">
</div>
</body>
</html>
#aa{
width: 1050px;
height: 800px;
margin: 0 auto;
text-align: center;
background-color: #F0F8FF;
/*
text-align: center;div大盒子居中显示
background-color: #F0F8FF;背景颜色
margin: 0 auto;实际效果为左右居中
*/
}
The code operation effect is as follows:
2 Realization of web page navigation bar: beautification of hyperlinks
1) Design of the navigation bar area
Introduction: Designate an area at the top of the web page for placing the navigation bar, including the design of size and background color
The code block is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/111.css" />
</head>
<body>
<div id="aa">
<div id="bb">
</div>
</div>
</body>
</html>
#bb{
width: 1050px;
height: 55px;
line-height: 50px;
text-align: center;
background-color: #87CEEB;
margin: 0 auto;
/*
line-height: 50px;
字体行距为50px
}*/
}The code operation effect is as follows:
2) Design of the content of the navigation bar
Introduction: The essence of the navigation bar is a collection of hyperlinks.
The code block is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/111.css" />
</head>
<body>
<div id="aa">
<div id="bb">
<a href="#">首页</a>
<a href="#">商品</a>
<a href="#">分类</a>
<a href="#">会员</a>
<a href="#">售后</a>
</div>
</div>
</body>
</html>
a{
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
background-color: green;
line-height: 50px;
color:white;
display: inline-block;
}
/*
aa{
text-decoration: none;消除超链接的下划线
width: 100px;
height: 50px;
text-align: center; 字体居中显示
background-color: green; 背景颜色
line-height: 50px; 字体行距
color:white; 字体颜色
display: inline-block; 转换为行内块元素
}*/
a:hover{
background-color: indianred;
color:#F0F8FF
}
/*
超链接鼠标悬浮改变字体颜色以及背景颜色
a:hover{
background-color: indianred;
color: #F0F8FF;
}*/The code operation effect is as follows:
Note: The color of the hyperlink on the home page is displayed by the hovering effect of the mouse.
3 Web page text design: design and implementation of text content
The code block is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/111.css" />
</head>
<body>
<div id="aa">
<div id="bb">
<a href="#">首页</a>
<a href="#">商品</a>
<a href="#">分类</a>
<a href="#">会员</a>
<a href="#">售后</a>
</div>
<p>嗨！你来了，欢迎:</p>
<p>如果你想认识我，扫描这个二维码</p>
<div class="ree">
<img src="img/csdn.jpg" alt="" title="扫我" width="200px" />
</div>
<p><a href="https://leetcode.cn/problemset/all/">拜拜</a></p>
</div>
</body>
</html>
p{
font-family: "微软雅黑";
font-size: 24px;
line-height: 2;
text-align: left;
}
/*
p{
font-family: "微软雅黑";设置文字类型
font-size: 24px; 设置文字的大小
line-height: 2; 设置文字的行距
text-align: left; 文字靠左显示
}
*/
.ree{
text-align: left;
} The code running effect diagram is as follows:
4 Web design full version code
1) The HTML5 code is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/111.css" />
</head>
<body>
<div id="aa">
<div id="bb">
<a href="#">首页</a>
<a href="#">商品</a>
<a href="#">分类</a>
<a href="#">会员</a>
<a href="#">售后</a>
</div>
<p>嗨！你来了，欢迎:</p>
<p>如果你想认识我，扫描这个二维码</p>
<div class="ree">
<img src="img/csdn.jpg" alt="" title="扫我" width="200px" />
</div>
<p ><a href="https://leetcode.cn/problemset/all/">拜拜</a></p>
</div>
</body>
</html>
2) The CSS3 code is as follows:
#aa{
width: 1050px;
height: 800px;
margin: 0 auto;
text-align: center;
background-color: #F0F8FF;
/*
text-align: center;div大盒子居中显示
background-color: #F0F8FF;背景颜色
margin: 0 auto;实际效果为左右居中
*/
}
#bb{
width: 1050px;
height: 55px;
line-height: 50px;
text-align: center;
background-color: #87CEEB;
margin: 0 auto;
/*
line-height: 50px;
字体行距为50px
}*/
}
a{
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
background-color: green;
line-height: 50px;
color:white;
display: inline-block;
}
/*
a{
text-decoration: none;消除超链接的下划线
width: 100px;
height: 50px;
text-align: center; 字体居中显示
background-color: green; 背景颜色
line-height: 50px; 字体行距
color:white; 字体颜色
display: inline-block; 转换为行内块元素
}*/
a:hover{
background-color: indianred;
color:#F0F8FF
}
/*
超链接鼠标悬浮改变字体颜色以及背景颜色
a:hover{
background-color: indianred;
color: #F0F8FF;
}*/
p{
font-family: "微软雅黑";
font-size: 24px;
line-height: 2;
text-align: left;
}
/*
p{
font-family: "微软雅黑";设置文字类型
font-size: 24px; 设置文字的大小
line-height: 2; 设置文字的行距
text-align: left; 文字靠左显示
text-indent: 2 em; 首行缩进2字符
}
*/
.ree{
text-align: left;
}
The code running effect diagram is as follows:
5 summary
In this case, a top navigation bar is designed, which imitates the content of the navigation bar of the shopping webpage; clicking the navigation bar with the mouse will change the background color and font color of the navigation bar. "Goodbye" on the webpage is also a hyperlink, and there will be surprises when clicked.