iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0

What is nav?

  • nav = navagator
  • “The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.” by Mozilla
    https://ithelp.ithome.com.tw/upload/images/20210909/20130362zZETpK3rmO.png
    Resource: https://pixabay.com/

Final Design

https://ithelp.ithome.com.tw/upload/images/20210909/201303628S1IPQvlih.png
https://ithelp.ithome.com.tw/upload/images/20210909/20130362l3qqWOPFGu.png


Horizontal alignment with Flex

Before
https://ithelp.ithome.com.tw/upload/images/20210909/20130362QoHsrHGlsN.png

nav{}
 
nav>.logo{
    background-color:#ffcccc;
}
nav>.menu{
    background-color:#ccccff;
}
nav>.user{
    background-color:#ccffcc;
}

After
https://ithelp.ithome.com.tw/upload/images/20210909/201303624OZ4lyyinF.png

nav{
    display: flex;
}
 
nav>.logo{
    flex:none;width:100px;
    background-color:#ffcccc;
}
nav>.menu{
    flex:none;
    background-color:#ccccff;
}
nav>.user{
    flex:none;width:100px;
    background-color:#ccffcc;
}

If you want the menu to extend automatically, replace the “none" of menu with “auto.” The length of menu will adapt to the web page while we change its pixel.
https://ithelp.ithome.com.tw/upload/images/20210909/201303623QdTQTfS2M.png


Music of Today: Thunder by Imagine Dragons

Yes


Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article./images/emoticon/emoticon12.gif


上一篇
#9 CSS3 Flexbox: main style setting
下一篇
#11 CSS3 Flexbox: RWD
系列文
Learn & Play JavaScript -- Entry-Level Front-End Web Development30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言