網易微專業 前端工程師 學習筆記

2021-08-03 23:59:14 字數 1147 閱讀 1933

1.1.1.1 工具、畫板、檢視

常用面板有:

取色器選項

資訊(f8)

圖層(f7)

歷史記錄

設定完常用面板後我們可以通過 「視窗 → 工作區 → 新建工作區」 來儲存

輔助試圖

在檢視下開啟:

1.1.2.1 測量、取色

獲取資訊

我們可以通過矩形選框工具 & 資訊面板來測量

顏色資訊 —-取色—→ color: #ffcc00;

我們可以通過拾色器&吸管工具來取色

1.1.3.1 切圖

切圖之前

哪些是需要切出來的?

內容性的(一般用在img標籤)

有些從後台直接拉取的不需要切圖,留乙個img標籤佔位就好

切出來的 存為那種型別?

png8

它倆都支援全透明,不同的是png24支援半透明(ie6不支援)而png8不支援半透明。

切圖png24

png8

可平鋪背景的圖

切片工具

適用於可以一刀切的活動頁

1.1.4.1 儲存

儲存所需內容

1.1.5.1 修改、維護

減小畫布到指定區域

jpg、png8、png24這些格式分別適合儲存什麼特點的?

1.1.6.1 優化與合併

使用背景圖**

sprite的使用:  

html:

點我css:

.u-btn{background:url(images/btn.png) no-repeat 0 -50px

!!! 最後的0表示順著橫座標移動的多少,-50px表示順著y軸移動的多少(向下) !!!

sprite拼圖的好處:

減少網路請求,提公升網頁載入速度

壓縮工具:

合併分類:

由於ie6不支援png24半透明

一般處理方法為存兩份圖,乙份png24的sprite.png,乙份png8的sprite_ie.png

網易微專業 前端工程師 學習筆記

1.3.2.6 常用 模版如右所示 注 元素或屬性 意義caption 表示 名稱 thead 表示 頂部 tbody 表示 主體 tfoot 表示 底注 tr表示行 th表示表頭 可以是橫著也可以是豎著 td正常單元格 rowspan 可以合併行 colspan 可以合併列 abc a b c 1...

前端工程師學習筆記

優達學城 第1天筆記 1.完整的html樹結構 2.解釋說明 文件的標題 瀏覽器標籤中顯示的文字 about me,將定義文件的標題,並在使用者訪問頁面時顯示在瀏覽器的標籤中 相關的 css 檔案 針對樣式 網頁使用的字符集 文字的編碼 關鍵字 作者和描述 通常對搜尋引擎優化 seo 起作用 是十分...

前端工程師學習路線

前端工程師學習路線 第一階段 html css html高階 css高階 div css布局 html css整站開發 js基礎 js基礎教程 js內建物件常用方法 常見dom樹操作大全 es dom bom 定時器和焦點圖 js基本特效 常見特效 tab 導航 頁面滾動 輪播圖 js製作幻燈片 淡...