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

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

WBOY

Libérer： 2016-05-16 12:12:30

original

1531 Les gens l'ont consulté

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>