AnmerkungenAls ich die Navigation-Übungen gemacht habe, habe ich mir zum Üben die Quellcodes erfolgreicher Websites angesehen. Ich hoffe, dass ich durch diese erfolgreichen Codes das lernen kann Frontend hinter dem Code. Beim Betrachten des Quellcodes habe ich auch viele Details erfahren, die ich zuvor ignoriert hatte, und ich habe das Gefühl, dass ich sehr davon profitiert habe.
Wenn ich die CSS-Datei von Lagou.com öffne, ist der erste Teil mit
markiert, um die Zeit des Dokuments, den Autor und bestimmte Elemente innerhalb des Stils zu kennzeichnen Blatt, das in Farbe, Breite und Höhe gut sichtbar ist. Der zweite Teil besteht aus einigen initialisierten Elementstilen und initialisierten öffentlichen Klassen. Der dritte Teil ist der Stil jedes Teils der Webseite.
Übungen zur Webseitennavigation
Beobachtung und Denken
1. Wie viele Verschachtelungsebenen muss ich dafür schreiben? Navigation?2. Möchten Sie die Breite festlegen oder 100 % verwenden?
3. Wie zentriere ich es?
4. So erkennen Sie den schmalen Grat zwischen Anmeldung und Registrierung.
Das sind die Probleme, die ich entdeckt habe, und im weiteren Verlauf wird es auf jeden Fall Probleme geben.
#header{
background: #fafafa;
height: 60px;
min-width: 1024px;
border-top: 3px solid #00B38A;
}
#header .wrapper{
width: 1024px;
margin: 0 auto;
}2. Die Breite wird im inneren #header festgelegt, und die Mindestbreite wird im äußeren
festgelegt. Beide .wrapper-Attribute #header haben den gleichen Wert. Natürlich muss die Breite des Anzeigebildschirms größer als 1024 Pixel sein, sodass durch Hinzufügen von innerhalb von der Inhalt mit einer Breite von 1024 Pixel zentriert werden kann. .wrappermargin: 0 auto;
Übungen zur Webseitennavigation
.wrapper .logo{
float: left;
margin-top: 7px;
width: 229px;
height: 43px;
background: url(image/logo.png) no-repeat;
}
.wrapper .navheader{
float: left;
margin-left: 30px;
}
.navheader li{
float: left;
}
.wrapper .loginTop{
float: right;
}
.loginTop li{
float: left;
} 229×43, daher wird das Bild durch diese Einstellung nicht gestreckt. 2. Das Logo und das Navigationsmenü schweben
nach links, und die Anmelde- und Registrierungsschaltfläche schwebt nach rechts.
unten
vorhanden sein. aber diese 3px Es darf a nicht überschreiten. Es muss eine Höhe von auf 60 Pixel und eine Höhe von auf 57 Pixel eingestellt werden, damit der untere Rand angezeigt wird, ohne hervorzustehen . #headerlia
Übungen zur Webseitennavigation
1 ist ein Inline-Element und muss in ein umgewandelt werden Element auf Blockebene, sodass die Höhe festgelegt werden kann. Wenn das Inline-Element nicht auf Blockebene eingestellt ist und die Zeilenhöhe direkt festgelegt wird, kann die Höhe zwar geändert werden und den Dokumentfluss belegen, der von der Zeilenhöhe eingenommene Platz gehört jedoch nicht zu
. .navheader li{
height: 60px;
padding: 0px 20px;
}
.navheader li a{
display: block;
line-height: 57px;
text-decoration: none;
color: #999;
font-size: 20px;
}
.navheader li a:hover{
color: #333;
border-bottom: 3px solid #00B38A;
}
.loginTop li{
height: 30px;
line-height: 30px;
color: #FFF;
background: #00B38A;
}
.loginTop li a{
display: block;
line-height: 30px;
padding: 0px 10px;
color: #fff;
text-decoration:none ;
}
.loginTop li a:hover{
color: #CCEAE3;
} festgelegt habe, da ich in den Versionen IE6 und 7 des Browsers festgestellt habe, dass die Höhe nicht festgelegt wurde. Ich habe festgestellt, dass a nicht die Breite hat, die das übergeordnete Element wie ein echtes Element auf Blockebene ausfüllt. Aber nachdem ich die Höhe eingestellt hatte, stellte ich fest, dass sie plötzlich die Eigenschaften von Elementen auf Blockebene hatten. Aber wir wollen nicht, dass er das tut, deshalb werde ich die Höhe nicht schreiben. Dieser Effekt ist kompatibel. Wenn Sie es schreiben, ist es sehr einfach, einen float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left<code>a
3. IE6 unterstützt keine Bilder im PNG-Format. . . . . aafloat<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>
Tatsächlich scheint es auf den ersten Blick so zu sein, aber ich habe festgestellt, dass die Änderung des Menüs allmählich und nicht plötzlich erfolgt, wenn ich mit der Maus über das Menü fahre.
Dieses Attribut kann festgelegt werden, und wenn sich ein bestimmter Stil eines Elements ändert, kann der Farbverlauf geändert werden. Er kann spannendere Bilder erzielen und muss sich die entsprechenden Kenntnisse von
html5 .navheader a,.loginTop a{
transition: all .2s ease-in-out ;
-webkit-transition: all .2s ease-in-out ;
-moz-transition: all .2s ease-in-out ;
-o-transition: all .2s ease-in-out ;
}transition*{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>
*{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>:none;}
ul.<a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式
首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。
最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。
ul>li>a，一般的导航基本上都是这样的结构。
ul前的a可以以背景为图片，做链接。
第一步：设计出html结构，并为元素设置相应的id与类
<p> </p><p> </p><p> <a></a> </p>
对网页进行全局的css设置。
我先写下做导航时我用到的
对导航进行css设置
Das obige ist der detaillierte Inhalt vonÜbungen zur Webseitennavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So werden Sie auf TikTok ein enger Freund
So optimieren Sie eine einzelne Seite
So tätigen Sie einen Anruf, ohne Ihre Nummer anzuzeigen
Webstorm passt die Schriftgröße an
nh-Datei
Die Rolle des EM-Tags in HTML
Der Unterschied zwischen CSS3.0 und CSS2.0
Der Unterschied zwischen Get-Request und Post-Request
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
