整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
戶在制作應用程序時，為了使按鈕更加美觀，可以自已制作按鈕，本實例將制作一個半透明式的水晶按鈕。
為了實現自定義水晶按鈕控件，首先要創建一個用戶控件，然后在該控件中設置相關屬性，如文本、控件的圓角度數、顏色等，在Paint事件中根據控件的大小繪制一個半透明的圓角矩形，然后用控件的MouseDown和MouseUp事件控制按鈕的單擊和松開效果，此效果是在Paint事件中實現的。
主要用到LinearGradientBrush類和GraphicsPath類對自定義按鈕的透明度和形狀進行繪制。
（1）LinearGradientBrush類
該類使用線性漸變封裝Brush（畫刷），也就是封裝雙色漸變和自定義多色漸變。
所有漸變都是由矩形的寬度或兩個點指定的直線繪制的。
默認情況下，雙色漸變是沿指定直線從起始色到結束色的均勻水平線性混合。
使用Blend類、SetSigmaBellShape方法或SetBlendTriangularShape方法自定義混合圖案。通過在構造函數中指定LinearGradientMode枚舉或角度自定義漸變的方向。
LinearGradientMode枚舉的命名空間是System.Drawing.Drawing2D。
下面是LinearGradientBrush的構造函數，主要是根據一個矩形、起始顏色和結束顏色以及方向模式，創建LinearGradientBrush類的新實例，其語法格式如下：
public LinearGradientBrush ( RectangleF rect, Color color1, Color color2, LinearGradientMode linearGradientMode)
l rect：一個RectangleF結構，它指定線性漸變的界限。
l color1：表示漸變起始色的Color結構。
l color2：表示漸變結束色的Color結構。
l linearGradientMode：一個LinearGradientMode枚舉元素，它指定漸變方向。漸變方向決定漸變的起點和終點。LinearGradientMode的枚舉成員及說明如表1所示。
LinearGradientMode的枚舉成員及說明：
成員 | 說 明 |
BackwardDiagonal | 指定從右上到左下的漸變 |
ForwardDiagonal | 指定從左上到右下的漸變 |
Horizontal | 指定從左到右的漸變 |
Vertical | 指定從上到下的漸變 |
者：櫻桃小丸子兒
來源：https://www.jianshu.com/p/2f7eb1ad7174
很早之前就在看web前端面試題，一直想總結一個比較全面又詳細的面試題庫，現在總結了一些，分享給大家，以后還會持續更新，有些題目有多種答案，本文只給出其中一種，哪里有問題的歡迎指出。
Html&CSS
1、談談你對web標準的理解
web標準的理解
2、列舉html中至少三個實體
&、  、<、>、®、©
詳細請看w3schoolHTML實體符號參考手冊
w3schoolHTML實體符號參考手冊
3、cellpadding與cellspacing有何區別？
cellpadding：代表單元格邊框到內容之間的距離（留白）
cellspacing：cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字，表示單元格間隙所占的像素點數。
4、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有哪些？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器( *)
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li: nth - child）
**可繼承的樣式： **
font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：
border padding margin width height
優先級
優先級就近原則，同權重情況下樣式定義最近者為準，載入樣式以最后載入的定位為準;
優先級為:
!important > id > class > tag
important 比 內聯優先級高
CSS3新增偽類舉例
p:first-of-type 選擇屬于其父元素的首個<p> 元素的每個<p>元素。
p:last-of-type 選擇屬于其父元素的最后 <p>元素的每個<p>元素。
p:only-of-type 選擇屬于其父元素唯一的<p>元素的每個<p>元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個<p>元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個<p>元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
5、display與visibility有何異同？
display可以有很多值，visibility只有兩個常用值：visible、hidden。
當display為none、visibility為hidden時都會隱藏元素。但display會隱藏掉元素空間，visibility會保留元素空間。
6、怎么在網頁中實現絕對定位？
absolute
絕對定位與相對定位
7、table-layout、border-collapse有何用途？
①table-layout：設置表格是否自動調整寬高
②border-collapse：表格與單元格及單元格間的邊框是否融合在一起。
8、簡述盒模型
簡述盒模型
9、鏈接標記target屬性的_top、_parent、_blank、main、left、top各有何用處?
鏈接標記target與Dom，Bom
10、你對瀏覽器兼容怎么看？通常你都做哪些處理？
瀏覽器的兼容性
11、get和post的區別？
GET：一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用于修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
①無法使用緩存文件（更新服務器上的文件或數據庫）向服務器發送大量數據（POST 沒有數據量限制）。
②發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠。
12、xhtml和html有什么區別
①HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XML的置標語言
②最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
13、行內元素有哪些?塊級元素有哪些?空(void)元素有那些？
行內元素和塊級元素的區別是什么？行內塊元素的兼容性使用？（IE8 以下）
塊級元素：div p h1 h2 h3 h4 form ul ol dl dt dd
行內元素: a b br i span input select image strong（強調的語氣）
常見空元素：
<br>/<hr>/<img>/<input>/<link>/<meta>
不常見空元素：
<area>/<base>/<col>/<command>/<embed>/<keygen>/<param>/<source>/<track>/<wbr>
行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。
塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。
兼容性：
display:inline-block;*display:inline;*zoom:1;
14、CSS引入的方式有哪些? link和@import的區別是?
CSS引入的方式包括內聯 內嵌 外鏈 導入
link和@import的區別是 ：
①link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS；
②頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
③import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題；
④后者優先級更高
15、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?介紹一下你對瀏覽器內核的理解
Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opera(blink)
對內核的理解：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
①渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
②JS引擎：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。
16、解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。
適用于以下情況：
①靜態圖片，不隨用戶信息的變化而變化
②小圖片，圖片容量比較小
③加載量比較大
17、清除浮動的幾種方式，各自的優缺點
（1）父級div定義height。
（2）結尾處加空div標簽clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標簽clear:both。
比較好的是第3種方式，好多網站都這么用。
18、Doctype作用？標準模式與兼容模式各有什么區別?
①<!DOCTYPE>告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
②標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
注意點：
HTML5 只需要寫<!DOCTYPEHTML>不需要對DTD進行引用，因為HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。
19、iframe有哪些缺點？
①iframe會阻塞主頁面的Onload事件，搜索引擎的檢索程序無法解讀這種頁面，不利于SEO；
②iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
20、如何實現瀏覽器內多個標簽頁之間的通信?
①通過WebSocket、SharedWorker來實現；
②也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文（另一個標簽頁）里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
21、如何在頁面上實現一個圓形的可點擊區域？
①map+area或者svg
②border-radius
③純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
22、CSS3有哪些新特性？
① CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px）；
② 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）；
③ transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉,縮放,定位,傾斜
④ 增加了更多的CSS選擇器 多背景 rgba
CSS3新增屬性
eb前端是當下互聯網時代下最流行的技術之一，在大部分的軟件產品的研發中，Web前端扮演著非常重要的角色。幾乎所有的用戶終端產品與視覺效果和交互有關的部分，都屬于前端開發工程師所要涉及的專業領域。
從具體的角度上看，Web前端是利用HTML、CSS、JavaScript等專業的技能和相關的工具，將產品的UI設計稿實現成網站產品，涵蓋用戶PC端、移動端等網頁，進而去處理視覺和交互的相關問題。
因此，Web前端一套完整的教程中，所涉及的內容也非常豐富，比如：HTML基本結構與屬性、web前端三大核心技術、表格標簽、CSS語法格式等。很多人想在網上學習Web前端技術，網上也確實有很多相關的視頻，但是大多數教程非常零碎，而且內容大多數都是淺嘗輒止，導致很多初學者只能停留在基礎知識的了解上，難以深入學習，甚至涉及不到具體項目的操作指導。
針對以上提到的初學者存在種種的困惑，千鋒廣州老師整理一套豐富的教程資料。教程中采用“視頻+資料+源碼”相結合，打破傳統的理論式教學，形象生動的講解神秘的代碼原理，并且結合企業級項目實操，對核心技術進行鞏固，本套資料中的實戰有：
由千鋒名師操刀，瘋狂輸出237集的這套完整視頻教程，通過視頻、源碼、課件、筆記引導教學，毫無保留的授之以漁，讓你真正系統的學到真正的前端技術。
2019Web前端從入門到精通（HTML+CSS全套）課程介紹：
第001集 HTML、CSS系列之導學
第002集 什么是HTML和CSS
第003集 宇宙第一編輯器VS Code
第004集 chrome瀏覽器
第005集 深入了解網站開發
第006集 web前端三大核心技術
第007集 HTML基本結構與屬性
第008集 HTML初始代碼
第009集.HTML中的注釋
第010集 HTML語義化
第011集 標題與段落
第012集 文本修飾標簽
第013集 圖片標簽與圖片屬性
第014集 引入文件的地址路徑
第015集 跳轉鏈接
第016集 跳轉錨點
第017集 特殊符號
第018集 無序列表
第019集 有序列表
第020集 定義列表
第021集 嵌套列表
第022集 表格標簽
第023集 表格屬性
第024集 表單input標簽
第025集 表單相關標簽
第026集 表格表單組合實例
第027集 div與span
第028集 CSS語法格式
第029集 內聯樣式與內部樣式
第030集 外部樣式及兩種寫法
第031集 CSS顏色表示法
第032集 背景樣式
第033集 背景實現視覺差效果
第034集 邊框樣式
第035集 邊框實現三角形
第036集 family字體類型
第037集 字體大小粗細樣式
第038集 文本修飾與文本大小寫
第039集 文本縮進與文本對齊
第040集 文本的行高
第041集 文本間距與英文折行
第042集 文本與段落實現個人簡介
第043集 css復合樣式
第044集 ID選擇器及注意事項
第045集 CLASS選擇器及注意事項
第046集 標簽群組通配等選擇器
第047集 層次選擇器
第048集 屬性選擇器
第049集 hover等偽類選擇器
第050集 after等偽類選擇器
第051集 結構偽類選擇器
第052集 css樣式的繼承
第053集 、單一樣式的優先級
第054集 important群組等優先級
第055集 層次的優先級
第056集 css盒子模型
第057集 box-sizing改變盒模型
第058集 盒模型之margin疊加問題
第059集 盒模型之margin傳遞問題
第060集 css盒子模型之擴展
第061集 盒子模型的嵌套練習
第062集 按類型劃分標簽
第063集 按內容劃分標簽
第064集 按顯示劃分標簽
第065集 display顯示框類型
第066集 標簽嵌套規范
第067集 overflow溢出隱藏
第068集 透明度與手勢
第069集 最大最小寬高
第070集 css默認樣式
第071集 css重置樣式
第072集 PS基本操作與圖片格式
第073集 PNG等圖片切圖流程
第074集 切圖小練習之新浪趣圖（上）
第075集 切圖小練習之新浪趣圖（下）
第076集 PSD源文件切圖流程
第077集 企業中的切圖流程
第078集 float浮動概念及原理
第079集 float注意點整理
第080集 清除float浮動（上）
第081集 清除float浮動（下）
第082集 float制作頁面小結構（上）
第083集 float制作頁面小結構（下）
第084集 relative相對定位
第085集 absolute絕對定位
第086集 fixed和sticky及zIndex
第087集 定位實現下拉菜單
第088集 定位實現居中和裝飾點
第089集 css添加省略號
第090集 css精靈及好處
第091集 css圓角設置
第092集 PC端企業類型整頁制作（1）
第093集 PC端企業類型整頁制作（2）
第094集 PC端企業類型整頁制作（3）
第095集 PC端企業類型整頁制作（4）
第096集 PC端企業類型整頁制作（5）
第097集 PC端企業類型整頁制作（6）
第098集 PC端企業類型整頁制作（7）
第099集 PC端企業類型整頁制作（8）
第100集 PC端游戲類型整頁制作（1）
第101集 PC端游戲類型整頁制作（2）
第102集 PC端游戲類型整頁制作（3）
第103集 PC端游戲類型整頁制作（4）
第104集 PC端游戲類型整頁制作（5）
第105集 PC端游戲類型整頁制作（6）
第106集 PC端游戲類型整頁制作（7）
第107集 PC端游戲類型整頁制作（8）
第108集 PC端游戲類型整頁制作（9）
第109集 PC端游戲類型整頁制作（10）
第110集 HTML和CSS發展歷史
第111集 HTML與XHTML的區別
第112集 b標簽與i標簽
第113集 引用標簽基本操作
第114集 iframe嵌套頁面
第115集 br標簽與wbr標簽
第116集 pre標簽與code標簽
第117集 map標簽與area標簽
第118集 embed標簽與object標簽
第119集 video標簽與audio標簽
第120集 文字注解與文字方法
第121集 link標簽擴展學習
第122集 meta標簽擴展學習
第123集 HTML5新語義化標簽（1）
第124 HTML5新語義化標簽（2）
第125集 HTML5新語義化標簽（3）
第126集 表格擴展學習
第127 表單擴展之美化控件
第128集 表單擴展之新input控件
第129集 表單擴展之新屬性
第130集 表單擴展之數據傳輸
第131集 表單擴展之標簽
第132集 BFC規范（上）
第133集 BFC規范（下）
第134集 瀏覽器內核與瀏覽器前綴
第135集 transition過渡基礎語法
第136集 transition實例之過渡導航
第137集 transform位移與縮放
第138集 transform旋轉與斜切
第139集 transform復合寫法與注意點
第140集 斜切的導航
第141集 _變形的列表
第142集_animation動畫基礎語法
第143集_劃入劃出的小圖標
第144集_loading加載動畫效果
第145集_animation動畫擴展語法
第146集_animate.css動畫庫
第147集_3D基本語法及成像原理
第148集_實現3D立方體
第149集_3D相關語法及擴展學習
第150集_3D效果之旋轉木馬
第151集_3D效果之翻轉圖片
第152集_背景尺寸_位置_裁切等
第153集_線性漸變與徑向漸變
第154集_漸變的加載進度條
第155集_@font-face字體圖標
第156集_iconfont矢量圖標庫
第157集_自定義字體圖標
第158集_text-shadow文字陰影
第159集_box-shadow盒子陰影
第160集_小米官網盒子陰影效果
第161集_mask遮罩效果
第162集_box-reflect倒影與scale負值
第163集_blur模糊與calc計算
第164集_column分欄布局
第165集_偽元素概念與意義
第166集_hack概念與CSS屬性前綴法
第167集_選擇器前綴法與IE條件注釋法
第168集_IE低版本常見BUG
第169集_漸進增強與優雅降級
第170集_布局擴展之等高布局
第171集_布局擴展之雙飛翼布局
第172集_布局擴展之圣杯布局
第173集_PC端管理后臺整頁制作（1）
第174集_PC端管理后臺整頁制作（2）
第175集_PC端管理后臺整頁制作（3）
第176集_PC端管理后臺整頁制作（4）
第177集_PC端管理后臺整頁制作（5）
第178集_PC端管理后臺整頁制作（6）
第179集_PC端管理后臺整頁制作（7）
第180集_PC端管理后臺整頁制作（8）
第181集_PC端管理后臺整頁制作（9）
第182集_PC端管理后臺整頁制作（10）
第183集_PC端管理后臺整頁制作（11）
第184集_flex彈性布局（1）
第185集_flex彈性布局（2）
第186集_flex彈性布局（3）
第187集_flex彈性布局（4）
第188集_flex彈性布局（5）
第189集_flex彈性布局（6）
第190集_flex彈性布局（7）
第191集_grid網格布局（1）
第192集_grid網格布局（2）
第193集_grid網格布局（3）
第194集_grid網格布局（4）
第195集_grid網格布局（5）
第196集_grid網格布局（6）
第197集_grid網格布局（7）
第198集_移動端之viewport視口
第199集_移動端流式布局整頁制作（1）
第200集_移動端流式布局整頁制作（2）
第201集_移動端流式布局整頁制作（3）
第202集_移動端流式布局整頁制作（4）
第203集_rem單位及rem布局原理
第204集_js方式進行動態fontsize設置
第205集_vw單位進行動態fontsize設置
第206集_移動端rem布局實戰流程
第207集_響應式布局之媒體查詢語法
第208集_響應式布局之兩種操作模式
第209集_響應式布局之實戰導航菜單
第210集_bootstrap4之containers
第211集_bootstrap4之grid（上）
第212集_bootstrap4之grid（下）
第213集_bootstrap4之content
第214集_bootstrap4之components
第215集_bootstrap4之utilities
第216集_bootstrap個人博客整頁制作（1）
第217集_bootstrap個人博客整頁制作（2）
第218集_bootstrap個人博客整頁制作（3）
第219集_bootstrap個人博客整頁制作（4）
第220集_Sass與Less介紹和環境搭建
第221集_Sass與Less注釋_變量_插值_作用域
第222集_Sass與Less嵌套之選擇器_偽類_屬性
第223集_Sass與Less運算之單位_轉義_顏色
第224集_Sass與Less函數之內置_自定義
第225集_Sass與Less混入_命名空間_繼承
第226集_Sass與Less合并_媒體查詢
第227集_Sass與Less條件_循環_導入
第228集_PostCSS簡介與安裝
第229集_PostCSS插件使用（上）
第230集_PostCSS插件使用（下）
第231集_CSS架構與文件組織
第232集_CSS新特性之自定義屬性
第233集_CSS新特性之shapes
第234集_CSS新特性之scrollbar
第235集_CSS新特性之scrollsnap
第236集_CSS與JS結合之鐘表
第237集_CSS與JS結合之折疊菜單
送大家【2019Web前端從入門到精通（HTML+CSS全套）】用于參考，私信回復【前端全套】，即可獲得哦！
如果覺得有用，轉發+評論+收藏三連支持鴨！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
