Maison >interface Web >tutoriel CSS >Tutoriel d'exemple de mise en page standard Web, utilisez le positionnement pour résoudre facilement des mises en page CSS complexes_CSS/HTML

Tutoriel d'exemple de mise en page standard Web, utilisez le positionnement pour résoudre facilement des mises en page CSS complexes_CSS/HTML

WBOYoriginal: 2016-05-16 12:12:301530parcourir

Ich glaube, dass 99 % der Freunde, die zum klassischen Forum kommen, um Standards zu lernen, nicht dazu dienen, dem W3C beizutreten oder professionelle Forscher zu werden. Was ist also der Zweck, wenn alle kommen? Es ist ganz einfach. Ich möchte mir durch Standardlernen nur eine weitere Fähigkeit aneignen, damit ich bei der Jobsuche nicht mit der Aussage „Sie müssen sich mit Webstandards auskennen“ konfrontiert werde Im folgenden Beispiel funktioniert xhtml nicht. Der Zweck dieses Artikels besteht lediglich darin, jedem die Verwendung der relativen und absoluten Positionierung in CSS besser verständlich zu machen (diese Frage stellen tatsächlich viele Neulinge) und wie man den Hintergrund effektiv kombinieren kann um ein komplexeres Layout zu erreichen.J'espère que les seniors pourront me donner quelques indications sur les manques, merci !

---------------- ------ ------erster Schritt----------------------------------- ----- --

Lassen Sie uns zunächst eine Demo mit einem komplizierten Layout (unregelmäßiges Layout) entwerfen:

------ ---- -------------------------Schritt 2---- -- ------------------------------------
Lass uns den Code schreiben
< HTML>

model

------------------------------ --- ------------------Effet de page réel :---------------------------------------- --- ----------

<title>modèle</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> 
html,body{ 
    margin:0; 
    padding:0; 
    background:#A1A9B6 url(http://www.okrmt.com/demo7.8/images/allbg.jpg); 
    text-align:center; 
    } 
#main{ 
    margin:0 auto; 
    position:relative; 
    width:780px; 
    height:659px; 
    background:url(http://www.okrmt.com/demo7.8/images/model.jpg) no-repeat; 
    } 
#main #menu{ 
    position:absolute; 
    right:12px; 
    width:354px; 
    height:115px; 
    background:url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; 
    } 
#main #menu a,#main #menu a#page{ 
    float:left; 
    width:112px; 
    height:30px; 
    } 
#main #menu a#about{ 
    width:80px; 
    height:55px; 
    } 
#main #menu a#services{ 
    width:70px; 
    height:80px; 
    } 
#main #menu a#contacts{ 
    width:80px; 
    height:115px; 
    } 
#main #menu a:hover{ 
    background: url(http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; 
    } 
#main #menu a#page:hover{ 
    background-position: 0px -115px; 
    } 
#main #menu a#about:hover{ 
    background-position: -112px -115px; 
    } 
#main #menu a#services:hover{ 
    background-position: -192px -115px; 
    } 
#main #menu a#contacts:hover{ 
    background-position: -262px -115px; 
    } 
#main h1{ 
    position:absolute; 
    top:0;left:1px; 
    width:151px; 
    height:56px; 
    background:url(http://www.okrmt.com/demo7.8/images/logo.jpg) no-repeat; 
    } 
#main h2{ 
    position:absolute; 
    top:133px; 
    right:7px; 
    width:404px; 
    height:190px; 
    background:url(http://www.okrmt.com/demo7.8/images/about.gif) no-repeat; 
    } 
#main h6{ 
    position:absolute; 
    bottom:75px; 
    right:10px; 
    width:265px; 
    height:44px; 
    background:url(http://www.okrmt.com/demo7.8/images/cars-logo.gif) no-repeat; 
    } 
</style>

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

Article précédent：Conseils CSS_CSS/HTMLArticle suivant：Conseils CSS_CSS/HTML

Articles Liés

Voir plus