Conception de la page d'inscription pour le blog de développement HTML (1)
Introduction des fichiers CSS
Créer un nouveau fichier fichier reg.html
Nous analysons d'abord la mise en page de la page Web
C'est l'effet de notre page une fois terminée,
La page Web est divisée en trois parties
En-tête Nous commençons à écrire la pièce, le corps et le bas dans cet ordre.
Ecriture de la barre de navigation principale
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册页面</title> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href=""> 首页</a></li> <li><a href="">科技资讯</a></li> <li><a href="">心情随笔</a></li> <li><a href="">资源收藏</a></li> <li><a href="">图文图片</a></li> <li><a href="">留言板</a></li> <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li> </ul> </div> </div> </body> </html>
Créez une boîte div, imbriquez les divs dans la boîte et créez-la à l'aide d'un liste non ordonnée Navigation, introduire les images du logo.
Créez un fichier CSS
@charset "utf-8";
body{
background-color: #F0F0F0;
}
*{
border: 0px;
padding: 0px;
margin: 0px;
font-size: 14px;
}
#top{
width: 100%;
height: 90px;
background-color: white;
border-bottom: 1px solid #bbbbbb;
}
#menu{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}Tout d'abord, initialisez le global, créez deux balises d'identification pour le div, le haut et le menu, et définissez la largeur et la hauteur de l'en-tête respectivement, ainsi que la largeur et la hauteur de la mise en page globale. De cette façon, nous obtiendrons la page comme indiqué ci-dessous
Modifiez ensuite le style de la page
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}Modifiez la hauteur de l'img et supprimez le format à partir de la séquence ul.
#menu ul li{
float: left;
height: 90px;
line-height: 90px;
margin-right: 50px;
}
#menu ul li a{
color: black;text-decoration: none;
display: inline-block;
}
#menu ul li a:hover{color: #FFD700;text-decoration: none}Définissez la balise li, effectuez des opérations flottantes, ajustez la hauteur et l'espacement et utilisez display: inline-block; pour faire de la barre de navigation un élément rapide. Supprimez le soulignement. et modifiez le style de clic de l'étiquette. L'effet est celui indiqué dans la figure ci-dessous et notre barre de navigation principale est terminée.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
