Das Beispiel-Tutorial zum CSS-Tag-Wechselcode ist relativ schön_Erfahrungsaustausch

Unsere Designs verfolgen zunehmend einen prägnanten Stil, mit dem Ziel, mehr Inhalte auf begrenztem Raum darzustellen. Gleichzeitig stellten wir fest, dass die Seite durch die einfache Anordnung der Inhalte immer sehr lang wurde. Es ist viel Scrollen erforderlich, um den angezeigten Inhalt anzuzeigen. YAHOO und NetEase übernahmen die Führung bei der Anwendung der Tab-Switching-Layout-Methode, durchbrachen die Einschränkungen des herkömmlichen Layouts und ermöglichten die Platzierung von mehr Inhalten im Bereich derselben Größe. Wir müssen lediglich auf verschiedene Registerkarten oder Links klicken, um den Inhalt zu erweitern. Dies erfordert nicht das Öffnen einer neuen Webseite, sondern erfolgt einfach innerhalb derselben Seite.

1. Die allgemeine Implementierungsidee des Etikettenwechsels:

Es gibt viele Möglichkeiten, das Layout dieses Etikettenwechsels zu implementieren, und es sind auch verschiedene Codes im Umlauf Layout. Lassen Sie uns zunächst die Ideen klären und erfahren, wie Sie einen solchen Label-Switching-Effekt erzielen können:
1. Platzieren Sie zunächst einen Container für den Label-Switching, der in Form einer Registerkarte oder eines Links vorliegen kann 2. Platzieren Sie bestimmte Inhalte. Standardmäßig wird einer davon angezeigt. Andere Inhalte werden ausgeblendet.
3. Wenn der Benutzer auf eine Registerkarte oder einen Link klickt, wechseln Sie mit JavaScript zur angegebenen Ebene, während andere Inhaltsebenen ausgeblendet werden Beispiel: Entfernen Sie gepunktete Linklinien und verschönern Sie Grafiken und Text auf der Inhaltsebene usw.

Schauen wir uns das endgültige Effektbild dieses Beispiels an:


2. Basierend auf den oben genannten Ideen beginnen wir mit der Organisation des HTML-Codes. Wir haben folgende Pläne gemacht:

>

1. Wir stellen einen Gesamtcontainer zusammen und wenden Klassenwoaicss an.
2. Richten Sie eine ungeordnete Liste UL als Container für Tabs oder Links ein (Details unten).
3. Wir richten jeweils vier Ebenen als Inhaltsebenen ein (wir gehen davon aus, dass es vier Schalter gibt). Bitte achten Sie besonders auf die Anwendung der Klasse
woaicss_con auf alle vier Ebenen. Gleichzeitig werden ihnen unterschiedliche IDs zugewiesen. Auf diese Weise kann Javascript die Kontrolle übernehmen. Wir legen den Stil der
-Ebene auf ein Blockelement fest, das die Inhaltsebene anzeigt. Die anderen drei Ebenen sind alle ausgeblendet.

3. Wir haben begonnen, den HTML-Code weiter zu verbessern. Fügen Sie einige Links zur ungeordneten Liste UL hinzu:

• 52CSS.com


• 
   

CSS-Layout-Beispiel
• 
    

WEB-Standardisierung

1. Wir wenden zwei Klassen woaicss_title und woaicss_title_bg1 auf die ungeordnete Liste UL an. Die erste Klasse kann das Gesamterscheinungsbild von UL-, LI- und

-Links steuern. Um den gesamten Verschönerungseffekt zu erzielen. Wir haben auch eine ID als woaicsstitle für die ungeordnete Liste UL angegeben, damit JavaScript zur Stilsteuerung verwendet werden kann.
2. Wir haben vier Links hinzugefügt und das Linkziel angegeben als: javascript:void(0). Wir sollten verstehen, dass der Browser zum Anfang der Seite zurückkehrt, wenn der Link „#
“ lautet. Ein solches Ergebnis möchten wir hier nicht sehen, da sich unser Umschaltfeld
in vielen Fällen nicht unbedingt auf dem ersten Bildschirm der Webseite befindet. Wenn Sie auf den Link klicken, um zum Anfang zurückzukehren, wird dies für den Besucher nicht der Fall sein sehen Sie sofort die Änderungen auf der Inhaltsebene. Die Bedeutung von
, einen Etikettenwechseleffekt zu erzeugen, geht verloren.
3. Wir setzen die Onclick-Aktion avascript:woaicssq(x) für den Link. Hier übergeben wir Parameter an Javascript, um
verschiedene Skripte auszuführen, um den Umschalteffekt zu erzielen.

4. Beginnen Sie mit dem Schreiben des Javascript-Skripts:


function woaicssq(num){
for(var id = 1;id {
var MrJin="woaicss_con"+id;
if(id==num) document.getElementById(MrJin).style.display="block";
else
document (MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1"
if ( num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className=" woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
}
Eine kurze Erklärung des Funktionsprinzips von Javascript-Skripten:
(Da diese Website 52CSS.com nur CSS behandelt, werden wir dieses Skript hier nicht im Detail analysieren)
1. Stellen Sie die Funktion woaicssq ein und rufen Sie die Parameter aus dem Link zur Etikettenumschaltung ab, z. B.: javascript:woaicssq (2)
2. Deklarieren Sie, dass die Variablen-ID einen Wert von 1 und kleiner oder gleich 4 hat. Dies sind die Werte für unsere vier Inhaltsebenen.
3. Deklarieren Sie die Variable MrJin als „woaicss_con“+id; (Bitte beachten Sie, dass wir im ersten Schritt die ID der Inhaltsebene festlegen, z. B.:
id="woaicss_con2".) Wenn die ID lautet der angegebene Wert, dann ist das Attribut dieser Ebene display="block";. Andernfalls lautet das Attribut des Layers
display="none". Das heißt, die Umschaltfunktion zum Anzeigen und Ausblenden der Inhaltsebene wird realisiert.
4. Wenn die Variablen-ID einen Wert zwischen 1 und 4 hat, definieren Sie den Stil des Containers mit der ID woaicsstitle, wie zum Beispiel:
woaicss_title woaicss_title_bg3. Auf diese Weise können wir verschiedene Stile zum Umschalten von Links durch verschiedene Klassen definieren. Wenn eine bestimmte Ebene angezeigt wird, können wir den Links, die dieser Ebene entsprechen, einige Anweisungen geben. Zum Beispiel der hervorgehobene Status der Registerkarte usw.

5. CSS 작성 시작:


* {
list-style-type:none;
글꼴 크기:12px; none;
margin:0;
padding:0;
}
목록 항목 기본 표시를 제거하고 텍스트 크기를 12px로 설정하고 텍스트 장식 선과 외부 여백을 제거합니다. 내부 여백 여백은 모두
0입니다.


.woaicss {
width:438px;
height:300px;
margin:50px auto; 창의 스타일 정의를 전환하고, 너비와 높이를 설정하고, 오버플로를 숨김으로 설정하고, 위쪽 및 아래쪽 여백을 50px로 설정하고, 왼쪽 및 오른쪽 여백을 자동으로 설정하고, 가로
가운데 정렬을 구현합니다.


.woaicss_title {
너비:438px;
높이:30px;
배경:#fff url(btn_bg.png) 오버플로: 숨김; }
비정렬 리스트 UL의 스타일, 너비와 높이를 설정하고, 배경 이미지는 btn_bg.png입니다.


.woaicss_title li {
display:block;
float:left;
display:inline; :center;
}
순서가 지정되지 않은 목록의 목록 항목 스타일로 블록 요소로 설정하고 오른쪽 여백을 2px로 왼쪽에 부동 소수점을 적용합니다.
텍스트를 중앙에 정렬하여 목록 항목을 인라인으로 만듭니다.


.woaicss_title li a {
너비:90px;
높이:30px;
색상:# fff
}
　목록 항목 링크의 스타일은 블록 요소로 설정되었으며 줄 높이는 34px이고 색상은 흰색입니다.


.woaicss_title li a:hover {
color:#f0f0f0;
text-꾸밈:underline;
}
목록 항목 링크의 호버 스타일, 색상은 #f0f0f0입니다. 밑줄은 장식선으로 사용됩니다.


.woaicss_title_bg1 {배경 위치:0 0;}
.woaicss_title_bg2 {배경 위치:0 -30px;}
.woaicss_title_bg3 {배경 위치:0 -60px;}
.woaicss_title_bg4 {배경-위치:0 -90px;}
이 네 가지 스타일의 정의는 4단계의 자바스크립트 스크립트에 문의하세요. 즉, 함수의 값이 변경되면 순서가 지정되지 않은 목록의
스타일이 그에 따라 재정의됩니다. 여기서는 탭 카드의 눈에 띄는 상태를 달성하기 위해 배경 이미지의 위치를 ​​조정합니다.


.woaicss_con {
디스플레이:블록;
너비:438px;
높이:270px
배경:url(con_bg.png) 반복 없음 0 0; Overflow:hidden;
}
　콘텐츠 레이어의 스타일 정의, 너비와 높이 지정, 배경 이미지 con_bg.png 설정. 52CSS.com 여기의 배경
이미지는 순서가 지정되지 않은 목록 UL의 배경 이미지와 원활하게 결합되어야 한다는 사실에 특히 주의하시기 바랍니다. 즉, 전체처럼 보입니다.

6. 콘텐츠 강화:

콘텐츠 레이어를 특정 콘텐츠로 채우고 아름답게 만듭니다. 예를 들면 다음과 같습니다. (한 가지만 설명하고 나머지 세 가지는 동일합니다.)

• 웹 개발자 플러그인 튜토리얼 CSS 웹 페이지 레이아웃 보조 디자인 도구! 자세한 그래픽 설명
  !


• CSS 템플릿 채널이 4월 5일 업데이트되어 22개의 템플릿 세트가 추가되었습니다.


• XHTML 및 CSS 초보 수준 클래식 처음부터 시작하는 튜토리얼 시리즈!


• DIV+CSS 레이아웃 시작하기 예(목차)

>
•  
DIV CSS 레이아웃 예: CSS 웹사이트 레이아웃을 사용하는 10단계! (목차)

• 
   
WEB2.0 Standard Tutorial 12일간의 단계별 기초학습!

•  
Div+CSS 웹 레이아웃 튜토리얼!

강화된 콘텐츠 레이어는 UL 비순차 목록이며 스타일을 정의합니다.

.woaicss_con ul {
width:418px ;
높이:250px;
여백:12px 자동;
.woaicss_con li {
너비:418px;
여백:0 ;
공백:nowrap;
텍스트 오버플로우: 숨김; 🎜>}
.woaicss_con li a:hover
text-designation:underline;
}
이는 이 기사의 초점이 아니므로 이에 대해 자세히 설명하지 않겠습니다. >>> 52CSS.com의 목록 UL 기사를 참조하세요. 제작
7: 세부 수정

여기 링크는 URL 리디렉션에서 실제 역할을 하지 않습니다. 단지 레이블일 뿐이므로 점선 프레임을 제거하여
만들 수 있습니다. 우리 페이지가 더 깔끔하고 자연스러워졌어요. 다음 코드를 xuxian.htc 파일로 저장합니다:





이 코드를 CSS 스타일에 추가합니다: a {behavior:url(xuxian.htc )}
이렇게 하면 링크 점선 프레임을 제거할 수 있습니다(FF에서는 이 효과가 유효하지 않으므로 주의하세요).

8: 최종 효과 및 추론:

마침내 이 효과를 얻을 수 있습니다. >>> 보려면 여기를 클릭하세요.
구현 과정에서 다음과 같은 문제가 발생할 수 있습니다. 직장의 또 다른 상황: 마우스가 가로질러 이동할 때 전환하고, 마우스를 클릭할 때 해당 콘텐츠에 대한 링크를 열어야 합니다.
순서가 지정되지 않은 목록 UL을 다음과 같이 수정하면 이를 달성할 수 있습니다.





52CSS.com




Div CSS 튜토리얼

 
• CSS 레이아웃 예
 
웹 표준화

약간의 조정을 통해 이 효과를 얻었습니다.