flex布局
上節復習
選擇器進階:
偽類選擇器: 當滿足特定條件時,激活對應的樣式
元素:hover{} 當滑鼠經過元素時,激活樣式
偽元素選擇器: 創建一個虛假的元素.不能被選中.不存在網頁dom中(安全性/性能)
元素::before{content:'內容'} 在元素前面添加內容
元素::after{content:'內容'} 在元素后面添加內容
結構選擇器: 選擇一個結構中的指定元素
元素:nth-child(n){} --> 選擇指定序號的子元素
元素:first-child{} --> 選擇第一個子元素
元素:last-child{} --> 選擇最后一個元素
表單(form)
寫一些提供用戶進行互動的視窗 -- 輸入框,勾選框,確認框,提交按鈕
工具:
input -- 輸入框
textarea -- 多行輸入框
button -- 按鈕
select -- 下拉框
option -- 下拉框里的選項
input有很多種型別
text -- 文字
password -- 密碼
radio -- 單選框(根據name屬性判斷)
checkbox -- 多選框
file -- 檔案
submit -- 提交
reset -- 重置
# 浮動布局與定位布局
學習編程的訣竅 -- 多敲多練
布局方式
傳統布局方式:
1.檔案流布局: 網頁元素從上往下,從左往右進行布局. 主要用塊元素布局,塊元素獨占一行 --> 通過margin padding display line-height
2.浮動布局: 讓一個元素可以在父級元素的區域內,向左/右浮動.一直到邊界/其他浮動元素為止
3.定位布局: 讓一個元素在一個指定的位置顯示
絕對定位: 基于父級坐標進行移動
相對定位: 基于本身進行移動
目前比較新,比較主流的布局方式為flex(彈性盒模型)
flex--> 把內容基于兩條軸進行分割排版
浮動篇(float)
浮動一開始是用來實作一些圖文環繞效果.
后續延伸出了布局的功能 --> 浮動用來做水平布局也很方便
(以前的水平布局方式是通過把塊元素轉為行內塊.但這樣會有缺陷: 1.性能比較差 2.如果盒子內容超出了寬高,排版會崩塌)
基本上所有標簽都可以添加float樣式.
float主要兩個屬性:
1.left 向左浮動
2.right 向右浮動
tips:
1.元素在浮動時會從原來的布局范圍脫離.在檔案中不在占位
2.浮動會一直到邊界/遇到其他浮動元素為止
3.清除浮動:
如果父級元素沒有設定高度,盒子會隨著內容延伸. 如果給里面的元素設定了浮動,它就會脫離原來的位置.這種情況下父級不會撐大
解決方式就是給父級元素設定溢位處理:
overflow: hidden;
定位篇(position)
通過定位來指定元素在網頁中出現的位置
理論上來說可以用定位實作一個網頁的所有布局 -- 不推薦.性能低
絕對定位(absolute): 讓元素基于父級,在一個指定的位置出現. 讓一個標簽,出現在距離父級上下左右XX的位置
- 絕對定位在移動后會脫離檔案流.在檔案中不再占位
- 絕對定位的參照物件是基于父級進行移動.如果沒有專門父級.默認父級為body(整個網頁)
相對定位(relative): 讓元素基于自身位置.在原來位置的基礎上進行移動.在原來位置里向上下左右移動XX
- 不會脫離檔案流.移動后不影響其他的元素.只是自身位置改變
- 不會改變元素的性質
- 比較適合小范圍的移動
定位的四個方向:
top: ↑
right: →
bottom: ↓
left: ←
單獨寫個定位樣式是沒用的.要結合四個方向來設定距離
父相子絕:
父元素為相對定位,子元素為絕對定位. 子元素會根據移動后的父元素來顯示.
z-index:
當元素產生上下堆疊的時候.通過z-index調整位置.值越大,越靠上
拓展補充:
記憶體:
運行記憶體. 程式在運行的時候都是放在記憶體里運行的.如果你要運行的軟體很多,那對記憶體的要求也就越大.
一般記憶體:8g 16g 32g
如果你的電腦8g不到. 要么升級加個記憶體條 / 或者換了吧
主流16g 起步8g
程式資料是保存在硬碟里. 要運行時會取出來放到記憶體里運行.再通過cpu去處理 --> 運行軟體速度 硬碟/記憶體/cpu
電腦產商:
一線: 聯想 戴爾 華碩 惠普 蘋果
二線: 小米 華為 宏碁 微星 機械革命
三線: 神舟 雷神 機械師 火影
一般情況下來說優先買一線(價格會稍微高點). 但是相對來說, 品控/品質性能/售后
主流機型:
聯想: 游戲本拯救者 輕薄本 小新 / thinkbook / thinkpad 個人推薦thinkbook (thinkbook14plus r7核顯版)
游戲本:
天選3 暗影精靈 暗影騎士 蛟龍 極光pro -->
購買平臺:
購買時機: 6.18 (雙11對于pc來說優惠不是特別大.清庫存)
平臺:
京東 -- 價格貴點 / 售后好點
pdd -- 價格便宜點 / 售后較差 / 翻車率較大
購買電腦后.請參考這個流程來.最好錄制開箱視頻.避免糾紛
https://www.bilibili.com/video/BV1QR4y1E7Br?share_source=copy_web
https://www.bilibili.com/video/BV1X64y1t7aM?share_source=copy_web
視頻博主推薦
嗨我是熊貓:https://space.bilibili.com/479927880
小石:https://space.bilibili.com/154058118
中正評測:https://space.bilibili.com/178047796
筆吧評測室:https://space.bilibili.com/367877
要買筆記本電腦:
https://mp.weixin.qq.com/s/Q7ZcKNRvUCuAhaAzk17rwg
關注公眾號搜索最新的
小黃鴨代碼除錯法
在你電腦旁邊放一只小黃鴨.遇到問題的時候,把問題和它說一遍.可能就會解決了.
旁觀者清.把你的代碼思路/流程和對方說了一遍 -- 自自然的把內容過了一遍 -- 可能就有了思路.問題解決了
你程式出現了個問題,bug/功能未實作 --> 提問
七零.我的程式要做XXX. 但是現在在準備XXX的時候. 一拍大腿-- 我想到是什么情況了.沒事了
阿里圖示
免費將圖示以字體的形式加載頁面
使用步驟：
1. 打開阿里圖示官網：https://www.iconfont.cn/
2. 注冊/登錄
3. 選擇需要的圖示加入購物車
4. 下載代碼
flex布局(彈性盒模型)
http://c.biancheng.net/css3/flex.html
flex是當前較為主流的布局方式 --> 它布局起來更方便,可以取代float --> float一開始不是用來布局用的,有一些小缺陷
用flex布局的元素稱為flex容器. 它里的內容稱為容器專案/flex專案 父級:容器 子級:專案
flex布局原理: 就是通過兩條軸.把網頁分割成一行行/一列列
flex主軸是從左往右. 副軸從上往下. 默認情況下是左右水平布局
flex的使用三要素:
1.主軸的方向(你是要左右水平布局 / 上下垂直布局)
2.主軸的對齊方式
3.副軸的對齊方式
flex的使用:
display: flex;
display樣式說明
設定主軸方向(決定左右/上下布局): flex-direction
row; # 行,默認屬性.從左往右
column; #列,從上往下
row-reverse; # 行反轉. 從右往左
column-reverse; #列反轉.從下往上
設定主軸對齊方式: justify-content
flex-start; # 默認,按照起點對齊.左/上
flex-end; # 終點對齊.右/下
space-around; # 均分布局
space-between; # 兩端對齊
設定副軸對齊方向: align-items
center; # 居中
flex-start; # 靠起點
flex-end; # 靠終點
設定換行(如果主軸裝不下內容): flex-wrap
no-wrap; # 縮放不換行
wrap; # 換行
flex專案屬性:
order: 專案的順序.數值越小,排序越靠前.默認為0
百度壁紙背景
over
拓展
qq訊息轟炸器 : 好玩.拓展用的.
需要用到一個叫pywin32的模塊
pip install pywin32 --default-timeout=100 -i https://pypi.tuna.tsinghua.edu.cn/simple
1.使用時.只能打開一個視窗
2.對特殊QQ不起作用(企業QQ)
3.該原理.對微信不起作用
盡量正常用pyc敲py代碼
編程源自于生活 -- 訊息轟炸器.先不要管代碼
正常情況下,我想給一個人發訊息應該怎么做:
1.找到要發送的人(聊天視窗)
2.準備發送的內容
3.發送 -- 回車
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/557151.html
標籤：Html/Css
下一篇：返回列表