¿Qué es una barra de navegación? Según tengo entendido, es un conjunto de enlaces o botones ubicados en la parte superior o lateral de una página web, que se utilizan para guiarlo a encontrar diferentes secciones de la página web. Puede encontrar el contenido de la sección que desea ver de un vistazo. Hoy diseñamos una barra de navegación en la parte superior de la página web. Según mi experiencia de vida, la barra de navegación superior de la página web está más diseñada y la barra de navegación lateral está menos diseñada.
Diseñemos e implementemos una barra de navegación de página web paso a paso.
1 El diseño general de la página web: tamaño y color de fondo
El bloque de código es el siguiente:
<!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;实际效果为左右居中
*/
}
El efecto de la operación de código es el siguiente:
2 Realización de barra de navegación de página web: embellecimiento de hipervínculos
1) Diseño del área de la barra de navegación
Introducción: designe un área en la parte superior de la página web para colocar la barra de navegación, incluido el diseño de tamaño y color de fondo
El bloque de código es el siguiente
<!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
}*/
}El efecto de la operación de código es el siguiente:
2) Diseño del contenido de la barra de navegación
Introducción: la esencia de la barra de navegación es una colección de hipervínculos.
El bloque de código es el siguiente:
<!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;
}*/El efecto de la operación de código es el siguiente:
Nota: El color del hipervínculo en la página de inicio se muestra con el efecto de desplazamiento del mouse.
3 Diseño de texto de página web: diseño e implementación de contenido de texto
El bloque de código es el siguiente:
<!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;
} El diagrama de efecto de ejecución de código es el siguiente:
4 Código de la versión completa del diseño web
1) El código HTML5 es el siguiente
<!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) El código CSS3 es el siguiente:
#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;
}
El diagrama de efecto de ejecución de código es el siguiente:
5 resumen
En este caso, se diseña una barra de navegación superior, imitando el contenido de la barra de navegación de la página web de compras; al hacer clic en la barra de navegación con el mouse, cambiará el color de fondo y el color de fuente de la barra de navegación. "Adiós" en la página web también es un hipervínculo, y habrá sorpresas cuando se haga clic en él.