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

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

WBOYOriginal: 2016-05-16 12:12:301479Durchsuche

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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-Tipps_CSS/HTMLNächster Artikel：CSS-Tipps_CSS/HTML

In Verbindung stehende Artikel

Mehr sehen