然后是container-form兩個(gè)各占一行的輸入：

布局：由于是左icon右input的布局，所以用flex，并且這是主軸靠左，input設(shè)flex:1，完成大致布局.

左側(cè)icon：有圖片做icon右邊有輸入欄，由于icon是圖片并且有近似等高的同行小杠杠，于是設(shè)計(jì)圖片左右padding+右側(cè)border，看原型圖發(fā)現(xiàn)右側(cè)小杠杠似乎稍高，于是圖片上下也設(shè)置一點(diǎn)padding來撐高右側(cè)小杠杠，之后外面用一個(gè)div包住設(shè)置margin和行高來居中，完成左側(cè)；

右側(cè)input:簡單設(shè)置一下padding并去掉border&outline就好，在此順便對placeholder的樣式做一點(diǎn)探究(見下面總結(jié))

接著是container-form的button, 由于button的display是inline-block所以可以控制width,設(shè)置為100%,然后設(shè)置上下padding.然后"登錄"之間有一個(gè)字左右的間距所以加上 

最后是forgetpw,包含文字并且靠右,繼續(xù)用flex,主軸flex-end，交叉軸center.設(shè)置好a標(biāo)簽的顏色樣式

對比優(yōu)化

對比

topbar高度不夠,左右padding稍寬,登錄字體不一樣

輸入左側(cè)icon的橫向padding加一點(diǎn),行高加一點(diǎn)

登錄高度不夠.效果圖"登錄"應(yīng)該是用letter-spacing做間隔的導(dǎo)致沒居中(這個(gè)不改哈哈)

忘記密碼字體過大

GIF效果圖沒有做點(diǎn)擊input顯示"圓圈+x".

處理：這個(gè)裁剪下PSD的圖然后簡單設(shè)置一下就可以簡單加入輸入行了.flex大法好!

完成之后效果如下：

學(xué)習(xí)更多CSS知識之后修改CSS，嘗試可復(fù)用yang"shi:

header使用分三種方案： flex、float+absolute、absolute，可以通過修改header的標(biāo)簽應(yīng)用不同效果.

form-row組建完成一行樣式

擴(kuò)展性要求：去掉header的三塊文字的任意一兩個(gè)，剩下的一兩個(gè)都還在原位置上不會受到影響

一開始用的是flex三列布局，三個(gè)標(biāo)簽按照flex的justify-content: space-between;等距離分成左中右，縱向按照align-items: center;垂直居中，但是這樣的樣式去掉一個(gè)標(biāo)簽布局就會變化，去掉標(biāo)簽的話需要用等長的 來頂上才能保持標(biāo)簽位置不變.

為了滿足擴(kuò)展性要求，將header改為左右float中間正常居中樣式，但是實(shí)測發(fā)現(xiàn)浮動的a標(biāo)簽會占位導(dǎo)致中間的標(biāo)簽不居中(span內(nèi)聯(lián)包圍了float),所以暫時(shí)放棄這個(gè)方案，并計(jì)劃找時(shí)間學(xué)習(xí)float看看有無解決方法.

根據(jù)上面方法進(jìn)行修改，左右使用absolute，中間不變,輕松搞定...

移動端：header始終固定頂部

解決：header加fixed,給定width并設(shè)置top,完成.

效果：

position定位有哪幾種？各有什么特點(diǎn) 參考：CSS 相對|絕對(relative/absolute)定位系列

static：默認(rèn)定位

不可層疊,不脫離文檔流

relative：相對當(dāng)前位置定位

不可層疊,不脫離文檔流

相對其正常位置進(jìn)行定位,通過left、right、top、bottom位移

absolute：絕對定位

包裹性：讓元素由原來寬度變成自適應(yīng)內(nèi)部元素的寬度

破壞性：脫離文檔流，令原本占據(jù)的空間坍塌(布局破壞)

定位：相對最近的非static父級定位,如果沒有則繼續(xù)向上查找直到body,通過left、right、top、bottom位移,可通過z-index進(jìn)行層次分級

會生成一個(gè)塊級框

fixed：固定定位

包裹性：讓元素由原來寬度變成自適應(yīng)內(nèi)部元素的寬度

破壞性：脫離文檔流，令原本占據(jù)的空間坍塌(布局破壞)

相對于瀏覽器viewport定位,通過left、right、top、bottom位移,可通過z-index進(jìn)行層次分級

會生成一個(gè)塊級框

inherit：從父類繼承position屬性的值

哪些css屬性可以設(shè)置百分比，其計(jì)算原則是什么？

參考：MDN

計(jì)算原則：百分比*參照值

Tip: 百分比值是一種相對值，任何時(shí)候要分析它的效果，都需要正確找到它的參照值

可設(shè)置屬性

盒模型系列:

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(參考相對應(yīng)文字字號)

font-size(參照包含父元素字號)

flex系列：

flex-basis(參考flex容器大小)

background系列:

background-position(參考背景定位區(qū)域大小-背景圖片大小，其中大小指的是水平偏移的寬度和垂直偏移的高度) 圖例

background-size(相對于定位區(qū)域)

常見的表單元素有哪些？各有什么屬性？

form 表單

屬性

action: 提交表單時(shí)執(zhí)行的動作，可以在此指定某個(gè)服務(wù)器表單處理腳本(如果省略action，action被設(shè)置為當(dāng)前頁面)

method: HTTP方法(GET|POST)

accept-charset：使用的字符集

autocomplete: 自動完成表單(默認(rèn)開啟)

enctype：提交數(shù)據(jù)的編碼

novalidate：規(guī)定不驗(yàn)證表單

target：規(guī)定action屬性中地址的目標(biāo)(默認(rèn)_self，也就是指向當(dāng)前)

input 輸入，可通過改變type變換形態(tài)

屬性 其他屬性參考了解HTML表單之input元素的30個(gè)元素屬性

type: text(文本) | password(密碼,變圓點(diǎn)) | checkbox(復(fù)選框) | radio(單選)

html5新增屬性：color & date & datetime & datetime-local & email & month & number & range & search & tel & time & url & week

datalist(html5) 的預(yù)定義選項(xiàng)列表, input的list屬性引用datalist的id即可關(guān)聯(lián)

子元素option 待選項(xiàng)

label 標(biāo)簽，可以通過for屬性綁定對應(yīng)input的id

select 下拉列表

子元素option 待選項(xiàng)

textarea 多行文本框, 用rows&cols控制大小

button 按鈕，可通過改變type變換作用

屬性type: button(按鈕) | sumbit(提交) | reset(重置)

fieldset 表單外框

子元素legend 表單外框名稱

如何理解HTML結(jié)構(gòu)的語義化？ 參考：理解HTML語義化

含義：標(biāo)簽有特定的意義，即內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）. 例如header指頁面頂部欄，nav指導(dǎo)航欄.

意義：

代碼結(jié)構(gòu)優(yōu)雅,便于閱讀理解文檔布局，便于開發(fā)合作維護(hù)

爬蟲解析方便

用戶體驗(yàn) & 特殊設(shè)備解析(title、alt的信息注釋)

最佳實(shí)踐：

少用無意義的div&span, 無特定意義時(shí)盡量用p取代div

純樣式標(biāo)簽用CSS替代

表格標(biāo)題用caption，表頭用thead&th,主體用tbody&td,尾部用tfoot包圍.

每個(gè)input標(biāo)簽的對應(yīng)的說明文本都要使用label標(biāo)簽，通過設(shè)置label的for=(input"s id)即可關(guān)聯(lián)

使用fixed的時(shí)候，在手機(jī)上查看是否會有問題，怎么解決？

這部分個(gè)人經(jīng)驗(yàn)不足，在網(wǎng)上找部分案例和解決方法

1)Web移動端Fixed布局的解決方案

問題圖片：

問題描述：設(shè)置好上下fixed，中間普通margin與上下隔開.下拉列表超過一頁，點(diǎn)擊輸入框，在軟鍵盤喚起之后頁面底部的fixed元素將失效.

問題原因：軟鍵盤喚起之后,頁面fixed元素將失效，當(dāng)頁面超過一屏并滾動時(shí)，失效的fixed元素也會隨之滾動.

問題解決：

思路：如果當(dāng)前層級頁面不滾動，那么即便fixed元素失效也無法隨頁面滾動.

修改：中間使用absolute與上下隔開，并且y軸設(shè)置可滾動(如果出現(xiàn)滾動卡頓，可以加入-webkit-overflow-scrolling:touch【非標(biāo)準(zhǔn),用于SafariMobile】)

2) 其他一些問題處理

輸入框focus后被軟鍵盤遮擋，可以嘗試input的scrollIntoView.

iOS可能有坑：軟鍵盤遮擋輸入框然后在輸入一條文字后重寫顯示輸入框

最好將header和footer的touchmove事件禁止，防止出發(fā)瀏覽器全屏模式切換導(dǎo)致header和footer被工具欄遮蔽.

滾動到頁面上下邊緣時(shí)繼續(xù)拖拽會將view拖走導(dǎo)致頁面"露底".可以做一些確認(rèn)邊緣的判斷來阻止touchmove事件的發(fā)生.

常見的移動端登錄頁header有哪些實(shí)現(xiàn)方式？

沒找到類似的文字，總結(jié)一下我用到的

簡單通用flex，水平三分垂直居中

特點(diǎn)：簡單好用適合布局，但是刪除元素會導(dǎo)致布局破壞

左右float中間自動

特點(diǎn)：使用簡單,但是布局上個(gè)人不太喜歡用float

左右absolute中間自動

特點(diǎn)：暴力, 穩(wěn)

結(jié)果如下

/* Webkit瀏覽器支持(非標(biāo)準(zhǔn)) 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實(shí)測不支持 */
/* Firefox 19+(非標(biāo)準(zhǔn)) https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-moz-placeholder*/
.form-raw input::-moz-placeholder {
  color: #aaa;
}
/* 實(shí)驗(yàn)中特性 https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown */
.form-raw input:placeholder-shown {
  color: #aaa;
  /* border: 2px solid red; */   /* border有效并且只有在Firefox有效*/
}

Github

線上展示

【CSS練習(xí)】IT修真院--練習(xí)1-九宮格

【CSS練習(xí)】IT修真院--練習(xí)2-開發(fā)工具

【CSS練習(xí)】IT修真院--練習(xí)3-簡單界面

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

【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

【CSS練習(xí)】IT修真院--練習(xí)6-護(hù)工列表界面