CSS 태그 전환 코드 예제 튜토리얼은 상대적으로 아름답습니다_경험 교환

우리의 디자인은 제한된 공간에 더 많은 콘텐츠를 표시하기 위해 점점 더 간결한 스타일을 추구하고 있습니다. 동시에 우리는 몇 가지 문제를 발견했는데, 단순한 콘텐츠 배열로 인해 항상 페이지가 너무 길어졌습니다. 표시된 콘텐츠를 배치하려면 많은 스크롤이 필요합니다. YAHOO와 NetEase는 탭 전환 레이아웃 방식을 적용하여 기존 레이아웃의 한계를 깨고 동일한 크기 영역에 더 많은 콘텐츠를 배치할 수 있도록 하는 데 앞장섰습니다. 콘텐츠를 확장하려면 다른 탭이나 링크를 클릭하기만 하면 됩니다. 이는 새 웹 페이지를 열 필요가 없으며 동일한 페이지 내에서 수행됩니다.

1. 라벨 전환의 전반적인 구현 아이디어:

이 라벨 전환의 레이아웃을 구현하는 방법은 다양하며, DIV CSS를 사용하기도 합니다. 레이아웃 먼저 이러한 라벨 전환 효과를 달성하는 방법과 아이디어를 정리하겠습니다.
1. 먼저 탭 또는 링크 형식일 수 있는 라벨 전환용 컨테이너를 배치합니다. 2. 특정 콘텐츠를 배치하면 기본적으로 그 중 하나가 표시됩니다. 다른 콘텐츠는 숨겨집니다.
3. 사용자가 탭이나 링크를 클릭하면 JavaScript를 사용하여 지정된 레이어로 전환하고 다른 콘텐츠 레이어는 숨겨집니다.
4. 나중에 자세히 수행합니다. 분석(예: 링크 점선 제거, 콘텐츠 레이어 그래픽 및 텍스트 미화 등)

이 예제의 최종 효과 그림을 살펴보겠습니다.

2. 위의 아이디어를 바탕으로 HTML 코드 구성을 시작합니다. 우리는 다음과 같은 계획을 세웠습니다.

>

1. 전체적인 컨테이너를 정리하고 클래스 woaicss를 적용합니다.
2. 순서가 지정되지 않은 목록 UL을 탭이나 링크의 컨테이너로 설정합니다(자세한 내용은 아래 참조).
3. 콘텐츠 레이어로 각각 4개의 레이어를 설정합니다(4개의 스위치가 있다고 가정).
woaicss_con 클래스를 4개 레이어 모두에 적용하는 데 특히 주의하시기 바랍니다. 동시에 서로 다른 ID가 할당됩니다. 이는 자바스크립트가 제어권을 가질 수 있도록 하기 위한 것입니다.
레이어의 스타일을 콘텐츠 레이어를 표시하는 블록 요소로 설정했습니다. 나머지 세 레이어는 모두 숨겨져 있습니다.

3. HTML 코드를 더욱 개선하기 시작했습니다. 순서가 지정되지 않은 목록에 링크를 추가하세요. UL:

• 52CSS.com


• 
   

CSS 레이아웃 예시
• 
    

WEB 표준화

1. 순서가 지정되지 않은 목록 UL에 두 개의 클래스 woaicss_title 및 woaicss_title_bg1을 적용합니다. 첫 번째 클래스는 UL, LI 및

링크의 전체 모양을 제어할 수 있습니다. 전체적인 미화 효과를 얻으려면. 또한 정렬되지 않은 목록 UL에 대해 id를 woaicsstitle로 지정하여 JavaScript를 스타일 제어에 사용할 수 있도록 했습니다.
2. 4개의 링크를 추가하고 링크 대상을 javascript:void(0)로 지정했습니다. 링크가 "#
"이면 브라우저가 페이지 상단으로 돌아간다는 점을 이해해야 합니다. 여기서는 그러한 결과를 보고 싶지 않습니다. 왜냐하면 많은 경우 전환 상자
가 웹 페이지의 첫 번째 화면에 반드시 표시되지는 않기 때문입니다. 링크를 클릭하여 상단으로 돌아가면 방문자는 그렇지 않을 것입니다. 콘텐츠 레이어의 변경 사항을 즉시 확인하세요.
라벨 전환 효과를 만들어낸다는 의미가 상실되었습니다.
3. 링크에 대한 onclick 동작 avascript:woaicssq(x)를 설정했습니다. 여기서는
전환 효과를 얻기 위해 다양한 스크립트를 실행하기 위해 javascript에 매개변수를 전달합니다.

4. 자바스크립트 스크립트 작성을 시작합니다:


function woaicssq(num){
for(var id = 1;id {
var MrJin="woaicss_con"+id;
if(id==num) document.getElementById(MrJin).style.display="block";
else
문서. (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";
}
자바스크립트 스크립트의 작동 원리에 대한 간략한 설명:
(52CSS.com 웹사이트에서는 CSS만 논의하므로 여기서는 이 스크립트를 자세히 분석하지 않습니다.)
1. woaicssq 함수를 설정하고 다음과 같은 라벨 전환 링크에서 매개변수를 가져옵니다. javascript:woaicssq (2)
2. 변수 id의 값이 1이고 4보다 작거나 같도록 선언합니다. 이는 4개의 콘텐츠 레이어에 대한 값입니다.
3. MrJin 변수를 "woaicss_con"+id;로 선언합니다. (첫 번째 단계에서 콘텐츠 레이어의 ID를 설정합니다(예:
id="woaicss_con2").) 지정된 값이면 이 레이어의 속성은 display="block";입니다. 그렇지 않으면 레이어 속성은
display="none"입니다. 즉, 콘텐츠 레이어를 표시하고 숨기는 전환 기능이 구현됩니다.
4. 변수 id가 1에서 4 사이의 값인 경우 ID woaicsstitle을 사용하여 컨테이너 스타일을 정의합니다(예:
woaicss_title woaicss_title_bg3). 이러한 방식으로 다양한 클래스를 통해 링크를 전환하기 위한 다양한 스타일을 정의할 수 있습니다. 특정 레이어가 표시되면 해당 레이어에 해당하는 링크에 몇 가지 지침을 제공할 수 있습니다. 탭의 강조표시된 상태 등

5. Commencez à écrire du CSS :


* {
list-style-type:none
font-size:12px
text-decoration ; none;
margin:0;
padding:0;
}
Déclaration de mise en page générale, supprimez la marque par défaut de l'élément de liste, définissez la taille du texte sur 12px, supprimez la ligne décorative du texte, la marge extérieure et marge intérieure Les marges sont toutes
nulles.


.woaicss {
width:438px;
height:300px;
overflow:hidden; Changez la définition du style de la fenêtre, définissez la largeur et la hauteur, définissez le débordement sur caché, définissez les marges supérieure et inférieure sur 50 px, définissez les marges gauche et droite sur automatique et obtenez un alignement central
horizontal.


.woaicss_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat ; }
Le style de la liste non ordonnée UL, la largeur et la hauteur sont définies et l'image d'arrière-plan est btn_bg.png.


.woaicss_title li {
display:block
float:left
margin:0 2px 0 0; :center;
}
Le style des éléments de la liste non ordonnée, défini comme élément de bloc et appliqué float à gauche, avec une marge droite de 2px. Placez les éléments de la liste en ligne, avec le texte
aligné au centre.


.woaicss_title li a {
display:block;
width:90px
height:30px; fff;
}
　Le style du lien de l'élément de liste est défini sur un élément de bloc et la largeur et la hauteur sont spécifiées. La hauteur de la ligne est de 34 pixels et la couleur est blanche :#fff; >
.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline
}
Le style de survol du lien de l'élément de liste, la couleur est #f0f0f0, et le soulignement est utilisé comme ligne décorative.


.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
Veuillez contacter le script javascript à l'étape 4 pour la définition de ces quatre styles. Autrement dit, lorsque la valeur de la fonction change, le style
de la liste non ordonnée est redéfini en conséquence. Ici, nous ajustons le positionnement de l'image d'arrière-plan pour obtenir l'état proéminent de la carte à onglets.


.woaicss_con {
display:block;
width:438px;
height:270px
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
　Définition du style du calque de contenu, spécifiez la largeur et la hauteur et définissez l'image d'arrière-plan con_bg.png. 52CSS.com, veuillez accorder une attention particulière au fait que l'image d'arrière-plan
ici doit être combinée de manière transparente avec l'image d'arrière-plan de la liste non ordonnée UL. Autrement dit, ils semblent former un tout.

6. Enrichissement du contenu :

Nous remplissons la couche de contenu avec certains contenus et l'embellissons, par exemple : (Un seul est expliqué, les trois autres sont identiques.)

• Tutorial pemalam Pembangun Web Alat reka bentuk tambahan susun atur halaman web CSS! Penjelasan grafik terperinci
  !


• Saluran Templat CSS dikemas kini pada 5 April, menambah 22 set templat


• Klasik peringkat kemasukan XHTML dan CSS bermula dari awal Siri tutorial!


• Contoh Bermula Reka Letak DIV+CSS (Jadual Kandungan)

>
•  
DIV Contoh susun atur CSS: Sepuluh langkah menggunakan reka letak tapak web css! (Jadual Kandungan)

• 
   
Tutorial Standard WEB2.0 Dua belas hari pembelajaran asas langkah demi langkah!

•  
Tutorial reka letak web Div+CSS!

Lapisan kandungan kami yang diperkaya ialah senarai UL tidak tersusun dan kami mentakrifkan gayanya:

.woaicss_con ul {
lebar:418px ;
tinggi:250px;
jidar: 12px auto; ;
white-space:nowrap;
text-overflow: elipsis;
limpahan: tersembunyi; text-decoration:underline;
}
Ini bukan fokus artikel ini, jadi saya tidak akan menerangkan secara terperinci untuk pengetahuan, sila rujuk: >>> Artikel 52CSS.com pada senarai UL pengeluaran
Tujuh: Pengubahsuaian terperinci

Pautan di sini tidak memainkan peranan sebenar dalam pengalihan URL Ia hanya label, jadi kami boleh mengalih keluar bingkai bertitik untuk
dibuat page kami lebih kemas dan natural. Simpan kod berikut sebagai fail xuxian.htc:






Kami menambah kod ini dalam gaya CSS: a {behavior:url(xuxian. htc )}
Dengan cara ini, bingkai bertitik pautan boleh dialih keluar (sila ambil perhatian bahawa kesan ini tidak sah dalam FF).

Lapan: Kesan akhir dan inferens:
Kami akhirnya boleh mencapai kesan ini, anda boleh >>> klik di sini untuk melihat
Dalam pelaksanaan kami Anda mungkin menghadapi situasi lain di tempat kerja:
Kita perlu menukar apabila tetikus bergerak melintasinya dan membuka pautan ke kandungan yang sepadan apabila tetikus mengklik.
Kita boleh mencapai ini dengan mengubah suai senarai UL tidak tertib seperti berikut:





52CSS.com



Tutorial CSS Div


 

Contoh Reka Letak CSS

 
• Piawaian WEB

🎜> Kami mencapai kesan ini melalui sedikit pelarasan.