自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Sarrykiss学术天地

90后小姑凉决定努力学前端!

  • 博客(25)
  • 收藏
  • 关注

原创 19-CSS3特效案例

、多组动画html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> div{ width: 200px; height: 200px; background-color: pink; animation: go 2s ;/*定义动画

2017-12-15 14:13:49 324

原创 18-CSS 2D改变 透视

定位(position)如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦!为什么要用定位?那么定位,最长运用的场景再那里呢? 来看几幅图片,你一定会有感悟!第一幅图, 小黄色

2017-12-13 18:10:49 363

原创 17-CSS3 高级技巧 精灵图 字体图标 滑动门

CSS高级技巧CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | move 移动 | text 文

2017-12-13 17:05:38 949

原创 17-CSS3 高级技巧 精灵图 滑动门

CSS高级技巧CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | mov

2017-12-13 15:09:00 251

原创 17-CSS3 高级技巧 精灵图 滑动门

CSS高级技巧CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | mov

2017-12-13 15:08:32 263

原创 17-CSS3 高级技巧 精灵图 滑动门

CSS高级技巧CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | mov

2017-12-13 15:07:31 768

原创 16-CSS3重点定位和display

定位(position)如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦!

2017-12-13 09:01:49 877

原创 15-PS模块处理

Photoshop图像处理专家PS 工具是我们使用频率比较高的软件之一, 我们学习PS目的不是为了设计海报做电商和UI的,而是要求:会简单的抠图会简单的修改PSD效果图熟练的切图能和网站美工美眉有共同话题。。。。。Photoshop基本使用PS界面组成:菜单栏、选项栏、工具栏、浮动面板(拖拽名称,可单独操作面板)、绘图窗口 ​ 窗口菜单,可显示隐藏所有面板工作区:(新建)调整浮动面

2017-12-12 10:30:59 360

原创 14-CSS3提高 重点部分 盒模型 浮动

CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出现样式冲突,则会按

2017-12-11 22:22:49 473

原创 14-CSS3提高 重点部分 盒模型 浮动和定位

CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情

2017-12-11 21:06:41 204

原创 14-CSS3提高 重点部分 盒模型 浮动和定位

CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情

2017-12-11 19:02:10 318

原创 14-CSS3提高 重点部分 盒模型 浮动和定位

CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情

2017-12-11 16:30:12 161

原创 14-CSS3提高 重点部分 盒模型 浮动和定位

CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情

2017-12-11 16:23:21 223

原创 13-CSS3提高

1 font-weight:字体加粗 取值可以是:normal bold bolder lighter 100-900的整百值 字体连写:font: font-style font-weight font-size/line-height font-family注意:必须按照上面的顺序来写 ,前面两项可以省略。size 和family必须要有。 字体的颜色就是:color 2 选择器:

2017-12-11 15:19:25 465

原创 12-JS初体验

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="css/text"> p{ color:red; } </style> <script type="text/javasc

2017-12-07 21:02:59 278

原创 11-CSS透明度 margin取值以及圣杯,滑动门, 三角

一补充:1 如果定位的盒子 没有宽度默认宽高为0 2如果给子盒子设置宽度是100%那么子盒子的宽度就和父盒子的宽度一样宽。 3 透明度 opacity(不透明) 取值:opacity:0.5; 在0到1之间的小数。 *这个属性ie6不支持,如果要在ie6中设置透明,要用: filter: Alpha(opacity=50);*二. margin补充:1 用法:

2017-12-07 13:10:00 327

原创 10-CSS综合练习

梅兰商贸(总站练习)1 设计师设计出来的图片 准备元素 2 确定网站的结构 meiBuy:将来凡是和这个网站相关的文件都放在一个meiBuy文件夹中。 css:所有的CSS文件都放在CSS文件夹中 js:所有的js文件都放在js文件夹中 index:网站的首页index.html 3决定页面的开发方式 1 从上到下依次编写:符合认知 2 从模块化的角度编写:符合有经验的开发

2017-12-06 22:39:39 215

原创 09-CSS定位补充 z-index,精灵图

一. 定位:定位中的z-index:用的比较少 作用:设置页面中元素的层级关系。 取值: 正整数。二标签的嵌套关系元素分为:行内元素 块级元素 标签之间是不能随意嵌套的,如果一定要嵌套就要满足下面几条。 *1 行内元素只能包含行内元素。 2 块级元素可以包含行内元素,部分块级元素。 3 p,h都不能包含块级元素。*精灵图什么是精灵图呢? 页面上较小

2017-12-06 11:23:41 399

原创 08-CSS的定位

问题:现在在页面上有两个盒子 其中第二个盒子将第一个盒子压住一半 作用:解决页面上盒子与盒子之间的层叠问题。 使用: position:absoult;//设置定位 top//定位以后距离浏览器上边框的距离是多少 left//定位以后距离浏览器左边框的距离是多少 html lang="en">head> meta charset="UTF-8"

2017-12-06 09:04:59 183

原创 07-CSS浮动初体验

问题:在页面上有两个盒子,一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示? 作用:解决一行中显示多个盒子的问题(并且这些盒子的位置是可控的)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ mar

2017-12-05 15:59:15 360

原创 06-CSS行高相关知识

行高定义: 应用:将行高设置等于容器的高度可以让文字垂直居中 原理:为什么行高等于容器的高度可以让文本垂直居中 文本中的各线条 补充: 行高的继承:行高是可以继承的。 行高的单位:取值是具体的数值就是像素值 也可以使用em. *1 em=16px; em指的是当前标签设定字体的大小,比如当前字体

2017-12-04 20:04:51 242

原创 06-作业练习盒子模型

表格的练习!有关padding与border很重要 第一个金牌练习 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>金牌top5</title> <style> *{ margin: 0px; padding: 0px; } t

2017-12-04 16:03:08 1525

原创 03-CSS认识

html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> p{ color:red; font-size: 15 } style>head>body> p>夏园园p> p>大傻子p> body>html>

2017-12-03 13:38:43 173

原创 02-Html学习

使用绝对路径和相对路径的使用格式<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><hea

2017-11-30 16:08:31 213

原创 01-初识HTML

首先html标记要记住h标签:把页面上的文字加上标题的语义。html> head> title> title> body> h1> h1> h2> h2> h3> h3> h4> h4> h5> h6> h6> h6>

2017-11-30 12:18:38 129

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除