web前端
_wjl_
这个作者很懒,什么都没留下…
展开
-
CSS 2D变形(CSS3)
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。变形转换 transform移动 translate(x, y)translate(50px,50px);使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。可以改变元素的位置...转载 2019-06-04 23:23:45 · 986 阅读 · 0 评论 -
CSS 定位(position) (三)
叠放次序(z-index)当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。比如: z-index: 2;注意:z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。如果取值相同,则根据书写顺序,后来居上。后面数字一定不能加单位。只有...转载 2019-06-01 12:37:44 · 319 阅读 · 0 评论 -
CSS 定位(position) (二)
子绝父相<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位练习</title> <style> div { width: 310px; height: 190px; border: 1px solid...转载 2019-06-01 10:21:52 · 341 阅读 · 1 评论 -
CSS-学成网
CSS-学成网黑马前端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学成网</title> <style> /* 样式 */ /* css初始化 */ * { /* 清除内外边距 */ margin:...转载 2019-05-28 22:41:52 · 1251 阅读 · 0 评论 -
CSS样式 (四)伪类选择器
伪类选择器伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}链接伪类选择器:link 未访问的链接:visited 已访问的链接:hover 鼠标移动到链接上:acti...原创 2019-05-18 18:43:04 · 391 阅读 · 0 评论 -
CSS 样式 (三) 选择器
选择器(重点)要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值...原创 2019-05-18 17:34:29 · 448 阅读 · 0 评论 -
CSS样式 (二)
CSS Unicode字体在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。方案一: 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文...原创 2019-05-18 15:57:45 · 183 阅读 · 0 评论 -
HTML 5 视频、音频播放
链接<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML视频</title></head><body> <h2>爱奇艺-奔跑吧</h2> <embed sr...原创 2019-05-18 11:33:32 · 923 阅读 · 0 评论 -
HTML input新增属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5新增占位符焦点多选属性</title></head><body> <!--自动获得焦点--> 搜索:<input t...原创 2019-05-18 10:10:30 · 1135 阅读 · 0 评论 -
HTML5新增input type类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5新增input表单</title></head><body> <fieldset> <legend>HT...原创 2019-05-18 09:26:38 · 1298 阅读 · 1 评论 -
html5新增常用标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html5 新增常用标签</title></head><body> <header>语义:定义页面的头部 页眉</header>...原创 2019-05-18 09:05:25 · 183 阅读 · 0 评论 -
CSS 学成网(二)
学成网小圆点 /* 小圆点模块 */ .circle { width: 180px; height: 22px; /* background-color: pink; */ position: absolute; bottom: 10px; left: 50%; margin-left: -90px; } .circle li { float: left;...转载 2019-06-01 17:44:14 · 6229 阅读 · 2 评论 -
CSS 3D变形
左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图rotateX()就是沿着 x 立体旋转.img { transition:all 0.5s ease 0s;}img...转载 2019-06-07 10:23:06 · 629 阅读 · 0 评论 -
CSS高级技巧
CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。cursor : default 小白 | pointer 小手 | move 移动 | text 文本...转载 2019-06-01 21:31:54 · 172 阅读 · 0 评论 -
CSS 过渡(CSS3)
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的...转载 2019-06-03 22:50:16 · 717 阅读 · 0 评论 -
CSS 布局案例
靶心<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>靶心的制作</title> <style> .round1 { width: 500px; height: 500px; background-col...转载 2019-06-08 13:16:57 · 272 阅读 · 0 评论 -
CSS 优雅降级和渐进增强
什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。类似 爬山,由低出往高处爬优雅降级 graceful degradation:一开始就构建完...转载 2019-06-08 10:20:37 · 374 阅读 · 0 评论 -
CSS BFC 块级格式化上下文
BFC(Block formatting context)直译为”块级格式化上下文”。元素的显示模式我们前面讲过 元素的显示模式 display。分为 块级元素 行内元素 行内块元素 ,其实,它还有很多其他显示模式。那些元素会具有BFC的条件不是所有的元素模式都能产生BFC,w3c 规范:display 属性为 block, list-item, table 的元素,会产生BFC....转载 2019-06-08 08:49:49 · 206 阅读 · 0 评论 -
CSS 定位(position)
定位(position)如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属性描...转载 2019-05-29 23:30:58 · 198 阅读 · 0 评论 -
CSS 伸缩布局(CSS3) (三)
3、justify-content调整主轴对齐(水平对齐)子盒子如何在父盒子里面水平对齐值描述白话文flex-start默认值。项目位于容器的开头。让子元素从父容器的开头开始排序但是盒子顺序不变flex-end项目位于容器的结尾。让子元素从父容器的后面开始排序但是盒子顺序不变center项目位于容器的中心。让子元素在父容器中间显示space-...原创 2019-06-07 19:16:07 · 205 阅读 · 0 评论 -
CSS 伸缩布局(CSS3) (二)
旅游网<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旅游网</title> <style> * { margin: 0; padding: 0; } ul { list-style: none;...转载 2019-06-07 16:06:07 · 147 阅读 · 0 评论 -
CSS 伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的方向:默认主轴从左向右,侧轴默认从上到下主轴和侧轴并不是固定不变的,通过flex-direction可以互换Flex布局的语法规范经过几年...原创 2019-06-07 15:06:25 · 980 阅读 · 0 评论 -
CSS 动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。语法格式:animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意@keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100%}an...转载 2019-06-07 12:17:45 · 194 阅读 · 0 评论 -
CSS 精灵技术 sprite
精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧...转载 2019-06-01 23:49:02 · 366 阅读 · 0 评论 -
html文档集
submit下....html:4s + Tab键<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" c...原创 2019-05-18 08:40:34 · 165 阅读 · 0 评论 -
HTML 表单
一、表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body> <!-- 表达的目的: 表单域: input表单控件 -->...原创 2019-05-18 08:30:15 · 88 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型 (重点)其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。盒子模型(Box Model) 所有的文档元素(标签)都会生成一个矩形...转载 2019-05-25 15:42:32 · 192 阅读 · 0 评论 -
CSS 三大特性
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出现样式冲...转载 2019-05-25 14:47:39 · 145 阅读 · 0 评论 -
sublime 的使用
ublime插件安装和使用插件安装的方式:方式一、直接安装 下载插件安装包,然后把安装解压到packages目录中,完成安装(菜单→首选项→浏览插件)方式二、Packagecontrol组件安装 Packagecontrol插件包管理器,通过该组件,方便我们管理我们的插件(浏览、安装、卸载)安装Packagecontrol 1.Ctrl+shift+P 命令...原创 2019-05-12 11:58:25 · 260 阅读 · 0 评论 -
CSS导航栏
文本修饰值描述none默认,定义标准的文本underline定义文本下的一条线。下划线也是我们链接自带的overline定义文本上的一条线line-through定义穿过文本的一条线(删除线)<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-05-25 11:03:39 · 104 阅读 · 0 评论 -
CSS背景
CSS 可以添加背景颜色和背景图片,以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写(复合属性)background:背景颜色...原创 2019-05-20 23:23:49 · 192 阅读 · 0 评论 -
CSS伪元素选择器
伪元素选择器(CSS3)E::first-letter文本的第一个单词或字(如中文、日文、 韩文等)E::first-line 文本第一行;E::selection 可改变选中文本的样式;E::before和E::after<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2019-05-20 07:16:10 · 542 阅读 · 0 评论 -
CSS属性选择器
属性选择器选取标签带有某些特殊属性的选择器**选择器**示例**含义E[attr]****存在attr属性即可E[attr=val]****属性值完全等于valE[attr*=val]****属性值里包含val字符并且在“任意”位置E[attr^=val]****属性值里包含val字符并且在“开始”位置E[attr$=val]***...原创 2019-05-19 23:37:38 · 1228 阅读 · 0 评论 -
CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2019-05-19 20:52:57 · 350 阅读 · 0 评论 -
标签显示模式(display)
标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<l...原创 2019-05-19 11:01:17 · 827 阅读 · 0 评论 -
引入CSS样式表
CSS可以写到那个位置? 是不是一定写到html文件里面呢?行内式(内联样式)内部样式表(内嵌式)外部样式表(外链式)导入式行内式(内联样式)是通过标签的style属性来设置元素的样式,其基本语法格式如下:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性,实际上任何H...原创 2019-05-19 10:04:45 · 1134 阅读 · 0 评论 -
Markdown 语法
1、标题# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题 2、列表- 文本1- 文本2- 文本3或者1. 文本12. 文本23. 文本33、图片和链接![图片名称](图片链接地址)4、引用> 大前端时代来临,便捷、简单、成本更低、更炫酷震撼、更佳客户体验的Web前端技术将...原创 2019-05-12 12:25:37 · 88 阅读 · 0 评论 -
WEB标准
Web 标准的好处1、让Web的发展前景更广阔2、内容能被更广泛的设备访问3、更容易被搜寻引擎搜索4、降低网站流量费用5、使网站更易于维护6、提高页面浏览速度Web 标准构成Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。结构标准:结构用...转载 2019-05-12 13:14:16 · 352 阅读 · 0 评论 -
HTML的认识
语法骨架格式<HTML> <head> <title></title> </head> <body> </body></HTML>1 HTML标签:作用所有HTML中标签的一个根节点。2 head标签:作用:用于存放 ...原创 2019-05-12 14:33:16 · 217 阅读 · 0 评论 -
Photoshop基本使用
PS界面组成:菜单栏、选项栏、工具栏、浮动面板(拖拽名称,可单独操作面板)、绘图窗口 窗口菜单,可显示隐藏所有面板工作区:(新建)1、调整浮动面板2、选项栏后方,新建工作区,命名。删除工作区:先选择其他工作区,再操作删除工作区。基本操作文件下拉菜单: 1、新建 新建文档 CTRL+N单位:像素 厘米 毫米屏幕显示: 单位 像素 72像素/英寸 RGB颜色模式印刷行业:...转载 2019-05-26 22:53:26 · 1789 阅读 · 0 评论