CSS練習 IT修真院 練習4 移動端介面

2021-09-13 17:11:30 字數 1525 閱讀 6745

完成簡單布局,然後填充介面

與效果圖對比優化

完成驗收要求:header擴充套件性 & 頂欄固定

進行placeholder樣式相容性研究

完成任務四-深度思考

task4跟隨深度思考 & 師兄建議進行修改

[ ] 深度思考:手機解析度和網頁px的區別(todo:週末補學)

明確效果:乙個寬度自適應螢幕的登入介面

步驟:然後是container-form兩個各佔一行的輸入:

接著是container-form的button, 由於button的display是inline-block所以可以控制width,設定為100%,然後設定上下padding.然後"登入"之間有乙個字左右的間距所以加上 

最後是forgetpw,包含文字並且靠右,繼續用flex,主軸flex-end,交叉軸center.設定好a標籤的顏色樣式

對比優化

完成之後效果如下:

學習更多css知識之後修改css,嘗試可復用yang'shi:

擴充套件性要求:去掉header的三塊文字的任意一兩個,剩下的一兩個都還在原位置上不會受到影響

移動端:header始終固定頂部

position定位有哪幾種?各有什麼特點 參考:css 相對|絕對(relative/absolute)定位系列

relative:相對當前位置定位

absolute:絕對定位

fixed:固定定位

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

哪些css屬性可以設定百分比,其計算原則是什麼?

可設定屬性

margin(參照包含塊寬度)

定位系列:

文字系列:

flex系列:

background系列:

常見的表單元素有哪些?各有什麼屬性?

input 輸入,可通過改變type變換形態

datalist(html5) 的預定義選項列表, input的list屬性引用datalist的id即可關聯

label 標籤,可以通過for屬性繫結對應input的id

select 下拉列表

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

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

fieldset 表單外框

如何理解html結構的語義化? 參考:理解html語義化

最佳實踐:

使用fixed的時候,在手機上檢視是否會有問題,怎麼解決?

2) 其他一些問題處理

常見的移動端登入頁header有哪些實現方式?

左右float中間自動

左右absolute中間自動

修真院 BFC及其如何工作

目錄 1.背景介紹 2.知識剖析 3.常見問題 4.解決方案 5.編碼實戰 6.擴充套件思考 7.參考文獻 8.更多討論 一,背景介紹 什麼是fc?fc的全稱是 formatting contexts,是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子...

修真院WEB小課堂 css有哪些選擇器

在html頁面中,如果我們想要去改變乙個元素的字型大小 尺寸 顏色 樣式等 就需要用到css選擇器來進行對修改元素一對一或者多對一的進行匹配並改變其樣式,這就是css選擇器。選擇器是一種模式,它能在頁面上匹配一些元素,使相關的宣告僅被應用到被選擇的元素上。1 命名 w3c css2.1的 4.1.3...

修真院web小課題 如何使用sass?

1.背景介紹 關於sass sass 的開發文件中如此描述自己 sass 是 css 的乙個擴充套件,它使 css 的使用起來更加優雅和強大。sass 的終極目標是解決 css 的缺陷。如我們所知,css 並不是乙個完美的語言。css 雖然簡單易學,卻也能迅速製造嚴重的混淆,尤其是在工程浩大的專案中...