Übungen zur Webseitennavigation

Als 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

Anmerkungen

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.

• Die erste Navigationsübung, die ich gemacht habe, war die Navigation von Lagou.com.

  
  Ü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.
  
  

Legen Sie den Stil des umgebenden Elements fest

• 1. Der äußerste Rand

    #header{
        background: #fafafa;
        height: 60px;
        min-width: 1024px;
        border-top: 3px solid #00B38A;
    }
    #header .wrapper{
        width: 1024px;
        margin: 0 auto;
    }

  legt die Höhe der Navigation und die Hintergrundfarbe der Navigation fest und fügt einen Rand-Top-Stil hinzu.

  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;

Grundlayout der Navigationselemente durchführen

• 
  Übungen zur Webseitennavigation

  1 . Beim Festlegen des Logos beträgt die Originalgröße des

    .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;
    }

  Bildes

  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.

  Ändern Sie den Grundstil des Navigationsmenüs
Hinweis: Wenn die Maus über
• fährt, muss ein 3-Pixel-Rand

  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;
    }

  2. Wer vorsichtig ist, kann feststellen, dass ich nur die Zeilenhöhe für jeden

  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 ;
    }

  aneignen. Werde weiter lernen.

  transition*{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>

  :none ;}Setzt den Umriss aller Elemente standardmäßig auf „Keine“.

• *{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>:none;}

  Setzen Sie die inneren
Ränder
• aller Elemente auf 0.

• 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!