Heim >Web-Frontend >CSS-Tutorial >Einführungs-Tutorial 10 zum CSS-Webseitenlayout: Horizontale Navigation mit Registerkarten und aktuellem Logo_Grundlegendes Tutorial
Einführungs-Tutorial 10 zum CSS-Webseitenlayout: Horizontale Navigation mit Registerkarten und aktuellem Logo_Grundlegendes Tutorial
- PHP中文网Original
- 2016-05-16 12:07:091519Durchsuche
Das aktuelle Logo bedeutet, dass der Benutzer auf den Kanal oder die Spalte klickt und die Beschriftung der Spalte eine andere Farbe als andere Beschriftungen anzeigt, um den Benutzer an den Standort zu erinnern.
Dieses Design ist eine sehr einfache und klassische Möglichkeit, die Benutzerfreundlichkeit einer Website im Website-Design zu verbessern. Wenn eine Website von Benutzern verwendet wird, sollte sie beim Surfen nur den Denkprozess des Benutzers berücksichtigen, ohne die Erfahrung des Benutzers zu berücksichtigen. Ein solches einfaches aktuelles Kanaldesign sollte berücksichtigt werden Viele Designer müssen wissen, wo sie sich befinden und wohin sie sonst gehen können. Dies hilft den Benutzern, ihre Position auf der Website zu verstehen und sie zu anderen Kanälen zu führen.
Fahren Sie mit dem Schreiben des Codes im vorherigen Artikel fort. Damit ein Kanal ein aktueller Kanal wird, muss dieser Kanal eine andere Hintergrundfarbe oder einen anderen Text als andere Kanäle haben, aber derzeit zielen wir auf alle Tags ab Einheitliche Einstellung, daher besteht die erste Aufgabe darin, eine Ausnahme zu entwerfen, dh den aktuellen Kanal, einen solchen speziellen Kanal. Wir nehmen einige Änderungen an den Tags im HTML vor:
<ul id="nav">
<li id="current"><a href="/index.asp">主页</a></li>
<li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代码</a></li>
<li><a href="/Sort/List_6.html">水晶图标</a></li>
<li><a href="/Sort/List_7.html">幻灯图片</a></li>
<li><a href="/Sort/List_10.html">软件下载</a></li>
<li><a href="/css2/">CSS2.0实用手册</a></li>
</ul>Wir fügen das erste a hinzu Tag Eine neue ID mit dem Namen „aktuell“ wird hinzugefügt. Lesen Sie zunächst ein Farbdesign für die aktuelle ID:
#nav li a#current { background-color:#2788da; color:#fff;}Vorschau des Effekts. Farbig
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>Verbessern Sie unsere Navigation weiter und fügen Sie eine horizontale Linie unter dem Seitenmenü hinzu
#nav { height:26px; border-bottom:2px solid #2788da;}Wir haben die Höhe des ul-Tags festgelegt und es zur unteren durchgezogenen 2-Pixel-Linie hinzugefügt Sehen Sie sich den Effekt noch einmal an, er ähnelt der Tab-Navigation, die wir uns ursprünglich vorgestellt haben. Zurück zur Definition des Navigationselements: border-bottom ist ein neu hinzugefügtes Attribut, das sich auf die Einstellung des unteren Rands des Elements bezieht . Seine Parameter beziehen sich auf eine Breite von 2 Pixel, einen einzelnen durchgezogenen Linienstil und einen Farbwert von #2788da. Mit solchen Einstellungen hat unser ul-Tag einen 2 Pixel großen farbigen unteren Rand.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>Die einfache Navigation mit Registerkarten wird durch eine Reihe von CSS-Designs vervollständigt. Wenn Sie eine Kanalseite ändern, müssen Sie nur die ID = „aktuell“ ändern das a-Element, in dem sich der aktuelle Kanal befindet, um den Farbwechsel abzuschließen. Es besteht keine Notwendigkeit, Farbattribute zu schreiben, und wenn Sie sie ändern müssen, können Sie sie einfach in CSS ändern.
Bezüglich der Anwendung der CSS-Eigenschaftsvererbung zwischen Elementen in XHTML in diesem Beispiel.
Was ist Vererbung? Vererbung bedeutet, dass jedes Element mehrere Stile haben kann. Wenn es auf seinen eigenen Stil stößt, erbt es den äußeren Stil.
Wenn der Stil der inneren Ebene mit dem Stil der äußeren Ebene in Konflikt steht, wird der Stileffekt der inneren Ebene angezeigt.
Dieses Beispiel kommt auch mit einem neuen Attribut in Berührung: list-style:none; im Stilcode für die Vorschau.
Standardmäßig hat das li-Listenformular in ul einen Punkt davor, wie Sie in den vorherigen Kapiteln sehen können. Dieser Satz bedeutet, den Standardpunkt vorne zu entfernen.
Das Obige ist der Inhalt des Einführungs-Tutorials 10 zum CSS-Webseitenlayout: Beschriftete horizontale Navigation mit aktuellem Logo_Grundlegendes Tutorial. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!