亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

• 代碼
  html代碼：

    <h3 class="title">波士直聘求職者注冊</h3>
    <form action="register.php" class="register">
      <label for="username">用戶名：</label>
      <input
        type="text"
        name="username"
        id="username"
        placeholder="6位以上英文數(shù)字下劃線"
        onblur="isEmpty(this)"
        autofocus
        required
      />
      <label for="password">密碼:</label>
      <input
        type="password"
        name="pwd1"
        id="password"
        placeholder="******"
        onblur="isEmpty(this)"
        required
      />
      <label for="password_confirm">確認密碼：</label>
      <input
        type="password"
        name="pwd2"
        id="password_confirm"
        placeholder="******"
        onblur="isEqual(this)"
        required
      />
      <label for="email">郵箱：</label>
      <input type="email" placeholder="demo@mail.com" />
      <label for="phone">手機：</label>
      <input
        type="text"
        name="phone"
        id="phone"
        placeholder="180xxxxxxxx"
        onblur="isPhone(this)"
        required
      />
      <label for="verify_code">驗證碼:</label>
      <div>
        <input
          type="text"
          name="verify_code"
          id="verify_code"
          placeholder="請輸入手機驗證碼"
          required
        />
        <label for="" onclick="verify_phone()">獲取驗證碼(60s)</label>
      </div>
      <label for="realname">姓名：</label>
      <input
        type="text"
        name="realname"
        id="realname"
        placeholder="本人真實姓名"
        required
      />
      <label for="secret">性別：</label>
      <div>
        <input type="radio" name="gender" id="male" value="0" /><label
          for="male"
          >男</label
        >
        <input type="radio" name="gender" id="female" value="1" />
        <label for="female">女</label>
        <input type="radio" name="gender" id="secret" value="-1" /><label
          for="secret"
          >保密</label
        >
      </div>
      <label for="birth">出生日期</label>
      <input type="date" value="1990-10-01" />
      <label for="edu">學歷：</label>
      <select name="edu" id="edu">
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3">大專</option>
        <option value="4" selected>本科</option>
        <option value="5">碩士</option>
        <option value="6">博士</option>
        <option value="7">社會大學</option>
      </select>
      <label for="pos">住所</label>
      <iframe
        src="https://map.baidu.com/"
        frameborder="0"
        width="300"
        height="300"
      ></iframe>
      <label for="#">技能</label>
      <div class="skill">
        <span class="item">
          <input type="checkbox" name="skill[]" id="c" /><label for="c"
            >C語言</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="cpp" /><label for="cpp"
            >C++</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="java" /><label for="java"
            >Java</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="python" /><label
            for="python"
            >Python</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="android" /><label
            for="android"
            >安卓</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="ios" /><label for="ios"
            >iOS</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="php" /><label for="php"
            >PHP</label
          >
        </span>
        <span class="item">
          <input type="checkbox" name="skill[]" id="mp" /><label for="mp"
            >小程序</label
          >
        </span>
      </div>
      <label for="user-pic">頭像</label>
      <input type="hidden" name="MAX_FILE_SIZE" id="10000" />
      <input type="file" name="user_pic" id="user-pic" />
      <div class="user-pic" style="grid-column: 2"></div>
      <label for="user-resume">個人簡歷：</label>
      <input type="hidden" name="MAX_FILE_SIZE" value="10000" />
      <input type="file" name="resume" id="user-resume" />
      <div class="user-resume" style="grid-column: 2"></div>
      <label for="description">自我介紹：</label>
      <div class="desc">
        <textarea
          name="description"
          id="description"
          placeholder="請輸入自我介紹內(nèi)容："
          cols="30"
          rows="10"
          oninput="show(this)"
          onselect="this.style.color='red'"
        ></textarea>
        <span class="tips">還能輸入<em>40個字</em></span>
      </div>
      <button>提交</button>
    </form>

CSS代碼：

body {
  background-size: 100% 100%;
  background: url(../images/bg2.jpg);
}
.title {
  text-align: center;
}
.register {
  width: 400px;
  margin: auto;
  padding: 20px 30px 10px;
  border-radius: 5px;
  background: linear-gradient(to top left, lightcyan, white);
  box-shadow: 0 0 8px #888;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
}
.register > button {
  grid-column: span 2;
  outline: none;
  border: none;
  background-color: seagreen;
  color: white;
  height: 32px;
  border-radius: 5px;
}
.register > button:hover {
  background: coral;
  cursor: pointer;
  box-shadow: 0 0 6px #888;
}
.register label {
  white-space: nowrap;
}
.register input {
  border: none;
  outline: none;
  box-shadow: 0 0 3px skyblue;
  border-radius: 10px;
}
.register input:hover,
.register input:focus {
  box-shadow: 0 0 3px coral;
}
.register input::-webkit-input-placeholder {
  padding-left: 5px;
  color: green;
}
.register input::-ms-input-placeholder {
  color: green;
}
input::-moz-placeholder {
  color: green;
}
.register > .skill {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
}
.register > .skill > .item {
  display: flex;
  flex-flow: nowrap;
  box-sizing: border-box;
  width: 100px;
}
.register > .desc {
  position: relative;
}
.register > .desc > textarea {
  position: relative;
}
.register > .desc > .tips {
  position: absolute;
  right: 100px;
  bottom: 10px;
  color: #888;
  font-size: 12px;
}

• 效果圖
  • Chrome瀏覽器
    
  • 360正常效果圖
    
  • 360縮小以顯示全部
    

• 結語：

有一個問題我還沒有太懂：MAX_FILE_SIZE是以什么做單位的？KB嗎？
即使是最簡單和基礎的HTML表單，依然完成得非常吃力。這個作業(yè)完成花了差不多一天時間。
當然了，HTML本身比較簡單，但是也不是完全掌握。
另外就是css的樣式，始終不能夠隨心所欲。在技能一欄的排列里面很難做得很理想，不能夠在擁擠的情況下依然可以排列得很工整。還有就是有時候內(nèi)容充滿了父元素的空間之后，就會亂排列。不能夠自如縮放和按照想法排序。另外絕對布局以px為單位在不同分辨率下會跑偏。即使是Chrome代碼貌似也不行。用的老師的代碼，不能夠正常顯示。
還有背景圖怎么變透明和拉伸？現(xiàn)在變成了平鋪和完全不透明。

還有我在app經(jīng)?？吹?行4列圖標或者是類似的排列，我不太會做。希望CSS課程可以有講到。當然了，我想這個可能比較簡單，除了計算元素width比較麻煩。
現(xiàn)在的表單基本上都會有星號和符合要求后打勾，不符合提示錯誤信息的功能，這個功能不算太難，但是css實現(xiàn)可能有點困難。因為不是每一個都有。但是樣式要整齊。
另外在不同瀏覽器的適配方面我始終很頭疼。國內(nèi)360比較通用，但是在最新的win10系統(tǒng)里面，360對高分屏適配做得最差，我都投訴了好幾次360官方論壇了。edge和Chrome做得很不錯，但是功能適配上始終不如360.
本來還想添加細致的功能和元素，但是做下來發(fā)現(xiàn)能力和時間都遠遠不夠。
以后學習，就算是很簡單，要能夠在學完之后可以記得住，用得了，都不容易?。≈荒軌蚍捶磸蛷途毩?！一邊用一邊練習！
希望在以后的時間里，如果在實際工作中遇到問題，還可以得到老師和同學的互相幫助！因為單單3個月的少量時間學習，恐怕不足以解決所有的問題！當然了，這可能比較困難！但是我希望技術支持可以有一定的延長！當然了，最好肯定是3個月基本掌握，但是這貌似不太現(xiàn)實！
發(fā)表一天后，才想起很多事件屬性和文本域都沒有添加。所以又修改一遍再發(fā)表。另外就是增加了360縮小后的效果，非常糟糕。
希望css講課可以講到。
還有就是我希望做一個app，可以做筆記用，需要雙指靠近離開讓字體可以放大縮小的，就像現(xiàn)在的手機wps。希望可以介紹一下如何實現(xiàn)。

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：MAX_FILE_SIZE,單位是字節(jié), 上課說過的