Maison  >  Article  >  interface Web  >  Problèmes rencontrés avec la mise en page Très bon insights_CSS/HTML

Problèmes rencontrés avec la mise en page Très bon insights_CSS/HTML

WBOY
WBOYoriginal
2016-05-16 12:12:011360parcourir

Avant-propos
Avant que la prochaine génération de technologie de développement WEB, la technologie RIA, ne mûrisse, nous devons bien sûr encore lutter contre le HTML. Il y a quelque temps, le "Website Refactoring" était très populaire
Ce sont autant de progrès et nous donnent en effet de nouvelles idées. Voici une synthèse de quelques expériences en développement.

Mise en page
1. Mise en page haut, bas, gauche et droite
Je viens de commencer à apprendre à créer des pages. J'ai utilisé le logiciel DW de MM pour le visualiser, afin que davantage de personnes puissent apprendre à créer. pages Web.
Je me souviens encore que j'utilisais DW pour créer des pages. Un ami m'a demandé un jour la même phrase : "Quelle est la différence entre créer des pages Web avec plus de formulaires ou utiliser plus de calques ?".
Je lui ai dit que nous utilisons en fait Layout-Layout Table dans DW pour dessiner rapidement le cadre de la page entière, puis l'affiner étape par étape. La création d'une page est très rapide. Il est recommandé d'utiliser des tableaux. Il est difficile de contrôler la position à l'aide de calques.
Maintenant que j’y pense, c’est vraiment un peu trompeur. Ha, mais peut-être que le progrès nécessite un processus.

"Reconstruction du site Web" La brise printanière souffle, et l'utilisation de calques pour la mise en page a en effet apporté de nouvelles idées à notre développement.
Avantages :
La page est plus claire et la quantité de code est réduite
Le CSS est plus largement utilisé ;

Rangées du haut et du bas, superposition claire, démo de code :











Vous pouvez utiliser le positionnement absolu
#head{
position:absolute
top;10px
left:200px; 🎜> }



Utilisez le remplissage pour contrôler la séparation entre les calques

 

 


5. Utilisez moins d'images en utilisant CSS


Démo de mise en page (le code source peut être visualisé, il est beaucoup plus clair que la mise en page TABLE précédente) :
http://davidblog.blogdriver.com/davidblog/ inc/demo_div.jpg
formulaire
1. La marge et le remplissage du formulaire
Dans le passé, lors de l'insertion d'un formulaire dans la page, j'ai toujours l'impression que la marge et le remplissage ne sont pas 0 par défaut. , ce qui affecte parfois la mise en page de la page.
Vous pouvez utiliser CSS pour le définir sur 0
form{
margin:0 0 0 0px; }
Vous pouvez également définir des balises p ou d'autres balises
2. Sélectionnez
application optgroup

3. Aujourd'hui


4. Bouton
Le projet précédent utilisait un bouton image. Découvrez progressivement les failles de l'application.
Il est recommandé d'utiliser CSS pour embellir.
En fait, CSS peut réaliser des boutons plus beaux


table
Vous devez toujours utiliser table. la table a toujours son côté gagnant.
Par exemple, certaines données affichent une GRID ou la structure est relativement uniforme et la disposition est divisée en lignes et colonnes
Compétences liées aux tableaux




Application de. Expressions CSS
Les applications CSS peuvent réduire l'écriture de code1. Événements de souris de tabletr{
background-color:expression((this.rowIndex%2==0) ? "#e5e5e5" :"#e5e5e5");
ryo:expression(
onmouseover=function()
{this.style.backgroundColor='#ffffff'},
onmouseout=function()
{ this.style.backgroundColor='#e5e5e5'}
)
}



largeur:expression{document.body.clientWidth


Marques à noter


Menu 1


Menu 2








    • Informations sur la santé :

    • Taille

      Poids

      exposant

    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn