ホームページ > 記事 > ウェブフロントエンド > CSSスタイルでの位置に関することlayout_html/css_WEB-ITnose
CSSスタイルでの位置に関することlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:56:291081ブラウズ
ねえ、バックエンド開発に従事してきた人にとって、ページのレイアウトとデザインの開発は確かに非常に時間と労力がかかり、難しいものです。
今夜は、複数の写真を重ね合わせたり、写真内の異なる位置をマークしてハイパーリンクを割り当てたりしたいと考えています。最初に理解するのに一晩かかりましたが、次の CSS 属性の使い方を大まかに理解しました。
【1】ラベルをフローティングに設定して同僚とディスカッションします:
HTMLラベルにはブロックレベルとラインレベルがあり(ブロックレベルのものはBaiduで見つけることができます)、各ブロックレベルが占有しますHTML ドキュメント 1 行 (ブロック レベルの後に改行があるため 1 行)。ブロックレベルのラベルが float に設定されている場合、ラベルは次のようになります: (1) 元の親ラベルから分離されます。 (2) 1行で表示できます。
【2】位置は固定に設定されています。
fixed はブラウザ全体に対して相対的です。興味のある学生は、ラベルのサイズを固定に設定し、ブラウザをズームして、スクロール バーを引いても (上下または左右に) スクロール バーが生成されるようにして、固定に設定されたラベルを変更してみることができます。その場所の。
【3】位置を絶対位置に設定します。
absolute は、最も近い親タグを基準にしています。上記と同じ実験ですが、スクロール バーを引くと、HTML ドキュメントの位置の変更に応じて絶対に設定されたラベルも変更されます。
【4】位置を相対に設定します。
relative は、ラベルの元の位置を基準にしています。
以下は効果を確認するために今夜作ったテスト画像です:
(1) 線aは絶対です
(2) 線bは固定です。
上の図の主な目的は、ディスク内のmake1~8の位置をマークし、ハイパーリンクを付けることです。 具体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--<link type="text/css" rel="stylesheet" media="all" href="webCss.css">--><title>mydw</title><style>body { background:#CCCCCC;}a.makeR1{ left:150px; top:45px; width:70px; height:80px;}a.makeR2{ right:150px; top:45px;width:70px; height:80px;}a.makeR3{ left:65px; top:135px; width:70px; height:80px;}a.makeR4{ right:65px; top:135px;width:70px; height:80px;}a.makeR5{ left:65px; top:265px; width:70px; height:80px;}a.makeR6{ right:65px; top:265px;width:70px; height:80px;}a.makeR7{ right:215px; top:365px;width:70px; height:60px;}a.makeR8{ right:180px; top:160px;width:137px; height:137px;}.makeR9{ right:180px; top:160px;width:137px; height:137px;}.roundMakeBox{ position:fixed; z-index:99992; text-align:center; left:50%; margin-left:-250px; width:499px; height:501px; border:1px solid blue;}.roundLink{ position:relative; bottom:0px;z-index:99993;border:1px solid green;}.roundLink a{ display:block;position:absolute;z-index:99994;border:1px solid red;background:#FFFF00;}#img1{ display:block;position:absolute;z-index:99994;border:1px solid red;}</style></head><body><div class="roundMakeBox"> <div class="roundLink"> <img src="makeRound.png"> <a href="#" class="makeR1">makeR1</a> <a href="#" class="makeR2">makeR2</a> <a href="#" class="makeR3">makeR3</a> <a href="#" class="makeR4">makeR4</a> <a href="#" class="makeR5">makeR5</a> <a href="#" class="makeR6">makeR6</a> <a href="#" class="makeR7">makeR7</a> <a href="#" class="makeR8">makeR8</a> <img id="img1" class="makeR9" src="LOGObg.png" /> </div></div></div></body></html>
left:50%; margin-left:-250px;left:50% は、ラベルの左端が親ラベルの 50% (半分) に移動することを意味します。では、なぜ margin-left -250px が必要なのでしょうか?
なぜなら、left50% のとき、ラベルの左端は 50% に達していますが、ラベル全体が確かに右にオフセットされているからです。ラベルのセンタリングと呼ばれるものは、ラベルの中心位置が親ラベルの中心になることを意味します。Left50% は明らかにラベルの通常の位置をさらに移動します。そのため、margin-left-250px が使用されます。
位置の絶対値がわかったら、あとは位置を測るだけです（何を使うか？私は定規を使いますが、他に良い方法があるかわかりません）。