{Day24} 小公主訂單網頁嘗試集＿第二十四集＿實作參天

2022 iThome 鐵人賽

DAY 24

Modern Web

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

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

icetong

2022-10-09 11:28:15

290 瀏覽

分享至

連假第二天，我們來點產品規格，讓消費者能更了解他們預購買的商品，那就加入一些表格吧！

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="day24.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>

  
    


<table>
    <h2>海豚介紹</h2>
    <tr>
      <td>品種</td>
      <td>艾倫戴爾特有種</td>
    </tr>
    <tr>
      <td>飼養方式</td>
      <td>陪玩/陪喝/陪吃</td>
      <td></td>
   
    </tr>
    <tr>
        <td>飼養環境</td>
        <td>有愛的水域</td>
      </tr> 
    <tr>
        <td>售價</td>
        <td>你對他的愛無價</td>
      </tr>
  </table>

  <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>
</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;
}
table{
    position: relative;
    margin-left:auto; 
    margin-right:auto;
    text-align: left;
    border-style: groove;
    border: collapse 3px; 
}
h2{
text-align: center;
}

網頁呈現：

好ㄉ，連假愉快！！！