ホームページ >ウェブフロントエンド >CSSチュートリアル >Web 標準レイアウトのサンプルチュートリアル、位置決めを使用して複雑な CSS レイアウトを簡単に解決する_CSS/HTML

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

WBOYオリジナル: 2016-05-16 12:12:301555ブラウズ

標準を学ぶためにクラシックフォーラムに来る友人の 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 までご連絡ください。

前の記事：CSS のヒント_CSS/HTML次の記事：CSS のヒント_CSS/HTML

続きを見る

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

関連記事

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