Html/Css3整合練習-第七天

第 12 屆 iThome 鐵人賽

DAY 7

自我挑戰組

Html/Css3/Javascript從0開始自學系列第 7 篇

12th鐵人賽

sss86925

2020-09-07 22:01:07

2783 瀏覽

分享至

這次主要參考的書（或文章影片）是：「HTML5+CSS3這樣就上手出版社：再生」/CSScoke大大的「金魚都能懂的網頁教學」/彭彭大大的「Html教學影片」

前言：轉眼間已經過了一個禮拜了！照原本的行程應該繼續解釋css/html相關的東西，但感覺卻好像沒太多東西可以說了！一來是我感覺基本的語法會了後，剩下的延伸感覺應該要自己去找資源來用了，畢竟每個人想要的東西可能不太一樣;二來是這幾天我也主要都在閱讀「node.js的九堂實作課」這本書（雖然有點卡關ＱＱ）沒有太多時間去吸收html/css這邊的知識，所以今天打算把自己的幾個練習放上來，並更新自己css的筆記

範例一：

<html>
<head>
<title>基本資料</title>
<meta charset="utf-8">
</head>
<body>
<h1>基本資料</h1>
<p>姓名:aaa</p>
<p>星座:天秤</p>
<p>血型:AB</p>
<p>綽號:bbb</p>
</body>
</html>

上面這個範例基本上只有簡單的標籤跟內文
算是第二天時的成果吧

範例二

<html>
<head>
<title>個人網頁</title>
<meta charset="utf-8">
<style>
        #myfont{font-style:italic;
           color:aquamarine;}
    .mylink:link{color:red;}
    .mylink:visited{color:purple;}
    .mylinl:hover{color:gray;}
    .mylink:active{color:orchid;}
</style>

</head>
<body> 
<h1>自我介紹 </h1>  
<h1 id="myfont">電玩篇</h1>
<a class="mylink" href="file:///Users/xuchengyan/Desktop/html/大一網頁作業/WADE.html" target="_blank">我的興趣</a>
<br>
<a class="mylink" href="file:///C:/Users/ASUSSR/Desktop/%E5%8F%B0%E5%8D%97.html" target="_blank">我的家鄉</a>
<br>
<a class="mylink" href="file:///Users/xuchengyan/Desktop/html/大一網頁作業/自我介紹.html" target="_blank">自我介紹</a>
</body>
</html>

這個範例加上了不少選取器的使用

範例三

!DOCTYPE html>
<html>
  <head>
    <title>Travel website </title>
    <meta charset="utf-8"></meta>
    <meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=2" />
    <script type="text/javascript">
      function toggleMenu(number){
        var menu=document.getElementById("menu-"+number);
        menu.classList.toggle("hide");//利用toggle控制hide
         /* if(menu.style.display=="none"){
            menu.style.display="block";
          }else{
            menu.style.display="none";
          }利用程式控制開合*/         
        }
    </script>
    <link rel="stylesheet" type="text/css" href="spotlight.css"/>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
    <style type="text/css">@font-face {
      font-family: myfont;
      src: url(fonts/Chantelli_Antiqua-webfont.woff);}

      #body{width: 800px;
      margin:0 auto;}

      #header{width:100%;
      height:100%;
      text-align: center;
      background-color: burlywood;
      border-radius:0px;}

     #nav{width:100%;
     height:50px;
     text-align:center;
     background-color:darksalmon;
     border-radius: 0px;
     margin-top:-20px;}

     #aside{width:20%;
     height:400px;
     text-align:center;
     background-color: gold;
     border-radius: 0px;
     float:left;}

     #section{width:80%;
     height:400px;
     text-align:center;
     background-color:lightgoldenrodyellow;
     border-radius: 30px;
     float:right;}

     #footer{width:100%;
     height:120px;
     text-align: center;
     background-color: khaki;
     border-radius: 30px;
      clear:both}

    .hide{display:none;}

    </style>
  </head>
  <body>
   <header id="header"> <h1 class=spotlight>旅遊網站</h1></header>

   <nav id="nav"><h3>kkkk</h3></nav>

   <aside id="aside">

     <div onclick="toggleMenu(1);" text-align="left">1.<button>國內旅遊</button></div>
      <ul id="menu-1" class="hide">
        <li>北部</li>
        <li>中部</li>
        <li>南部</li>
        <li>東部</li>
      </ul>

    <div onclick="toggleMenu(2);" text-align="left">2.<button>國外旅遊</button></div>
      <ul id="menu-2" class="hide">
        <li>亞洲</li>
        <li>歐洲</li>
        <li>美洲</li>
        <li>其他</li>
      </ul>

    <div onclick="toggleMenu(3);" text-align="left">3.<button>外島旅遊</button></div>
      <ul id="menu-3" class="hide">
        <li>澎湖</li>
        <li>金馬</li>
        <li>蘭嶼綠島</li>
        <li>小琉球</li>
        <li>其他</li>
      </ul>  
    
    <div><font-color="red">帳號申請/登入</font-color></div>
    <form>
      帳號：<input type="text" name="data1" size="20">
      <br>
      密碼：<input type="text" name="data2" size="20">
      <input type="submit" value="送出">
    </form>
  </aside> 

  <section id="section">
    <h1 text-align="center">網站未來目標</h1>
    <p>短期目標：希望建立旅遊資料的文章庫，讓大家出遊時有一個整理好的網站可以參訪，
      <br>同時讓大家可以分享自己的出遊心得
    </p>
    <br>
    <p>中期目標：提供更多便利的旅遊相關資訊，例如：民宿訂購/旅遊vlog分享/
      <br>與各地政府合作發展出有當地特色的行程/
      <br>作為民意機構與旅行社合作成立真正顧客導向的行程</p>
      <br>
      <p>長遠目標:1.希望結合ＶＲ發展旅遊業 2發展成自由的貨幣兌換網站以利旅遊
        <br>ＶＲ好處：一：幫助貧窮家庭一圓國外旅遊夢想（節省機票與高昂住宿費）
        <br>&nbsp &nbsp &nbsp 二：讓繁忙的家庭也能有共同出遊的機會（節省大量交通時間）
        <br> 三：讓ＶＲ行程成為出遊前的參考依據         
      </p>
  </section>

  <footer id="footer">
    <h4 class=textStyle2>創辦者：Shark Hsu</h4>
    <a href="mailto:sss86925@gmail.com">聯絡作者</a>
  </footer>
  </body>
</html>

最後這個看起來又跟完整一點了！還用到了一點未來要講的東西（javascript)
也做了簡單的排版，今天本來也打算講排版的
後來想想自己沒什麼美術細胞，還是不要亂發文好了
以上的範例基本上開起來嘗試前，我自己都會預想一下大概長怎樣
這幾天做了越來越好些，感覺都能跟自己預想的八九不離十
其實很有成就感