Beispiel-Tutorial für ein Web-Standardlayout. Verwenden Sie die Positionierung, um komplexe CSS-Layouts_CSS/HTML einfach zu lösen-CSS-Tutorial-php.cn

Beispiel-Tutorial für ein Web-Standardlayout. Verwenden Sie die Positionierung, um komplexe CSS-Layouts_CSS/HTML einfach zu lösen

WBOY

Freigeben： 2016-05-16 12:12:30

Original

1533 Leute haben es durchsucht

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.Ich hoffe, die Senioren können mir ein paar Hinweise auf die Mängel geben, vielen Dank!

---------------- ------ ------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

------------------------------ --------------------Tatsächlicher Seiteneffekt:----------- ------ ----------

<title>Modell</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>