O que é uma barra de navegação? Pelo que entendi, é um conjunto de links ou botões localizados na parte superior ou lateral de uma página da web, que são usados para orientá-lo a encontrar diferentes seções da página da web. Você pode encontrar o conteúdo do seção que você deseja ver rapidamente. Hoje projetamos uma barra de navegação no topo da página web. De acordo com minha experiência de vida, a barra de navegação superior da página da web é mais projetada e a barra de navegação lateral é menos projetada.
Vamos projetar e implementar uma barra de navegação de página da web passo a passo.
1 O design geral da página da web: tamanho e cor de fundo
O bloco de código é o seguinte:
<!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;实际效果为左右居中
*/
}
O efeito da operação de código é o seguinte:
2 Realização da barra de navegação da página web: embelezamento dos hiperlinks
1) Design da área da barra de navegação
Introdução: Designe uma área na parte superior da página da Web para colocar a barra de navegação, incluindo o design de tamanho e cor de fundo
O bloco de código é o seguinte
<!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
}*/
}O efeito da operação de código é o seguinte:
2) Design do conteúdo da barra de navegação
Introdução: A essência da barra de navegação é uma coleção de hiperlinks.
O bloco de código é o seguinte:
<!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;
}*/O efeito da operação de código é o seguinte:
Observação: a cor do hiperlink na página inicial é exibida pelo efeito de foco do mouse.
3 Design de texto de página da Web: design e implementação de conteúdo de texto
O bloco de código é o seguinte:
<!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;
} O diagrama de efeito de execução de código é o seguinte:
4 Código da versão completa do design da Web
1) O código HTML5 é o seguinte
<!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) O código CSS3 é o seguinte:
#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;
}
O diagrama de efeito de execução de código é o seguinte:
5 resumo
Neste caso, uma barra de navegação superior é projetada, imitando o conteúdo da barra de navegação da página de compras; clicar na barra de navegação com o mouse mudará a cor de fundo e a cor da fonte da barra de navegação. "Adeus" na página da web também é um hiperlink, e haverá surpresas ao clicar.