CSSスタイルでの位置に関することlayout_html/css_WEB-ITnose

ねえ、バックエンド開発に従事してきた人にとって、ページのレイアウトとデザインの開発は確かに非常に時間と労力がかかり、難しいものです。

今夜は、複数の写真を重ね合わせたり、写真内の異なる位置をマークしてハイパーリンクを割り当てたりしたいと考えています。最初に理解するのに一晩かかりましたが、次の CSS 属性の使い方を大まかに理解しました。

【1】ラベルをフローティングに設定して同僚とディスカッションします:

HTMLラベルにはブロックレベルとラインレベルがあり(ブロックレベルのものはBaiduで見つけることができます)、各ブロックレベルが占有しますHTML ドキュメント 1 行 (ブロック レベルの後に改行があるため 1 行)。ブロックレベルのラベルが float に設定されている場合、ラベルは次のようになります: (1) 元の親ラベルから分離されます。 (2) 1行で表示できます。

【2】位置は固定に設定されています。

fixed はブラウザ全体に対して相対的です。興味のある学生は、ラベルのサイズを固定に設定し、ブラウザをズームして、スクロール バーを引いても (上下または左右に) スクロール バーが生成されるようにして、固定に設定されたラベルを変更してみることができます。その場所の。

【3】位置を絶対位置に設定します。

absolute は、最も近い親タグを基準にしています。上記と同じ実験ですが、スクロール バーを引くと、HTML ドキュメントの位置の変更に応じて絶対に設定されたラベルも変更されます。

【4】位置を相対に設定します。

relative は、ラベルの元の位置を基準にしています。

以下は効果を確認するために今夜作ったテスト画像です:

(1) 線aは絶対です

(2) 線bは固定です。

上の図の主な目的は、ディスク内のmake1~8の位置をマークし、ハイパーリンクを付けることです。 具体的なコードは次のとおりです:

<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><div class="roundMakeBox">	<div class="roundLink">		<img  src="/static/imghwm/default1.png" data-src="makeRound.png" class="lazy" alt="CSSスタイルでの位置に関することlayout_html/css_WEB-ITnose" >		<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  class="makeR9 lazy" src="/static/imghwm/default1.png" data-src="LOGObg.png" id="img1" alt="CSSスタイルでの位置に関することlayout_html/css_WEB-ITnose" >	</div>
</div>