자신_HTML/Xhtml_웹페이지 제작별로 구성된 DIV의 일반적으로 사용되는 속성 종합 목록-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

자신_HTML/Xhtml_웹페이지 제작별로 구성된 DIV의 일반적으로 사용되는 속성 종합 목록

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

div

1. 속성 목록

코드 복사

코드는 다음과 같습니다.

color: #999999 텍스트 색상
font-family: 노래 스타일 글꼴
font-size: 10pt 텍스트 크기
font-style:itelic 텍스트 기울임꼴 스타일
font-variant:small- caps small Font
letter-spacing: 1pt 텍스트 간격
line-height: 200% 줄 높이 설정
font-weight:bold Textbold
vertical-align:sub Subscript
vertical -align :super Superscript
text-dresseration:line-through 줄을 나누려면 ?h 추가
text-design:overline 윗줄 추가
text-꾸밈:underline 밑줄 추가
text-꾸밈: 없음 ?hExcept 결론 연결용
text-transform: capitalize 첫 번째 단어는 대문자로
text-transform: 대문자 영어 대문자
text-transform: 소문자 영어 쓰기
text-align:right Text * right- 정렬
text-align:왼쪽 텍스트*왼쪽 정렬
text-align:가운데 텍스트 가운데 정렬
CSS 페이지에 적용할 수 있는 몇 가지 간단한 텍스트 효과입니다.
배경
배경색: 검정색 배경색
배경이미지: url(image/bg.gif) 배경 이미지
배경첨부: 고정 고정배경
배경반복: 반복 반복 배열 - 웹페이지 기본
background-repeat: no-repeat 비반복 배열
background-repeat:peat-x는 x축에서 배열을 반복합니다
background-repeat:repeat-y는 배열을 반복합니다. y축
배경 위치: 90% 90% 배경 이미지의 x 및 y축 위치
링크
A 모든 하이퍼링크
A:link 하이퍼링크 텍스트 형식
A :visited 탐색된 링크 텍스트 형식
A:active 연결 형식 누르기
A:hover 마우스를 연결
테두리
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 solid pink"> 텍스트의 줄 높이와 동일, 즉 line- 높이와 높이의 값이 동일하면 충분합니다. 마지막으로 div에 오버플로: 숨김을 지정하여 초과된 부분을 숨깁니다. <br><br>
</div>
<br> 2. 공통 속성 <strong> </strong> <br><br><div class="msgheader">
<div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));">코드 복사<u></u></span>코드 다음과 같습니다.</div>
<div class="msgborder" id="phpcode95"> <br>1. 높이: DIV의 높이를 설정합니다. 너비: DIV의 너비를 설정합니다. <br>2. Margin: DIV의 확장된 여백(상위 컨테이너까지의 거리)을 설정하는 데 사용됩니다. margin: 뒤에는 상위 컨테이너의 위쪽, 오른쪽, 아래쪽 및 왼쪽으로부터 각각 4개의 거리가 옵니다. margin: [top][right][bottom][left] <br> 별도로 설정할 수 있습니다: margin-left: 거리 margin-right: 부모 컨테이너의 오른쪽 테두리까지의 거리 margin-top: 부모 컨테이너의 아래쪽 테두리까지의 거리 상위 컨테이너. <br>3. 패딩: DIV의 내부 여백(내부 요소와 DIV 경계 사이의 거리)을 설정하는 데 사용됩니다. padding: 그 뒤에 상위 컨테이너의 위쪽, 오른쪽, 아래쪽 및 왼쪽으로부터의 거리인 4개의 거리가 옵니다. margin: [top][right][bottom][left]: 거리는 다음과 같이 설정됩니다. 패딩은 자체 너비 및 높이 내(IE7 및 FF)에 포함되지 않습니다. 예를 들어 DIV의 너비가 100px로 설정되고 padding-left가 50px로 설정된 경우 DIV의 너비는 150px입니다. 페이지에 표시됩니다. <br>4. 테두리: DIV 표시의 테두리 스타일을 설정합니다. 표시 속성을 설정합니다. 해당 값에는 블록 및 없음이 포함되며, 부동 소수점: 페이지에서 DIV의 흐름 방향을 설정합니다. 해당 값에는 왼쪽(왼쪽에 표시됨), 오른쪽(오른쪽에 표시됨) 및 없음이 포함됩니다. <br> DIV의 배경 스타일을 설정하면 배경 색상, 배경 이미지, 타일링 방법 및 기타 스타일을 직접 따를 수 있습니다. 다음 속성을 사용하여 별도로 설정할 수도 있습니다. <br>Background-color: 배경색을 설정합니다. background-attachment: 배경 이미지의 첨부 방법, 해당 값은 스크롤 및 고정입니다. background-image: 기존 배경 이미지를 지정합니다. 배경 이미지의 타일링 방법. 해당 값에는 no-repeat(타일링되지 않음), 반복(두 방향으로 타일링됨),peat-x(가로 타일링),repeat-y(세로 타일링)가 포함됩니다. background-position: DIV에서 배경 위치를 지정합니다. 그 값은 상단 하단 왼쪽 오른쪽의 다양한 조합을 갖습니다. 좌표를 사용하여 특정 위치를 지정할 수도 있습니다. <br>5. 위치: DIV의 위치 지정 방법을 설정합니다. 위치에는 정적, 고정, 상대 및 절대의 네 가지 속성이 있습니다. 일반적으로 상대적인 것과 절대적인 것이 사용됩니다. 정적으로 지정된 경우 DIV는 HTML 규칙을 따릅니다. 상대 항목으로 지정된 경우 위쪽, 왼쪽, 오른쪽 및 아래쪽을 사용하여 페이지에서 DIV의 오프셋(자체 오프셋을 기준으로)을 설정할 수 있습니다. 현재 레이어는 사용할 수 없습니다. 절대값으로 지정하면 위쪽, 왼쪽, 오른쪽 및 아래쪽을 사용하여 DIV를 가장 가까운 상위 요소에 절대 위치로 지정할 수 있습니다. IE7과 FF의 DIV는 화면을 기준으로 고정되어 있습니다. 변경 사항이 없으며 IE6에서는 효과가 없습니다(이유는 모르겠습니다). <br>6. DIV의 텍스트 스타일을 지정합니다. 그 뒤에는 다양한 텍스트 스타일이 올 수 있습니다. 글꼴 패밀리: 사용할 글꼴 이름을 설정합니다. 글꼴 무게: 텍스트의 두께를 지정합니다. 해당 값에는 굵은 글꼴, 라이터 등이 포함됩니다. 텍스트 스타일을 지정합니다. 값에는 기울임꼴 일반 경사 등이 포함됩니다. color: 텍스트 색상을 지정합니다. -데코레이터: 텍스트 장식에 사용됩니다. 해당 값에는 밑줄 없음 및 깜박임 조합이 포함됩니다. 텍스트 들여쓰기: 텍스트의 대소문자를 설정합니다. 해당 값에는 소문자 대문자 대문자(첫 글자를 대문자로 표시)가 포함됩니다. 없음 방향: 콘텐츠의 흐름 방향. 해당 값에는 ltr(왼쪽에서 오른쪽으로), rtl(오른쪽에서 왼쪽으로)이 포함됩니다. line-height: 텍스트의 줄 높이를 지정합니다. Word-spacing: 단어 간격. <br>7. 오버플로: 콘텐츠 오버플로 제어. 해당 값에는 스크롤(스크롤 막대가 항상 표시됨), 표시(스크롤 막대가 표시되지 않지만 초과 부분이 표시됨), 자동(콘텐츠가 표시될 때 스크롤 막대가 표시됨)이 포함됩니다. 초과) 및 숨김(콘텐츠가 초과되면 스크롤 막대가 표시됨)이 있습니다. <br>
</div>
<br><strong>3. 일부 특수 효과: <br><br></strong>1. z-index: DIV의 스택 순서를 설정합니다. z-index 속성을 사용할 때 위치는 절대값으로 지정되어야 합니다. <br><br>2. 커서: DIV의 커서 스타일을 설정합니다. <br><br>3. 클립: 클리핑 사각형을 설정합니다. Clip:Rect(top right lower 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 { 위치: 절대; 왼쪽: 100px; 상단: 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 { 위치: 절대; 왼쪽: 40px; 너비: 150px } <br><br>브라우저는 이 규칙을 수신하면 규칙에 지정된 효과에 따라 텍스트를 표시합니다. , 단락의 최대 가로 크기를 150픽셀로 제한합니다. <br><br>너비 속성은 절대 위치에 있는 지형지물에만 적용됩니다. 우리가 배운 길이 단위를 사용하거나 상위 기능에 상대적인 배율 값을 사용하여 너비를 설정할 수 있습니다. IE 4에서는 이 속성을 이미지에도 사용할 수 있습니다. 너비 설정을 통해 이미지를 인위적으로 넓히거나 압축할 수 있습니다. <br><br>높이: 이론적으로 높이는 너비와 유사하게 설정되어야 하지만 세로 방향은 다음과 같습니다. <br><br>DIV { position: left: 200px height: 150px; } <br><br>여기서는 일부 브라우저가 높이 속성을 지원하지 않기 때문에 "이론적으로"를 사용합니다. <br><br>가시성: CSS를 사용하면 요소가 페이지에 표시되지 않도록 숨길 수 있습니다. 이 속성은 발견된 지형지물과 발견되지 않은 지형지물 모두에 적용됩니다. <br><br>H4 { visible: hide } <br><br>옵션: <br><br>visible은 기능을 표시합니다<br><br>hidden은 기능을 숨깁니다<br><br>inherit 상위 기능의 가시성 설정을 상속합니다. <br><br>inherit 값이 기본값입니다. 이렇게 하면 셀이 상위 셀의 가시성을 상속하게 됩니다. 따라서 단락이 숨겨져 있으면 여기에 포함된 인라인 셀도 숨겨집니다. 이 상속은 명시적으로 지정된 가시성을 통해 재정의될 수 있습니다. 예를 들어, 섹션 내의 EM 셀이 표시되도록 지정되고 해당 섹션이 숨겨지면 해당 섹션 내의 다른 모든 콘텐츠는 사라지고 EM 셀의 텍스트만 표시됩니다. <br><br>요소가 숨겨져도 브라우저 창의 원래 공간을 차지합니다. 따라서 숨겨진 이미지 주위에 텍스트를 배치하면 텍스트가 빈 공간을 둘러싸는 것처럼 나타납니다. 이번 소식<br><br>이 속성은 언어를 작성할 때나 동적 HTML을 사용할 때 유용합니다. 예를 들어 특정 단락이나 이미지를 마우스로 가리킬 때만 표시되도록 할 수 있습니다. <br><br><br>단위 수준(Z-색인) <strong> </strong><br>z-index 속성은 화면에 셀을 쌓는 데 사용됩니다. 기본적으로 단위는 HTML 태그에 나타나는 순서대로 쌓입니다. 즉, 나중에 나타나는 단위는 먼저 나타나는 단위 위에 쌓입니다. Z-index 속성은 실제로 형제 단위의 스택 순서와 상위 단위를 기준으로 한 단위의 스택을 정의합니다. 초안 사양에 따르면 양의 z-index 값을 가진 단위 그룹은 상위 단위 위에 쌓이고 자체 쌓는 순서는 해당 값의 크기에 따라 결정됩니다(더 큰 값을 가진 단위는 위에 있음). 맨 위). 마찬가지로, 음수 z-index 값을 가진 유닛 그룹은 상위 유닛 아래에 쌓이고, 자체적인 쌓는 순서도 값의 크기에 따라 결정됩니다(예를 들어 더 큰 값을 가진 유닛은 상위 레이어에 있음). , 값이 -1인 유닛은 해당 유닛 위의 -2 계층에 있습니다. <br><br>이 매개변수 값에는 순수 정수를 사용하세요. Z-색인은 절대 위치 또는 상대적 위치에 있는 지형지물에 사용됩니다. 이미지의 Z-색인을 설정할 수도 있습니다. (커뮤니케이터의 경우 <IMG> 태그를 <SPAN> 또는 <DIV> 태그 내에 포함시킨 다음 <SPAN> 또는 <DIV>에 z-index를 적용하는 것이 가장 좋습니다.) <br><br> <strong>절대적으로 배치된 단위 자르기(클립) <br></strong><br>절대적으로 배치된 단위를 잘라낼 수 있습니다. 즉, 사용자에게 표시되는 영역을 잘라서 단위의 일부만 표시하고 나머지는 투명하게 만듭니다. . 이는 전통적인 텍스트 및 이미지 기반 웹 페이지에는 그다지 유용한 기능이 아닙니다. 그러나 이는 멀티미디어 페이지가 필요한 경우 유용합니다. 예를 들어, Netscape Communivator 4와 Internet Explorer 4는 모두 멀티미디어 페이지를 지원합니다. 이들은 문서의 스크립팅 인터페이스를 통해 장치 주변의 클리핑 영역을 동적으로 조정하여 실선 텍스트가 "교차"되고 이미지가 페이드 인되며 기타 표시 기능을 제공합니다. <br>clip : ret(top,right.bottom,left) <br><br>여기서 위쪽, 오른쪽, 아래쪽 및 왼쪽은 직사각형입니다. 클립 상자의 위치는 클립된 장치의 왼쪽 상단 모서리를 기준으로 한 상단, 오른쪽, 하단 및 왼쪽 가장자리의 위치입니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 값은 절대 또는 상대 길이 값(백분율 값은 아님)이거나 키워드 auto일 수 있습니다. 자동 값은 클리핑 영역의 모든 측면이 배치된 후 클리핑된 단위의 모든 콘텐츠가 이 영역을 초과하지 않음을 의미합니다. <br><br><br>제어 장치 오버플로(overflow) <br> <strong></strong>절대 또는 상대 위치 결정 장치의 너비와 높이를 수정합니다. 지정된 영역이 요구 사항을 충족하지 못할 가능성이 높습니다. 이로 인해 장치 내용이 오버플로됩니다. 오버플로를 사용하여 브라우저가 오버플로를 처리하는 방법을 지정할 수 있습니다. 값 없음(기본값)을 사용하면 브라우저가 오버플로 내용을 표시할 수 있으므로 셀이 지정된 영역을 오버플로할 수 있습니다. 값 클립을 사용하려면 브라우저가 셀의 하단과 오른쪽에 있는 셀 내용을 잘라야 합니다. 그러면 지정된 영역을 벗어나는 셀 내용이 표시되지 않습니다. 값 스크롤을 사용하려면 브라우저가 셀의 아래쪽과 오른쪽에 있는 셀 내용을 잘라야 합니다(클립과 동일). 그러나 브라우저는 사용자가 잘린 내용을 스크롤할 수 있도록 셀에 스크롤 막대를 제공해야 합니다. 콘텐츠.</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>

<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_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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/ai/ai-hentai-generator" title="AI Hentai Generator" 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/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
													<h3>AI Hentai Generator</h3>
												</a>
												<p>AI Hentai를 무료로 생성하십시오.</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ko/ai">더보기</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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/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/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
													<h3>드림위버 CS6</h3>
												</a>
												<p>시각적 웹 개발 도구</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/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/ko/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/ko/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/ko/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>7554</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/ko/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>1382</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/ko/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>83</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/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>59</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/ko/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>22</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>96</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ko/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/ko/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/ko/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/ko/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/ko/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가 있습니다. 단기간 내에 번역 지원 외에도 다듬기 및 요약 기능도 지원됩니다. -ins, 또한 Tauri 패키징을 사용합니다. Tauri가 Rust 부분을 사용한다는 사실을 제외하면, 브라우저 부분은 여전히 수동으로 구현하기가 쉽습니다. 예를 들어 openAI에서 제공하는 인터페이스에서는 다음 코드를 복사하고 브라우저 콘솔에서 요청을 시작하여 번역을 완료할 수 있습니다. //예제 constOPENAI_API_KEY="s</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/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/ko/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 상자 모델은 웹 페이지 레이아웃에 사용되는 모델입니다. 이 모델은 콘텐츠 영역, 패딩, 테두리 및 여백의 네 부분으로 구성됩니다. div 박스 모델의 장점은 웹 페이지의 레이아웃과 요소 사이의 간격을 쉽게 제어할 수 있다는 것입니다. 콘텐츠 영역의 크기, 내부 여백, 테두리 및 외부 여백을 조정하여 다양한 레이아웃 효과를 얻을 수 있습니다. 상자 모델은 또한 일부 속성을 제공하며 메서드는 CSS 및 JavaScript를 통해 상자의 스타일과 동작을 동적으로 변경할 수 있습니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/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/ko/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은 주로 다른 웹사이트의 콘텐츠를 로드하거나 웹페이지를 여러 영역으로 나눌 수 있는 외부 콘텐츠를 도입하는 데 사용된다는 점입니다. 레이아웃 및 스타일 제어를 위해 콘텐츠를 구성합니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/624838.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/202311/02/2023110214291073075.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="div와 스팬의 차이점은 무엇입니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/624838.html" title="div와 스팬의 차이점은 무엇입니까?" class="phphistorical_Version2_mids_title">div와 스팬의 차이점은 무엇입니까?</a>
								<span class="Articlelist_txts_time">Nov 02, 2023 pm	 02:29 PM</span>
								<p class="Articlelist_txts_p">차이점은 다음과 같습니다. 1. div는 블록 수준 요소이고, 범위는 인라인 요소입니다. 2. div는 자동으로 한 줄을 차지하지만, 범위는 자동으로 줄 바꿈되지 않습니다. 3. div는 더 큰 구조와 레이아웃을 줄 바꿈하는 데 사용됩니다. 4. div는 다른 블록 수준 요소와 인라인 요소를 포함할 수 있고, 범위는 다른 인라인 요소를 포함할 수 있습니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/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/ko/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에 태그를 추가하는 방법 익히기 웹 개발에서 페이지에 태그를 동적으로 추가해야 하는 상황에 자주 직면합니다. jQuery를 사용하면 DOM 요소를 쉽게 조작하고 빠른 라벨 추가 기능을 얻을 수 있습니다. 이 기사에서는 jQuery를 사용하여 div에 태그를 추가하고 특정 코드 예제를 첨부하는 방법을 소개합니다. 1. 준비 작업 jQuery를 사용하기 전에 먼저 jQuery 라이브러리를 페이지에 소개해야 합니다. CDN 링크를 통해 소개하거나 이 페이지에서 다운로드할 수 있습니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/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/ko/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 라이브러리 중 하나이며 DOM 요소를 조작하는 편리한 방법을 제공하고 페이지 요소의 추가, 삭제, 수정 및 기타 기능을 빠르게 수행할 수 있습니다. jQuery를 사용할 때 div 요소를 조작해야 하는 경우가 종종 있습니다. 다음에서는 div 요소를 추가하는 간단하고 이해하기 쉬운 몇 가지 기술을 소개하고 구체적인 코드 예제를 제공합니다. 1. 새로운 div 요소 생성 및 추가</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/624132.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/202311/01/2023110111343491842.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="두 개의 div를 나란히 표시하는 방법" />
								</a>
								<a href="https://www.php.cn/ko/faq/624132.html" title="두 개의 div를 나란히 표시하는 방법" class="phphistorical_Version2_mids_title">두 개의 div를 나란히 표시하는 방법</a>
								<span class="Articlelist_txts_time">Nov 01, 2023 am	 11:36 AM</span>
								<p class="Articlelist_txts_p">방법은 다음과 같습니다. 1. 두 개의 div 요소를 "float:left;" 속성으로 설정합니다. 2. CSS의 플렉스 레이아웃을 사용하여 요소를 나란히 표시합니다. 3. CSS의 그리드 레이아웃을 사용하여 요소도 나란히 표시합니다.</p>
							</div>
													</div>

<a href="https://www.php.cn/ko/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/ko/about/us.html">회사 소개</a>
            <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
            <a href="https://www.php.cn/ko/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>

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>