【CSS練習】IT修真院--練習4-移動端界面

時間 2019-11-10

標籤 CSS練習練習移動界面欄目無線简体版

原文原文鏈接

任務4、一個最多見的移動端頁面

完成的事情

完成簡單佈局，而後填充界面
與效果圖對比優化
完成驗收要求：header擴展性 & 頂欄固定
進行placeholder樣式兼容性研究
完成任務四-深度思考
task4跟隨深度思考 & 師兄建議進行修改css
- 輸入欄左側換用label
- 輸入限制電話11位，密碼16位
- 根據HTML結構的語義化修改index.html
- 嘗試main下再加一個div.content用來包裹滾動的內容

計劃的事情

[ ] 任務五計劃及完成一部分
[ ] 瞭解CSS通配符 & 選擇器性能優化/瀏覽器渲染原理
[ ] float學習(週六學習)html
- [ ] 張鑫旭《CSS世界》相關章節
- [ ] 張鑫旭 float系列
[ ] 深度思考：手機分辨率和網頁px的區別(TODO:週末補學)html5
- link1
- link2
- link3

遇到的問題

FireFox60下placeholder樣式修改失效git
- input:-moz-placeholder(失效)
- input::-moz-placeholder(失效)
- input:placeholder-shown(失效)

收穫

1、佈局 & 優化

明確效果：一個寬度自適應屏幕的登陸界面
步驟:github
- 1).對目標效果GIF進行截圖，得到全屏效果圖、425px效果圖、320px效果圖
- 2).從PSD文件中導出須要的圖片(phone&lock)，並用吸管工具獲取界面背景色#eff0f四、登陸按鈕底色#5fc0cd、input中間小槓顏色#eaedee
- 3). 開始簡單界面編寫web
  - 首先是topbar, 關閉登陸註冊，分紅三列，關閉靠左登陸居中註冊靠右chrome
    - 佈局：能夠用float解決靠左靠右剩下一個在文檔流中居中，不過按照慣例要走新一點的路，因此這裏選擇使用flex佈局，topbar類設置justify-conent: space-around，也就是兩端對齊，項目間間隔相等的主軸對齊方式.再設置align-items: center使三個項垂直居中.
    - 調整：segmentfault
      - topbar中的文字裏邊有距離，這裏應該用padding作填充撐起外盒，尚未測量，能夠先這是html的font-size再用rem作padding填充.
      - 關閉登陸註冊剛開始用的是三個<a>標籤,而且作了個去底線處理,可是中途發現登陸是個title而不是連接，故篩選大小後暫時先選用<h3>.
  - 而後是container-form兩個各佔一行的輸入：瀏覽器
    - 佈局：因爲是左icon右input的佈局，因此用flex，而且這是主軸靠左，input設flex:1，完成大體佈局.
    - 左側icon：有圖片作icon右邊有輸入欄，因爲icon是圖片而且有近似等高的同行小槓槓，因而設計圖片左右padding+右側border，看原型圖發現右側小槓槓彷佛稍高，因而圖片上下也設置一點padding來撐高右側小槓槓，以後外面用一個div包住設置margin和行高來居中，完成左側；
    - 右側input:簡單設置一下padding並去掉border&outline就好，在此順便對placeholder的樣式作一點探究(見下面總結)
  - 接着是container-form的button, 因爲button的display是inline-block因此能夠控制width,設置爲100%,而後設置上下padding.而後"登陸"之間有一個字左右的間距因此加上 
  - 最後是forgetpw,包含文字而且靠右,繼續用flex,主軸flex-end，交叉軸center.設置好a標籤的顏色樣式
對比優化性能優化
- 對比
  - topbar高度不夠,左右padding稍寬,登陸字體不同
  - 輸入左側icon的橫向padding加一點,行高加一點
  - 登陸高度不夠.效果圖"登陸"應該是用letter-spacing作間隔的致使沒居中(這個不改哈哈)
  - 忘記密碼字體過大
  - GIF效果圖沒有作點擊input顯示"圓圈+x".
  - 處理：這個裁剪下PSD的圖而後簡單設置一下就能夠簡單加入輸入行了.flex大法好!
- 完成以後效果以下：
學習更多CSS知識以後修改CSS，嘗試可複用yang'shi:
- header使用分三種方案： flex、float+absolute、absolute，能夠經過修改header的標籤應用不一樣效果.
- form-row組建完成一行樣式

2、驗收標準

擴展性要求：去掉header的三塊文字的任意一兩個，剩下的一兩個都還在原位置上不會受到影響
- 一開始用的是flex三列布局，三個標籤按照flex的justify-content: space-between;等距離分紅左中右，縱向按照align-items: center;垂直居中，可是這樣的樣式去掉一個標籤佈局就會變化，去掉標籤的話須要用等長的 來頂上才能保持標籤位置不變.
- 爲了知足擴展性要求，將header改成左右float中間正常居中樣式，可是實測發現浮動的a標籤會佔位致使中間的標籤不居中(span內聯包圍了float),因此暫時放棄這個方案，並計劃找時間學習float看看有無解決方法.
- 根據上面方法進行修改，左右使用absolute，中間不變,輕鬆搞定...
移動端：header始終固定頂部
- 解決：header加fixed,給定width並設置top,完成.
- 效果：

3、深刻思考

position定位有哪幾種？各有什麼特色參考：CSS 相對|絕對(relative/absolute)定位系列
- static：默認定位
  - 不可層疊,不脫離文檔流
- relative：相對當前位置定位
  - 不可層疊,不脫離文檔流
  - 相對其正常位置進行定位,經過left、right、top、bottom位移
- absolute：絕對定位
  - 包裹性：讓元素由原來寬度變成自適應內部元素的寬度
  - 破壞性：脫離文檔流，令本來佔據的空間坍塌(佈局破壞)
  - 定位：相對最近的非static父級定位,若是沒有則繼續向上查找直到body,經過left、right、top、bottom位移,可經過z-index進行層次分級
  - 會生成一個塊級框
- fixed：固定定位
  - 包裹性：讓元素由原來寬度變成自適應內部元素的寬度
  - 破壞性：脫離文檔流，令本來佔據的空間坍塌(佈局破壞)
  - 相對於瀏覽器viewport定位,經過left、right、top、bottom位移,可經過z-index進行層次分級
  - 會生成一個塊級框
- inherit：從父類繼承position屬性的值
哪些css屬性能夠設置百分比，其計算原則是什麼？
- 參考：MDN
- 計算原則：百分比*參照值
  - Tip: 百分比值是一種相對值，任什麼時候候要分析它的效果，都須要正確找到它的參照值
- 可設置屬性
  - 盒模型系列:
    - content: width(參照包含塊寬度)、height(參照包含塊高度)
    - padding(參照包含塊寬度)
    - border
      - border-radius(參照包自身寬度&高度)
      - border-image
        
        border-image-slice(參考圖片尺寸)
        
        border-image-width(參考自身寬度&高度)
    - margin(參照包含塊寬度)
  - 定位系列：
    - left、right(參照包含塊寬度)
    - top、bottom(參照包含塊高度)
  - 文本系列：
    - text-indent(參照包含塊寬度)
    - word-spacing(參照受影響字體寬度)
    - text-size-adjust(參考相對應文字字號)
    - font-size(參照包含父元素字號)
  - flex系列：
    - flex-basis(參考flex容器大小)
  - background系列:
    - background-position(參考背景定位區域大小-背景圖片大小，其中大小指的是水平偏移的寬度和垂直偏移的高度) 圖例
    - background-size(相對於定位區域)
常見的表單元素有哪些？各有什麼屬性？
- form 表單
  - 屬性
    - action: 提交表單時執行的動做，能夠在此指定某個服務器表單處理腳本(若是省略action，action被設置爲當前頁面)
    - method: HTTP方法(GET|POST)
    - accept-charset：使用的字符集
    - autocomplete: 自動完成表單(默認開啓)
    - enctype：提交數據的編碼
    - novalidate：規定不驗證表單
    - target：規定action屬性中地址的目標(默認_self，也就是指向當前)
- input 輸入，可經過改變type變換形態
  - 屬性其餘屬性參考瞭解HTML表單之input元素的30個元素屬性
    - type: text(文本) | password(密碼,變圓點) | checkbox(複選框) | radio(單選)
    - html5新增屬性：color & date & datetime & datetime-local & email & month & number & range & search & tel & time & url & week
- datalist(html5) <input>的預約義選項列表, input的list屬性引用datalist的id便可關聯
  - 子元素option 待選項
- label 標籤，能夠經過for屬性綁定對應input的id
- select 下拉列表
  - 子元素option 待選項
- textarea 多行文本框, 用rows&cols控制大小
- button 按鈕，可經過改變type變換做用
  - 屬性type: button(按鈕) | sumbit(提交) | reset(重置)
- fieldset 表單外框
  - 子元素legend 表單外框名稱
如何理解HTML結構的語義化？參考：理解HTML語義化
- 含義：標籤有特定的意義，即內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）. 例如header指頁面頂部欄，nav指導航欄.
- 意義：
  - 代碼結構優雅,便於閱讀理解文檔佈局，便於開發合做維護
  - 爬蟲解析方便
  - 用戶體驗 & 特殊設備解析(title、alt的信息註釋)
- 最佳實踐：
  - 少用無心義的div&span, 無特定意義時儘可能用p取代div
  - 純樣式標籤用CSS替代
  - 表格標題用caption，表頭用thead&th,主體用tbody&td,尾部用tfoot包圍.
  - 每一個input標籤的對應的說明文本都要使用label標籤，經過設置label的for=(input's id)便可關聯
使用fixed的時候，在手機上查看是否會有問題，怎麼解決？
- 這部分我的經驗不足，在網上找部分案例和解決方法
  - 1)Web移動端Fixed佈局的解決方案
    - 問題圖片：
    - 問題描述：設置好上下fixed，中間普通margin與上下隔開.下拉列表超過一頁，點擊輸入框，在軟鍵盤喚起以後頁面底部的fixed元素將失效.
    - 問題緣由：軟鍵盤喚起以後,頁面fixed元素將失效，當頁面超過一屏並滾動時，失效的fixed元素也會隨之滾動.
    - 問題解決：
      - 思路：若是當前層級頁面不滾動，那麼即使fixed元素失效也沒法隨頁面滾動.
      - 修改：中間使用absolute與上下隔開，而且y軸設置可滾動(若是出現滾動卡頓，能夠加入-webkit-overflow-scrolling:touch【非標準,用於SafariMobile】)
  - 2) 其餘一些問題處理
    - 輸入框focus後被軟鍵盤遮擋，能夠嘗試input的scrollIntoView.
    - iOS可能有坑：軟鍵盤遮擋輸入框而後在輸入一條文字後重寫顯示輸入框
    - 最好將header和footer的touchmove事件禁止，防止出發瀏覽器全屏模式切換致使header和footer被工具欄遮蔽.
    - 滾動到頁面上下邊緣時繼續拖拽會將view拖走致使頁面"露底".能夠作一些確認邊緣的判斷來阻止touchmove事件的發生.
常見的移動端登陸頁header有哪些實現方式？
- 沒找到相似的文字，總結一下我用到的
  - 簡單通用flex，水平三分垂直居中
    - 特色：簡單好用適合佈局，可是刪除元素會致使佈局破壞
  - 左右float中間自動
    - 特色：使用簡單,可是佈局上我的不太喜歡用float
  - 左右absolute中間自動
    - 特色：暴力, 穩

4、探究input標籤的placeholder樣式

結果以下

/* Webkit瀏覽器支持(非標準) https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-input-placeholder */
.form-raw input::-webkit-input-placeholder {
  color: #aaa;
}
/* Chrome:57+已支持去前綴 https://www.chromestatus.com/feature/6715780926275584 */
.form-raw input::placeholder {
  color: #aaa;
}
/* IE10+支持  https://developer.mozilla.org/zh-CN/docs/Web/CSS/:-ms-input-placeholder */
.form-raw input:-ms-input-placeholder {
  color: #aaa;
}
/* Firefox 4-18 */
.form-raw input:-moz-placeholder {
  color: #aaa;
}
/* 很奇怪， FireFox60實測不支持 */
/* Firefox 19+(非標準) https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-moz-placeholder*/
.form-raw input::-moz-placeholder {
  color: #aaa;
}
/* 實驗中特性 https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown */
.form-raw input:placeholder-shown {
  color: #aaa;
  /* border: 2px solid red; */   /* border有效而且只有在Firefox有效*/
}