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

     
  
 
 
 
 
 首页
 
科技资讯
 
心情随笔
 
资源收藏
 
图文图片
 
留言板
 
登陆/注册
 
 
 
  

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.