iT邦幫忙

2024 iThome 鐵人賽

0
自我挑戰組

HTML跨平台網頁設計系列 第 28

D28實作第二部分

  • 分享至 

  • xImage
  •  

網頁網址如下:html實作
實作第二部份我選擇新增導覽列。
新增程式碼如下:

<style>//在style新增nav設定檔
        nav {
            background-color: #808040;
            padding: 10px;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 15px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
        }
        nav ul li a:hover {
            text-decoration: underline;
        }
</style>

在body打nav並設定section的id,當使用者點選導覽列上面的字時,就會跳到相關的區塊。

<nav>
    <ul>
        <li><a href="#me">關於我</a></li>
        <li><a href="#flim">電視劇</a></li>
    </ul>
</nav>

新增畫面如下:
https://ithelp.ithome.com.tw/upload/images/20241016/20169466nGgpQA93G2.jpg


上一篇
D27實作
下一篇
D29實作第三部分
系列文
HTML跨平台網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言