Dê uma Nova Aparência à Sua Página

Introdução

Neste projeto, você aprenderá como projetar e estilizar uma página de login com uma interface bonita. O objetivo é criar uma página de login visualmente atraente que proporcione uma experiência de usuário agradável.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a estrutura do projeto e entender os arquivos fornecidos
• Como estilizar o corpo e a barra de navegação da página de login
• Como estilizar o formulário de login, incluindo a imagem do avatar, o contêiner do formulário, os elementos do formulário e o texto

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar um layout de página de login visualmente atraente usando CSS
• Estilizar diferentes elementos de um formulário de login, como campos de entrada, botões e texto
• Incorporar imagens e estilos de fundo para aprimorar o design geral da página de login

Configurar a Estrutura do Projeto

Nesta etapa, você aprenderá como configurar a estrutura do projeto para a página de login.

1. Abra o ambiente de laboratório e navegue até o diretório do projeto.
2. Dentro do diretório do projeto, você deve ver a seguinte estrutura de arquivos:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

3. O arquivo css/style.css é onde você escreverá seu código CSS para estilizar a página de login. A pasta images contém os arquivos de imagem usados no projeto.
4. Abra o arquivo index.html em um editor de texto. Este é o arquivo HTML que contém a estrutura da página de login.
5. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
6. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Estilizar o Corpo e a Barra de Navegação

Nesta etapa, você estilizará o corpo e a barra de navegação da página de login.

1. Abra o arquivo css/style.css em um editor de texto.
2. Adicione o seguinte código CSS ao arquivo:

/* Adicione seu código CSS aqui */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

Este código define a imagem de fundo para o corpo, o estilo da barra de navegação e adiciona uma imagem no canto superior direito da página para acessar o perfil.

Estilizar o Formulário de Login

Nesta etapa, você estilizará o formulário de login.

1. Adicione o seguinte código CSS ao arquivo css/style.css:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

Este código estiliza o formulário de login, incluindo a imagem do avatar, o contêiner do formulário, os elementos do formulário (cabeçalho, botão e campos de entrada) e o texto na parte inferior do formulário.

Revisar e Testar o Resultado Final

Nesta etapa, você pode testar a semelhança da sua página concluída com a página real fornecida.

1. Salve as alterações no arquivo style.css.
2. Atualize o navegador para ver o resultado finalizado. Após concluir as etapas anteriores, você poderá aprender como estruturar e embelezar uma página através da sintaxe CSS para tornar sua página de login o mais semelhante possível ao mostrado abaixo:

Parabéns! Você concluiu com sucesso o projeto de dar uma nova aparência à sua página de login.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.