{Day23} 小公主訂單網頁嘗試集＿第二十三集＿實作次天

2022 iThome 鐵人賽

DAY 23

Modern Web

訂單網頁嘗試集系列第 23 篇

14th鐵人賽網頁設計網頁教學

icetong

2022-10-08 22:38:54

318 瀏覽

分享至

第一天連假！希望大家玩得愉快！！

小公主昨天大致上放了圖跟字，今天就建立個目錄標題！
也好好把昨天的圖文稍微編輯的好看一些！

新功能建立：
目錄頁（含滑鼠碰到的動畫）
美編圖文（致中）

html：

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    </head>
  
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>訂單網頁嘗試集＿次</h2>
<link rel="stylesheet" href="day22.css">

</div>

<body>


    <ul class="drop-down-menu">
        <li><a href="https://ithelp.ithome.com.tw/users/20151423">關於小公主</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/articles/10291522">30天鐵人賽目標計畫</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/users/20151423/ironman/5260">30天鐵人賽網頁連結</a>
        </li>
        <li><a href="./day22.html">小公主販售ㄉ海底世界</a>
        </li>
    </ul>

  
    <h3>限購！每人最多三隻！</h3>
    <img id="dolphin" title="海豚"src="https://cdnappimg.yubaike.com/data/attachment/forum/202008/10/1597074050_380673.jpg" alt="海豚君" >
<br>
    

    <select id="list" onchange="select()">
        <option value="0"selected="selected">請選擇數量</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>

    <h4 id="show"></h4>
  
        <script>

    function select (){
    var x = document.getElementById("list").value;   
    var y = document.getElementById("dolphin").title;

    document.getElementById("show").innerHTML="你選擇飼養了"+x+"隻"+y;
    document.getElementById
}
</script>

</div>
</body>
</html>

css:

.title{
    height: 100px;
    text-align:center;
    text-shadow: 0.1em 0.1em 0.05em #3368f7
  }

h3{
    margin-left: 620px;
}

img{
    width: 100%; ;
    width: 600px;
    border-radius: 20%;
    margin-left: 420px;

}
h4{
    margin-left: 620px;
}
select{
    margin-left: 650px;
    margin-top: 20px;

}
ul { /* 取消ul預設的內縮及樣式 */
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.drop-down-menu {
    border: #ccc 1px solid;
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 29px;
    margin-left: 120px;
    margin-top: 20px;

}
ul.drop-down-menu li {
    position: relative;
    white-space: nowrap;
    border-right: #ccc 1px solid;
}

ul.drop-down-menu > li:last-child {
    border-right: none;
}

ul.drop-down-menu > li {
    float: left; /* 只有第一層是靠左對齊*/
}

 ul.drop-down-menu a {
    background-color: #fff;
    color: #333;
    display: block;
    padding: 0 30px;
    text-decoration: none;
    line-height: 40px;

}
ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
    background-color: #3368f7;
    color: #fff;
}
ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
    background-color: #3368f7;
    color: #fff;
}

網頁呈現：