집 >웹 프론트엔드 >CSS 튜토리얼 >웹 표준 레이아웃 예제 튜토리얼, 위치 지정을 사용하여 복잡한 CSS 레이아웃을 쉽게 해결_CSS/HTML

웹 표준 레이아웃 예제 튜토리얼, 위치 지정을 사용하여 복잡한 CSS 레이아웃을 쉽게 해결_CSS/HTML

WBOY원래의: 2016-05-16 12:12:301544검색

표준을 배우기 위해 클래식 포럼에 오는 친구들 중 99%는 W3C에 가입하거나 전문 연구자가 되기 위해 오는 것이 아니라고 생각합니다. 그렇다면 모두가 오는 목적은 무엇입니까? 아주 간단합니다. 사실 제가 취업할 때 "웹 표준에 능숙해야 해요"라는 말에 당황하지 않도록 표준 학습을 통해 나 자신에게 하나의 기술을 더 추가하고 싶습니다. 다음 예에서는 xhtml이 그렇지 않습니다. 의미론은 무엇입니까? 이 기사의 목적은 CSS의 상대 위치 및 절대 위치 지정의 사용법과 배경을 효과적으로 결합하는 방법을 모두가 더 잘 이해할 수 있도록 하는 것입니다. 더 복잡한 레이아웃을 얻으려면.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>

성명：

이전 기사：CSS 팁_CSS/HTML다음 기사：CSS 팁_CSS/HTML

웹 표준 레이아웃 예제 튜토리얼, 위치 지정을 사용하여 복잡한 CSS 레이아웃을 쉽게 해결_CSS/HTML

관련 기사