BIT前端訓練營 | 20220104課 web布局下

titi子柚 2022-01-08 04:03:04 阅读数:195

bit 前端 web 布局

一、講解作業

在這裏插入圖片描述

flex布局
分left,right
left設置寬度30%,right自適應,則設置flex:1.錶示flex-grow,shrink,basis都為1。
畫線框圖
請添加圖片描述
純文本垂直居中:文字居中+行高設置
拆分導航:用flex,flex-between
input輸入框,當focus不顯示框,則

input{

outline:none;
}

個人中心板塊:
頭像,姓名等:水平居中(css定比特:子絕父相+偏移left,top/transform)
在這裏插入圖片描述
消息三個圖標:也可以用flex在這裏插入圖片描述
消息圖錶上的數字:包裹在消息圖標內,子絕父相在進行偏移在這裏插入圖片描述
鼠標懸浮展示其他消息:
在這裏插入圖片描述
偽類:hover
懸浮出來就展示,沒懸浮就隱藏
用浮動
或者flex布局:設置布局方式flex-direction為column,則此時主軸就是垂直方向,交叉軸是水平方向。
align-items:flex-end,flex-start。
align-self:指定某個元素的方向,這樣就可以做出某些元素向左,某些元素向右的浮動效果
記事本:
記事本title用position:sticky
內容用無序列錶實現
圖片用浮動屬性,就實現了文字圍繞圖片。記得清除浮動,不然會影響到後續布局
添加板塊,讓內容的父類容器指定flex,內容指定flex:1,自適應分配區域,才能使添加板塊一直固定在下方
郵箱
收件箱/已發送
頭像名字也是用浮動

二、響應式設計

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
name:源信息作用的類型
content:指定初始
user-scalable:no
媒體查詢:

舉個例子:
針對不同的屏幕大小,方塊的背景顏色不同
在這裏插入圖片描述
css樣式後面會覆蓋前面,所以有個優先級

在這裏插入圖片描述

在這裏插入圖片描述
用比例單比特,相對長度單比特,為了響應式設計
rem:針對根元素的比例大小做縮放
百分比:相對於父元素
視口單比特:vh視口高度:相對視口高度(Viewport Height),視口被均分為100單比特的vh,即1vh = 1% * 視口高度。可以用來解决主體內容不足以撐起視口的剩餘高度時,頁面底部留白太多的尷尬問題。一般用vh,就不用設置父元素的高度了。
vw視口寬度:是包含了滾動條的,一般用%好一些

在這裏插入圖片描述
在這裏插入圖片描述

版权声明:本文为[titi子柚]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080403038803.html