Make a Website: CSS Styling-Navigation 2/10



Navigation
Let's start by styling the navigation bar.
In index.html, the <div class="nav">..</div>groups elements that are part of the navigation bar section of the web page. Inside<div class="nav">..</div> are the a elements we want to style.
Therefore, we can select all a elements inside<div class="nav">..</div> in CSS like this:
.nav a {
  color: #5a5a5a;
  font-size: 24px;
}
  1. The CSS selector .nav a selects any aelement nested inside an HMTL element with a class named "nav."
  2. The color property sets the color of aelement text to #5a5a5a.
  3. The font-size property changes the size of aelement text to 24px.
Instructions
In main.css:
  1. Make a new CSS rule that selects all aelements nested inside <div class="nav">..</div>. Check out the example above.
  2. Set the color to #5a5a5a. [some nav text to call back - Remember what color does]
  3. Set the font-size to 11px
  4. Set the font-weight to bold
  5. Set the padding-top to 14px, and thepadding-bottom to 14px
  6. Set the padding-left to 10px, and thepadding-right to 10px
  7. Make the text uppercase using text-transform: uppercase;

?
Hint

Get live, fast support from Codecademy Advisors when you get stuck.Learn more.
Your CSS rule should look something like this:
.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 14px;
  text-transform: uppercase;
}
Make a Website: CSS Styling-Navigation 
.nav a{
color:#5a5a5a;
font-size:11px;
font-weight:bold;/*厚度為bold*/
padding-top:14px;
padding-bottom:14px;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;/*小寫展示*/
}
<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Airbnb logo</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div> 

    <div class="learn-more">
      <div>
        <div>
          <div>
            <h3>Travel</h3>
            <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
            <p><a href="#">See how to travel on Airbnb</a></p>
          </div>
          <div>
            <h3>Host</h3>
            <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
            <p><a href="#">Learn more about hosting</a></p>
          </div>
          <div>
            <h3>Trust and Safety</h3>
            <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
            <p><a href="#">Learn about trust at Airbnb</a></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html><!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Airbnb logo</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div> 

    <div class="learn-more">
      <div>
        <div>
          <div>
            <h3>Travel</h3>
            <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
            <p><a href="#">See how to travel on Airbnb</a></p>
          </div>
          <div>
            <h3>Host</h3>
            <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
            <p><a href="#">Learn more about hosting</a></p>
          </div>
          <div>
            <h3>Trust and Safety</h3>
            <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
            <p><a href="#">Learn about trust at Airbnb</a></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Comments

Post a Comment

Popular posts from this blog

MEGA 暫存檔案刪除

MEGA常常會有佔據C磁碟，造成檔案空間不足的問題 只要在你的這個路徑下的檔案下把裡面的暫存檔刪除就可以釋放空間 C:\Users\Coding\AppData\Local\Google\Chrome\User Data\Default\File System 如果找不到可以試著使用搜尋功能尋找File System然後找佔用空間高達幾G的資料夾刪除內容
Read more

IOS GCD多執行緒

IOS GCD多執行緒 GCD 簡稱 Grand Central Dispatch ，利用在CPU（雙核，多核心的平行運算）， 自動管理Thread的Liftcycle ，（創造執行緒，調度Task，消除執行緒），不用自己管理Thread。 GCD Objectivc-C 使用Block Swift 使用Closure Task & Queue Task: Operation ，一個程式區段，在GCD裡面就是Block或者Closure 有兩種操作模式： sync & async 差別在於是否創造 “新的Thread” 同步執行 同步操作會阻礙當前執行緒執行並等待，等當前執行緒完成才繼續執行 異步執行 異步操作，當前執行緒會繼續往下執行，不會阻礙執行緒 Queue Serial Queues(串行序列） 會進行FIFO（First in First out） Concurrent Queues(並行序列） 也是FIFO取出，但取出後會開啟多條執行緒直接取出又放到另外一個執行緒，由於取出動作很快，看起來所有任務同時執行，但是自根據系統資源控制並行數量，所以如果任務很多，不會同時讓任務一起執行。 Item sync async Serial Queues 執行緒，一個一個執行 其他執行緒，一個一個執行 Concurrent Queues 執行緒，一個一個執行 很多執行緒，同時執行 創造Queue Main Queue Create Queue Global Queue Main Queue mainqueue為自定義變數 /*OBJECTIVE-C*/ dispatch_queue_t mainqueue = dispatch_get_main_queue(); /*SWIFT*/ let mainqueue = dispatch_get_main_queue() Create Your Own Queue 自己可以創建串
Read more

利用CMD指令強制刪除

創立一個記事本.txt檔案 貼上以下程式碼 DEL /F /A /Q \\?\%1  RD /S /Q \\?\%1 儲存附檔名更改為.bat 移動到你想刪除檔案的資料夾 將你想刪除的檔案，拖曳到這個.bat檔案上 就能刪除你想強制刪除的檔案 適用於刪除先鋒xfplayer 若無法刪除請按右鍵以系統管理員身分執行
Read more