户在制作应用程序时,为了使按钮更加美观,可以自已制作按钮,本实例将制作一个半透明式的水晶按钮。
为了实现自定义水晶按钮控件,首先要创建一个用户控件,然后在该控件中设置相关属性,如文本、控件的圆角度数、颜色等,在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小时内与您取得联系。