iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

網頁學習紀錄系列 第 7

鐵人賽Day7-來嵌入 map 與 寫一個 form 吧!

  • 分享至 

  • xImage
  •  

今天在這個網頁內嵌入一個 map 跟寫一個 form,
左邊放入地圖,右邊放入註冊資訊,會如下方所示
https://ithelp.ithome.com.tw/upload/images/20190909/201193002dvcERHvas.png

HTML會長這樣

<section3>
        <div class="info">
            <div class="container">
                <div class="map">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.3366747341033!2d121.61086401543676!3d25.056575583961763!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442ab588f514ee5%3A0x181b71264df811b0!2zS0tCT1gg6aGY5aKD57ay6KiK!5e0!3m2!1szh-TW!2stw!4v1568037858348!5m2!1szh-TW!2stw"
                        width="500" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                        <!-- 嵌入 Google map -->
                </div>
                <div class="form">
                    <div class="form-header">
                        <h3>
                            請輸入會員資料
                        </h3>
                    </div>
                    <div class="input">
                    <label for="name">姓名</label>
                    <input type="text" class="name" id="name" placeholder="請輸入姓名">
                    <label for="name">電話</label>
                    <input type="tel" class="name" id="name" placeholder="0912-345678">
                    <label for="name">email</label>
                    <input type="email" class="name" id="name" placeholder="請輸入電子信箱">
                    <label for="name">地址</label>
                    <input type="text" class="name" id="name" placeholder="請輸入地址">
                    <button class="btn">送出</button>
                    <div class="clearfix"></div>
                    </div>   
                    嵌入地圖的方式很簡單,找到想要嵌入的地點,有一個分享的 icon 選項,選擇後裡面有一個嵌入的 HTML 語法,複製貼上就可以了,大小預設值為 w600,h450,如果想要調整大小,可以自己調整喜歡的尺寸!
        </div>
        </div>
        </div>
    </section3>

嵌入的地圖 CSS 會如下

.map{
    margin-top:1em;
    float: left;
    width: 50%;
}

因為我要讓地圖在畫面的 50%,所以我在 CSS 的部分設定他佔了 50% 的比例。

寫入表格的 CSS 如下

.form{
    display: inline-block;
    width: 50%;
    padding:20px;
    h3{
      display: block;
      text-align: center;
      margin: 0 auto;
      為了讓標題都在另一邊佔滿 50%,所以使用 display:block,用 margin: 0 auto 讓標題在此範圍置中對齊。
    }
    .input{
     font-size: $font-m;
     margin-bottom: 1em;
     line-height:2;
     設定所有的表格的格式,字體跟行高。
     
     .name,{
      width: 100%;
      font-size: $font-m;
     }
     所有的表格佔滿這個區塊範圍。
     
     .btn{
      padding: 10px;
      color: #fff;
      background: green;
      border-radius: 3px;
      border:3px solid green;
      margin-top: 10px;
      float: right;
      按鈕的設定,顏色外框等優化,並讓按鈕靠右邊
      &:hover{
        transition:all .3s;
        background: $lead-color;
        border:3px solid $lead-color;
      }
      按鈕的 hover 效果
     }
    }
}

先前覺得能套用 google map 是很強的一件事,沒想到是複製貼上...
附上 Codepen 連結
https://codepen.io/hnzxewqw/pen/bGbvbRb


上一篇
鐵人賽Day6-寫一個 用 ul li 產生的 product 產品表吧!
下一篇
鐵人賽Day8-來寫一個 footer 吧!
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言