CSS pour commencer à pratiquer le premier code du jour pour un projet de page web statique

Source : Internet
Auteur : utilisateur
Ce que nous allons faire aujourd'hui est la page d’accueil index.html

Tout d’abord, le diagramme des effets :

Description : 1. dans le milieu est l’animation SWF. Importer comme suit :

<embed src="images/index.swf" type="" width="712px" height="428px">

2. il y a une entrée lien page-tremplin ci-dessous, qui est blanche (car le lien par défaut est bleu). Décoré avec des tags de lien dans le corps.
Voici un petit peu sur la balise de lien :

≪ Body lien = « Couleur »

Il fonctionne sur tous les éléments dans une page Web qui ne sont pas définis séparément.

≪ Corps alink = « Couleur »

ALink permet de définir la couleur de la souris lorsque vous cliquez sur un lien hypertexte

≪ Corps vlink = « Couleur »

Vlink permet de définir la couleur du texte du lien hypertexte que vous avez accédé

Implémentation de code final :

<body link="white" alink="#0066ff" vlink="#ff0000">

3. la partie inférieure est aussi une image, le code est écrit dans le fichier CSS, comme suit :
Le chemin d’accès suivant explique :... /Is pour aller dans le répertoire précédent. Le chemin d’accès est le suivant :

background: url("../images/copyright.jpg") no-repeat;

Venir ici et obtenir le code à ce sujet.

Index.html premier Code

≪ Html >< tête >< meta http-equiv = « Content-Type » content = « text/html ; Charset = gb2312 « / >< titre >< lien href = » css/index.css « rel = » stylesheet « type = » Text/css " / ≫< / Chef >< body lien = « White » alink = « #0066ff » vlink = « #ff0000 » >< div class = « swf », < embed src = " Images/index.swf « type = » « largeur = » 712px « hauteur = » 428px « >< div class = « entrer », < a href = » url « > entrée < / a & Gt ; < / div >< div class = « End »

Code INDEX.CSS

        *{            margin: 0px;            padding: 0px;        }        body{            background: url("../images/bg.jpg") repeat;        }        .swf {            position: absolute;            left:50%;            top:50%;            margin-left: -356px;            margin-top: -215px;        }        .enter {            width: 100%;            font-size: 18px;            text-align: center;            color:red;            font-weight: bold;            text-decoration: underline;            margin-top: 8px;        }        .end{            width: 574px;            height: 70px;            background: url("../images/copyright.jpg") no-repeat;            margin: 0 auto;        }

Terminer la chose.

Si vous souhaitez également frapper le code manuellement, vous pouvez cliquer pour télécharger le package de compression pour cette page d’accueil index

Au revoir. さよなら...

Nous contacter

Le contenu de cette page provient d'Internet et ne reflète pas l'opinion d'Alibaba Cloud ; les produits et services mentionnés sur cette page n'ont aucune relation avec Alibaba Cloud. Si le contenu de la page vous semble problématique, veuillez nous écrire un courriel, nous traiterons le problème dans les 5 jours suivant la réception de votre message.

Si vous constatez des cas de plagiat de la part de la communauté, veuillez envoyer un courriel à : info-contact@alibabacloud.com et fournir des preuves pertinentes. Un membre de notre équipe vous contactera dans les 5 jours ouvrables.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.