自分で整理した DIV の一般的に使用される属性の包括的なリスト_HTML/Xhtml_Web ページ制作

1. 属性リスト

コードをコピーします

コードは次のとおりです:

color: #999999 文字色
font-family: 歌風フォント
font-size: 10pt 文字サイズ
font-style:itelic 斜体文字スタイル
font-variant:small- caps small フォント
letter-spacing: 1pt テキスト間隔
line-height: 200% 行の高さを設定
font-weight:bold テキスト太字
vertical-align:sub 下付き文字
vertical -align :super Superscript
text-decoration:line-through ?h を追加して line
text-decoration:overline 先頭行を追加
text-decoration:underline 下線を追加
text-decoration: none ?hExcept最後の行を接続するための
text-transform: Capitalize 最初の単語は大文字になります
text-transform: 英語の大文字化
text-transform: 英語の小文字表記
text-align:right Text * right- aligned
text-align:left text*leftalignment
text-align:center text centeralignment
これらは、CSS ページに適用できるいくつかの単純なテキスト効果です。
背景
background-color: black 背景色
background-image: url(image/bg.gif) 背景画像
background-attachment: 固定 固定背景
background-repeat: 繰り返し 繰り返し配置 - Web ページのデフォルト
background-repeat: no-repeat 非繰り返し配置
background-repeat:repeat-x は配置を x 軸で繰り返します
background-repeat:repeat-y は配置を繰り返しますy 軸
background-position: 90% 90% 背景画像の x 軸と y 軸の位置
Link
A すべてのハイパーリンク
A:link ハイパーリンクのテキスト形式
A :visited 閲覧したリンクのテキスト形式
A:active 接続形式を押します
A:hover マウスを接続に移動します
Border
border-top: 1px 塗りつぶした黒の上部フレーム
border-bottom : 1px 実線 #6699cc 下枠
border-left : 1px 実線 #6699cc 左枠
border-right : 1px 実線 #6699cc 右枠
border: 1px 実線 #6699cc 4 つの枠線
点線
<br>実線<br><TEXTAREA STYLE="border:1px 実線ピンク"><br />div の高さを次のように設定します。テキストの行の高さと同じ、つまり line-height と height の値が同じであれば十分です。 最後に、div に overflow:hidden を与えて余分な部分を非表示にします。 <br /></div><br /><strong> 2. 共通属性 </strong> <br /> <br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));"><u>コードをコピー</u></span></div>コードは次のとおりです:</div><div class="msgborder" id="phpcode95"> <br />1. 高さ: DIV の高さを設定します。 幅: DIV の幅を設定します。 <br />2. マージン: DIV の拡張マージン (親コンテナまでの距離) を設定するために使用されます。 margin: 親コンテナの上、右、下、左からそれぞれ 4 つの距離が続きます。 margin: [top][right][bottom][left] <br /> は個別に設定できます: margin-left: までの距離親コンテナの左境界までの距離 margin-right: 親コンテナの右境界までの距離 margin-bottom: 親コンテナの下境界までの距離親コンテナ。 <br />3. パディング: DIV の内側のマージン (内側の要素と DIV 境界の間の距離) を設定するために使用されます。パディング: 親コンテナの上、右、下、左からの距離である 4 つの距離が続きます。マージン: [上][右][下][左]: によって設定される距離に注意してください。パディングは、独自の幅と高さ内 (IE7 および FF) には含まれません。たとえば、DIV の幅が 100 ピクセルに設定され、padding-left が 50 ピクセルに設定されている場合、DIV の幅は 150 ピクセルになります。ページに表示されます。 <br />4. 境界線: DIV の境界線のスタイルを設定します。表示: 表示属性を設定します。その値には、ブロックとなしが含まれます。ページ上の DIV のフロー方向を設定します。その値には、左 (左側に表示)、右 (右側に表示)、およびなしが含まれます。 DIV の背景スタイルを設定します。背景の後に、背景色、背景画像、タイリング方法などのスタイルを直接指定できます。次のプロパティを使用して個別に設定することもできます。 <br />background-color: 背景色を設定します。background-attachment: 背景画像の添付方法、その値はスクロールおよび固定です。background-repeat: 既存の背景画像を指定します。背景画像のタイリング方法。その値には、 no-repeat (タイル化されない)、repeat (2 方向にタイル化される)、repeat-x (水平方向にタイル化される)、repeat-y (垂直方向にタイル化される) が含まれます。その値には、上、下、左、右のさまざまな組み合わせがあります。座標を使用して特定の場所を指定することもできます。 <br />5.位置：DIVの位置決め方法を設定します。位置には、静的、固定、相対、および絶対の 4 つの属性があります。一般的に使用されるのは相対的と絶対的です。静的として指定されている場合、DIV は HTML ルールに従います。相対として指定されている場合は、top、left、right、bottom を使用してページ内での DIV のオフセット (独自のオフセットを基準とした) を設定できます。現時点ではレイヤーは使用できません。固定として指定されている場合は、上、左、右、下を使用して DIV を絶対的に配置できます。 IE7 と FF の DIV は画面に対して固定されており、IE6 では影響がありません (理由はわかりません)。 <br />6. フォント: DIV でテキストのスタイルを指定します。その後にテキストの複数のスタイルを指定できます。 font-family: 使用するフォント名を設定します。 font-weight: テキストの太さを指定します。その値には、太字、太字、太字などの値が含まれます。テキストのスタイルを指定します。その値には斜体、通常の斜体などが含まれます。 color: テキストの色を指定します。 text-align: テキストの水平方向の配置を指定します。その値には、中央 (中央) のテキストが含まれます。 -decorator: テキストの装飾に使用されます。その値には、下線、上線、ブリンクの組み合わせが含まれます。text-indent: テキストのインデントを設定します。text-transform: テキストの大文字と小文字を設定します。その値には、小文字、大文字、大文字化 (最初の文字を大文字にする) が含まれます。 方向: コンテンツのフロー方向。その値には、ltr (左から右)、rtl (右から左) が含まれます。 line-height: テキストの行の高さを指定します。 Word-spacing: 単語の間隔。 <br />7. オーバーフロー: コンテンツのオーバーフロー制御。その値には、scroll (スクロール バーは常に表示されます)、visible (スクロール バーは表示されませんが、余分な部分は表示されます)、auto (コンテンツが表示されるときにスクロール バーが表示されます) が含まれます。を超えます）、および非表示（コンテンツがコンテンツを超えるとスクロールバーが表示されます）。 <br /><br /><br /><strong>3. いくつかの特殊効果: <br /><br /></strong>1. z-index: DIV のスタック順序を設定します。 z-index 属性を使用する場合は、位置を絶対として指定する必要があります。 <br /><br />2. カーソル: DIV 上のカーソルのスタイルを設定します。 <br /><br />3. クリップ: クリッピング長方形を設定します。 Clip:rect(top rightbottom left); 上下左右の距離を設定しますが、このとき位置は絶対指定する必要があります。 <br /><br />4. 不透明度透明度フィルター:alpha(opacity=value) 例: filter:alpha(opacity=50);opacity:0.5; <br /><br /><strong>4. </strong><br /><br />絶対位置と相対位置 (位置)<strong> </strong><br />絶対位置: <br /><br />位置属性はネチズンの幸福の鍵となります: <br /><br />H4 {position:Absolute; left: 100px; top: 43px } <br /><br />この CSS ルールにより、ブラウザーのピクセルの左側から正確に 100 個のアイコンの開始位置を設定できます。上から 43 ピクセルです。ここでの設定は左と上のみであることに注意してください。つまり、テキストはブラウザ ウィンドウに左から右、上から下に入力されます。 <br /><br />left 属性と top 属性は非常に直感的です。Left (左) はブラウザ ウィンドウの左側からの距離を設定し、top (上) はブラウザ ウィンドウの上部からの距離を設定します。これらの距離を設定するときは、学習したさまざまな度単位やスケール値を使用できます。スケール値を使用する場合、スケール値は親フィーチャの寸法を基準とします。 <br /><br />何をターゲットにできますか?何でも！段落、単語、GIF および JPEG 画像、QUICKTIME ムービーなど。 <br /><br />相対配置: <br /><br />絶対配置を使用すると、ページ上の他の要素の配置設定に関係なく、要素をページ上の独立した位置に正確に配置できます。相対配置とは、配置しているフィーチャの位置が、ファイル内で割り当てられた位置に対して相対的であることを意味します。例: <br /><br />I {position:relative; left: 40px; top: 10px } <br /><br />相対配置の重要な点は、配置された要素の位置が通常の位置を基準にしていることです。 。相対位置決めユニットは、通常の静止位置決めユニットの行間に出現し、静止位置決めユニットから完全に分離せずに位置決めされます。相対配置の使用を中止すると、テキストの表示位置は通常の位置に戻ります。相対位置を使用する場合は注意してください。そうしないと、ページが乱雑になりやすくなります。 <br /><br />相対位置決めと絶対位置決めに加えて、静的パラメーター値も使用できます。 static は、position 属性のデフォルト値です。使い方は通常のHTMLにおける配置方法と同じであり、特別な配置設定を付けることはできません。つまり、margin プロパティ、または float プロパティを使用してセルを浮動させること以外は、セルの位置に影響を与えることはできません。 <br /><br /><br />位置決めユニットの制御 (幅、高さ、可視性) <strong> </strong><br />位置決めユニットの左上隅の位置を制御することに加えて、幅と高さを制御することもできます。ユニットの高さ、およびページ上のユニットの可視性。 <br /><br />幅: 配置された要素は、ページ上に表示されるときにも左から右に表示されます。 width 属性を使用すると、右側の文字の流れに制限を設定する、つまり要素の幅を設定できます。 <br /><br />DIV { 位置: 絶対; 左: 200px; 上: 40px; 幅: 150px } <br /><br /> ブラウザは、このルールで指定された効果に従ってテキストを表示します。 、また、段落の最大水平サイズを 150 ピクセルに制限します。 <br /><br />幅属性は、絶対配置されたフィーチャにのみ適用されます。学習した長さの単位を使用することも、親フィーチャを基準としたスケール値を使用して幅を設定することもできます。 IE 4 では、この属性は画像にも使用できます。幅設定を使用して、画像を人為的に広げたり圧縮したりできます。 <br /><br />高さ: 理論的には、高さは幅と同様に設定する必要がありますが、垂直方向に設定する必要があります。 } <br /><br />一部のブラウザでは高さ属性がサポートされていないため、ここでは「理論的に」としています。 <br /><br />可視性: CSS を使用すると、要素がページ上に表示されないように非表示にすることができます。この属性は、位置が特定されたフィーチャと位置が特定されていないフィーチャの両方に適用されます。 <br /><br />H4 { Visibility: hidden } <br /><br />オプション: <br /><br />visible は機能を表示します<br /><br />hidden は機能を非表示にします<br /><br />inherit を示します親フィーチャの表示設定を継承することになります。 <br /><br />値継承はデフォルト値です。これにより、セルは親セルの表示設定を継承します。したがって、段落が非表示の場合、段落に含まれるインライン セルも非表示になります。この継承は、明示的に指定された可視性によってオーバーライドできます。たとえば、セクション内の EM セルが表示可能に指定され、そのセクションが非表示になっている場合、セクション内の他のコンテンツはすべて表示されなくなり、EM セル内のテキストのみが表示されます。 <br /><br />要素が非表示になっている場合でも、要素はブラウザ ウィンドウ内の元のスペースを占有します。したがって、非表示の画像の周りにテキストを折り返すと、テキストが空のスペースを囲んでいるかのように見えます。このニュース <br /><br />この属性は、言語を作成する場合や動的 HTML を使用する場合に便利です。たとえば、特定の段落や画像をマウスがロールオーバーしたときにのみ表示されるようにすることができます。 <br /><br /><br />ユニットレベル (z-index) <br /> <br /><strong>z-index 属性は、画面上にセルをスタックするために使用されます。デフォルトでは、ユニットは HTML タグに出現する順序で積み重ねられます。つまり、後に出現するユニットは、先に出現するユニットの上に積み重ねられます。 Z-index プロパティは、実際には兄弟ユニットの積み重ね順序と、親ユニットに対する相対的なユニットの積み重ねを定義します。ドラフト仕様によると、正の Z インデックス値を持つユニットのグループは親ユニットの上にスタックされ、独自のスタック順序は値の大きさによって決定されます (より大きな値を持つユニットが上に配置されます)トップ）。同様に、負の Z インデックス値を持つユニット グループは親ユニットの下にスタックされ、独自のスタック順序も値の大きさによって決まります (たとえば、より大きな値を持つユニットが上位層にあります) 、値が -1 のユニットは、ユニットの -2 上の上位層にあります。 <br /><br />このパラメータ値には純粋な整数を使用してください。 z-index は、絶対的に配置されたフィーチャまたは相対的に配置されたフィーチャに使用されます。画像の Z インデックスを設定することもできます。 (Communicator の場合、<IMG> タグを <SPAN> または <DIV> タグ内で囲んでから、z-index を <SPAN> または <DIV> に適用することが最善です。) <br><br> <strong>絶対位置のユニットをクリップ (クリップ) <br></strong><br>絶対位置のユニットをクリップできます。つまり、ユーザーに表示される領域をクリップし、ユニットの一部のみを表示し、残りを透明にします。 。これは、従来のテキストおよび画像ベースの Web ページにとってはあまり便利な機能ではありません。ただし、これはマルチメディア ページが必要な場合に便利です。たとえば、Netscape Communivator 4 と Internet Explorer 4 はどちらもマルチメディア ページをサポートしており、ドキュメントのスクリプト インターフェイスを通じてユニットの周囲のクリッピング領域を動的に調整するため、実線のテキストが「クロスイン」し、画像がフェードインし、その他の表示機能が表示されます。 <br><br>CSS では、クリップ機能によってこの機能を制御できます。この機能は絶対配置されたユニットにのみ使用できます。デフォルト値は auto で、ユニットの外側の端に従ってクリップされます (実際にはクリップなし)。 。さらに、クリップ ボックスは次の式で設定できます: <br><br>clip : rect(top,right.bottom,left); <br><br> ここで、top、right、bottom、left は長方形です。クリップ ボックスのそれぞれ、クリップされたユニットの左上隅を基準とした上端、右端、下端、左端の位置。 Top、right、bottom、left の値には、絶対長または相対長の値 (パーセンテージ値ではない)、またはキーワード auto を指定できます。 auto の値は、クリッピング領域のすべての辺が配置された後、クリッピングされたユニット内のコンテンツがこの領域を超えないことを意味します。 <br><br><strong>制御ユニットのオーバーフロー (オーバーフロー) </strong> <br><br>絶対位置決めユニットまたは相対位置決めユニットの幅と高さを固定します。指定された領域がニーズを満たさない可能性があります。これにより、ユニットのコンテンツがオーバーフローします。オーバーフローを使用して、ブラウザがオーバーフローを処理する方法を指定できます。値 none (デフォルト) を指定すると、ブラウザはオーバーフロー コンテンツを表示できるため、セルが指定された領域をオーバーフローする可能性があります。値クリップでは、指定された領域を超えるセルの内容が表示されないように、ブラウザーがセルの下部と右側でセルの内容をクリップする必要があります。値スクロールでは、ブラウザーがセルの下部と右側でセルの内容をクリップする必要もあります (クリップと同じ)。ただし、ユーザーがクリップされた内容をスクロールできるように、ブラウザーは (可能であれば) セルにスクロール バーを提供する必要があります。コンテンツ。</div> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796789525.html" title="Windows11 KB5054979の新しいものと更新の問題を修正する方法" class="phpgenera_Details_mainR4_bottom_title">Windows11 KB5054979の新しいものと更新の問題を修正する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796785857.html" title="Atomfallのクレーンコントロールキーカードを見つける場所" class="phpgenera_Details_mainR4_bottom_title">Atomfallのクレーンコントロールキーカードを見つける場所</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796783009.html" title="アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法" class="phpgenera_Details_mainR4_bottom_title">アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 か月前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796784440.html" title="<🎜>：Dead Rails-すべての課題を完了する方法" class="phpgenera_Details_mainR4_bottom_title"><🎜>：Dead Rails-すべての課題を完了する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットAIツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>リアルなヌード写真を作成する AI 搭載アプリ</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>写真から衣服を削除するオンライン AI ツール。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>脱衣画像を無料で</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI衣類リムーバー</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796789525.html" title="Windows11 KB5054979の新しいものと更新の問題を修正する方法" class="phpgenera_Details_mainR4_bottom_title">Windows11 KB5054979の新しいものと更新の問題を修正する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796785857.html" title="Atomfallのクレーンコントロールキーカードを見つける場所" class="phpgenera_Details_mainR4_bottom_title">Atomfallのクレーンコントロールキーカードを見つける場所</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796783009.html" title="アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法" class="phpgenera_Details_mainR4_bottom_title">アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 か月前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796784440.html" title="<🎜>：Dead Rails-すべての課題を完了する方法" class="phpgenera_Details_mainR4_bottom_title"><🎜>：Dead Rails-すべての課題を完了する方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title"> <h3>メモ帳++7.3.1</h3> </a> <p>使いやすく無料のコードエディター</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 中国語版</h3> </a> <p>中国語版、とても使いやすい</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title"> <h3>ゼンドスタジオ 13.0.1</h3> </a> <p>強力な PHP 統合開発環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"> <h3>ドリームウィーバー CS6</h3> </a> <p>ビジュアル Web 開発ツール</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神レベルのコード編集ソフト（SublimeText3）</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>ホットトピック</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7621</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1389</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/steamdzhmcssmgs" title="Steamのアカウント名の形式は何ですか" class="phpgenera_Details_mainR4_bottom_title">Steamのアカウント名の形式は何ですか</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>89</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/winactivationkeyper" title="Win11 Activation Key Permanent" class="phpgenera_Details_mainR4_bottom_title">Win11 Activation Key Permanent</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>70</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>31</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>136</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/faq/zt">もっと見る</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/500390.html" title="CSSを使用してdivの角が欠けていることを認識する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202301/30/2023013009193331216.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSを使用してdivの角が欠けていることを認識する方法" /> </a> <a href="https://www.php.cn/ja/faq/500390.html" title="CSSを使用してdivの角が欠けていることを認識する方法" class="phphistorical_Version2_mids_title">CSSを使用してdivの角が欠けていることを認識する方法</a> <span class="Articlelist_txts_time">Jan 30, 2023 am 09:23 AM</span> <p class="Articlelist_txts_p">div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/530809.html" title="ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/168292609556078.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装" /> </a> <a href="https://www.php.cn/ja/faq/530809.html" title="ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装" class="phphistorical_Version2_mids_title">ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装</a> <span class="Articlelist_txts_time">May 01, 2023 pm 03:28 PM</span> <p class="Articlelist_txts_p">はじめに 最近 GitHub に ChatGPTAPI をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 12k に達しました 翻訳だけでなく磨きや要約機能もサポートしています ブラウザプラグに加えて-ins, tauri パッケージも使用します。デスクトップ クライアントをお持ちの場合は、tauri が Rust 部分を使用するという事実を除けば、ブラウザ部分の実装はまだ比較的簡単です。今日は手動で実装します。 openAI によって提供されるインターフェイス。たとえば、次のコードをコピーし、ブラウザ コンソールでリクエストを開始して変換を完了できます。 //Example constOPENAI_API_KEY="s</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/617459.html" title="divボックスモデルとは何ですか" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202310/09/2023100916235185066.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="divボックスモデルとは何ですか" /> </a> <a href="https://www.php.cn/ja/faq/617459.html" title="divボックスモデルとは何ですか" class="phphistorical_Version2_mids_title">divボックスモデルとは何ですか</a> <span class="Articlelist_txts_time">Oct 09, 2023 pm 05:15 PM</span> <p class="Articlelist_txts_p">div ボックス モデルは、Web ページのレイアウトに使用されるモデルです。Web ページ内の要素を長方形のボックスとして扱います。このモデルには、コンテンツ領域、パディング、ボーダー、マージンの 4 つの部分が含まれています。 div ボックス モデルの利点は、Web ページのレイアウトと要素間の間隔を簡単に制御できることであり、コンテンツ領域、内側の余白、境界線、外側の余白のサイズを調整することで、さまざまなレイアウト効果を実現できます。ボックス モデルには、CSS と JavaScript を通じてボックスのスタイルと動作を動的に変更できるいくつかのプロパティとメソッドも用意されています。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/599024.html" title="iframeとdivの違いは何ですか" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202308/28/2023082811424957714.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="iframeとdivの違いは何ですか" /> </a> <a href="https://www.php.cn/ja/faq/599024.html" title="iframeとdivの違いは何ですか" class="phphistorical_Version2_mids_title">iframeとdivの違いは何ですか</a> <span class="Articlelist_txts_time">Aug 28, 2023 am 11:46 AM</span> <p class="Articlelist_txts_p">iframe と div の違いは、iframe は主に外部コンテンツを導入するために使用され、他の Web サイトからコンテンツをロードしたり、Web ページを複数の領域に分割したりできます。各領域には独自の独立した閲覧コンテキストがあり、div は主に分割および分割するために使用されます。コンテンツを整理し、レイアウトとスタイルを制御するためのブロック。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/624838.html" title="divとspanの違いは何ですか?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202311/02/2023110214291073075.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="divとspanの違いは何ですか?" /> </a> <a href="https://www.php.cn/ja/faq/624838.html" title="divとspanの違いは何ですか?" class="phphistorical_Version2_mids_title">divとspanの違いは何ですか?</a> <span class="Articlelist_txts_time">Nov 02, 2023 pm 02:29 PM</span> <p class="Articlelist_txts_p">違いは次のとおりです: 1. div はブロックレベル要素であり、span はインライン要素です。2. div は自動的に行を占有しますが、span は自動的に折り返されません。3. div はより大きな構造とレイアウトを折り返すために使用されます。テキストまたは他のインライン要素をラップするために、span が使用されます。4. div には他のブロックレベル要素とインライン要素を含めることができ、span には他のインライン要素を含めることができます。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/686724.html" title="jQuery のヒント: div にタグを追加する方法をマスターする" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170866747358643.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery のヒント: div にタグを追加する方法をマスターする" /> </a> <a href="https://www.php.cn/ja/faq/686724.html" title="jQuery のヒント: div にタグを追加する方法をマスターする" class="phphistorical_Version2_mids_title">jQuery のヒント: div にタグを追加する方法をマスターする</a> <span class="Articlelist_txts_time">Feb 23, 2024 pm 01:51 PM</span> <p class="Articlelist_txts_p">タイトル: jQuery ヒント: div にタグを追加する方法をマスターする Web 開発では、ページにタグを動的に追加する必要がある状況によく遭遇します。 jQuery を使用すると、DOM 要素を簡単に操作し、高速なラベル追加機能を実現できます。この記事では、jQueryを使ってdivにタグを追加する方法と、具体的なコード例を紹介します。 1. 準備作業 jQueryを使用する前に、CDNリンクから導入するか、このページからダウンロードしてjQueryライブラリをページに導入する必要があります。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/682562.html" title="jQueryを使用してdiv要素を追加する簡単な方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170834781149477.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQueryを使用してdiv要素を追加する簡単な方法" /> </a> <a href="https://www.php.cn/ja/faq/682562.html" title="jQueryを使用してdiv要素を追加する簡単な方法" class="phphistorical_Version2_mids_title">jQueryを使用してdiv要素を追加する簡単な方法</a> <span class="Articlelist_txts_time">Feb 19, 2024 pm 09:03 PM</span> <p class="Articlelist_txts_p">シンプルでわかりやすい jQuerydiv 要素の追加テクニック jQuery はフロントエンド開発でよく使われる JavaScript ライブラリの 1 つで、DOM 要素を操作するための便利なメソッドを提供し、ページ要素の追加、削除、変更などの機能を素早く実行できます。 jQueryを利用する際にdiv要素を操作する必要がある場合が多いですが、ここではdiv要素を追加するための簡単で分かりやすいテクニックと具体的なコード例を紹介します。 1. 新しい div 要素を作成して追加します</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/624132.html" title="2つのdivを並べて表示する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202311/01/2023110111343491842.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="2つのdivを並べて表示する方法" /> </a> <a href="https://www.php.cn/ja/faq/624132.html" title="2つのdivを並べて表示する方法" class="phphistorical_Version2_mids_title">2つのdivを並べて表示する方法</a> <span class="Articlelist_txts_time">Nov 01, 2023 am 11:36 AM</span> <p class="Articlelist_txts_p">方法は、 1. 2 つの div 要素に「float:left;」属性を設定する; 2. CSS のフレックス レイアウトを使用して要素を簡単に並べて表示する; 3. CSS のグリッド レイアウトを使用して要素も並べて表示する; です。</p> </div> </div> <a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ja/about/us.html">私たちについて</a> <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745233470"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>