Web 標準レイアウトのサンプルチュートリアル、位置決めを使用して複雑な CSS レイアウトを簡単に解決する

ホームページ

ウェブフロントエンド

CSSチュートリアル

Web 標準レイアウトのサンプルチュートリアル、位置決めを使用して複雑な CSS レイアウトを簡単に解決する_CSS/HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:12 PM

標準を学ぶためにクラシックフォーラムに来る友人の 99% は、W3C への参加やプロの研究者になることが目的ではないと思います。では、皆さんは何の目的で来ているのでしょうか?実は、仕事を探すときに「Web 標準に精通している必要がある」と困らないように、標準的な学習を通じて自分にスキルを 1 つ追加したいだけなのです。次の例では、xhtml は異なります。セマンティクスとは何ですか? この記事の目的は、CSS での相対位置と絶対位置の使用法 (実際、この質問をする初心者がたくさんいます) と、背景を効果的に組み合わせる方法を誰もがよく理解できるようにすることです。より複雑なレイアウトを実現します。先輩方が欠点についてアドバイスをいただければ幸いです、ありがとう！

------------------------------------------ ------ ------最初のステップ----------------------------- ----- --

まず、複雑なレイアウト (不規則なレイアウト) でデモを設計しましょう:

------ ----------------------------------------------------ステップ 2---- -- ------------------------------------
コードを書いてみましょう
< HTML>

モデル

---------------------------- -- -------実際のページ効果: ------------ ------ ----------

<title>モデル</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>

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。