一、ps常用工具

? ? 1.文件的打開 ?
? ? ? ?直接把圖片拖到ps中
? ? ? ?文件--打開--選擇要打開的圖片
? ? 2.文件的關閉
? ? ? ?直接點關閉按鈕
? ? 3.矩形選框工具
? ? ? ?快捷鍵： M
? ? 4.放大鏡工具
? ? ? ?按鈕鼠標左鍵，向里拖縮小，向外拖放大
? ? ? ? alt鍵，滾動鼠標滾輪
? ? 5.抓手工具
? ? ? ? 按鈕鼠標左鍵進行上下左右移動

? ? ? ? 按住空格鍵， 按鈕鼠標左鍵進行上下左右移動

? ? 6.文字工具
? ? ? ?測量文字屬性(字體、大小)

? ? 7.移動工具
? ? ? 組：選中該圖層所在的組
? ? ? 圖層：直接選中該圖層在哪里

? ? 8.參考線
? ? ? 把標尺顯示出來
? ? ? ? ?ctrl+r
? ? ?- 顯示|隱藏?
? ? ? ?ctrl + R 或 “視圖”菜單--“標尺”
? ? - 參考線
? ? - 在標尺上按住鼠標左鍵拖拽，拉出參考線
? ? - 水平參考線和垂直參考線的臨時切換，需要按下alt鍵
? ? - 刪除參考線
? ? - 在移動工具狀態下，將參考線拖回到標尺。
? ? - 在其他工具狀態下，按住Ctrl鍵臨時切換工具將參考線拖回到標尺
? ? - “視圖”菜單--“清除參考線”

二、圣杯布局

? ? ? ? 三列自適應
? ? ? ? 左右兩欄固定寬度
? ? ? ? 中間實現自適應

? ? ? ? 1.html結構--先中間再左右
? ? ? ? 2.顯示左中右

? ? ? ? 實現步驟
? ? ? ? 1.HTMl結構中--先中間內容后側邊欄
? ? ? ? 2.兩側寬度固定，中間寬度設置100%
? ? ? ? 3.中間內容和左右兩側分別加浮動 float：left；
? ? ? ? 4.將左側盒子拉到最左邊（margin-left：-100%），將右側盒子拉到最右邊（margin-left：-右側盒的寬度）
? ? ? ? 5.通過父盒將左右盒子的位置露出來（在父盒上設置padding：0 右側盒子寬度 0 左側盒子寬度）
? ? ? ? 6.分別還原左側盒和右側盒
? ? ? ? 將左側列移動至對應位置（position：relative：左側盒設置left屬性，值為-左側盒的寬度）
? ? ? ? 將右側列移動至對應位置（position：relative；左側盒設置left屬性，值為右側盒寬度；）
? ? ? ? 7.父盒容器設置最小寬度，防止中間列消失

三、雙飛翼布局
? ?
? ? 實現步驟
? ? ? ? 1.HTML結構中--先中間結構（主體結構中要有主體內容盒，主題內容盒里嵌套一個子盒）后側邊欄
? ? ? ? 2.兩側盒子固定寬度，中間主體結構盒寬度100%；
? ? ? ? 3.中間結構盒和左右兩側設置浮動 float：left；
? ? ? ? 4.將左側盒子拉到最左邊（margin-left：-100%），將右側盒子拉到最右邊（margin-left：右側盒寬度）
? ? ? ? 5.在中間主體結構盒的子盒上設置margin值將中間內容露出來（margin：0 右側邊寬度 0 左側邊寬度）

四、新增語義化標簽
? ? ? ?
? ? ?相對div無語義標簽來說，更加具有語義化

? ? ? ? 新增語義標簽：塊級標簽
? ? ? ? header：頭部
? ? ? ? ? ? 網頁的頭部，某個模塊的頭部
? ? ? ? footer：底部
? ? ? ? ? ? 網頁的底部，某個模塊的底部
? ? ? ? nav：導航
? ? ? ? ? ? 網頁中的文字導航、側邊欄導航、面包屑導航
? ? ? ? acticle：文章
? ? ? ? ? ?網頁中獨立的結構，用的不多，包著多個section
? ? ? ? section：章節
? ? ? ? ? ?相當于一個自然段
? ? ? ? ? ?類似于div，區別：
? ? ? ? ? ?一般一個section：一個section元素通常由內容及標題組成
? ? ? ? aside：側邊欄
? ? ? ? ? ? 網頁中側邊的廣告
? ? ? ? 語義:定義當前頁面或文章的附屬信息部分
? ? ? ? 典型應用：側邊欄、標注框、廣告等

五、新增其他標簽
? ? ? ? ?
? ? figure標簽
? ? ? ? figcaption標簽，在一個figure標簽中只能有一個figcaption標簽，一般用于圖文
? ? ? ? 塊級標簽，自帶外間距
? ? ? ? 用的不多 ?了解

? ? mark：標記標簽 行級標簽
? ? ? ? 高亮效果 吸引用戶眼球 默認自帶黃色背景色
? ? ? ? 可以修改樣式
? ? ? ? 掌握

? ? time：時間標簽
? ? ? ? ? ?行級標簽
? ? ? ? 用于很少，了解

總結

以上是生活随笔為你收集整理的9.14前端笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。