![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
蓝湛呀
这个作者很懒,什么都没留下…
展开
-
前端学习第18天:CSS3-3D-动画
第18天1. 3D CSS3 中的 3D 变换主要包括以下几种功能函数:3D位移:CSS3 中的 3D 位移主要包括translateZ()和 translate3d()两个功能函数;3D旋转:CSS3 中的 3D 旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d(1,1,0,4deg) 四个功能函数;4个参数,前三个,对应x,y,z 轴,是标示...原创 2019-08-15 20:32:04 · 161 阅读 · 0 评论 -
前端学习第17天:C3-渐变-过渡-2D转换
第17天1.CSS渐变 说明:渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。1.1线性渐变(linear-gradient) 说明:线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从红色渐变到蓝色。to left、top right、to bottom、to topdiv { bac...原创 2019-08-15 20:30:34 · 336 阅读 · 0 评论 -
前端学习第16天:媒体查询-响应式布局
第16天1.媒体查询 说明:媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和color(等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。1.1媒体查询操作方式 实际操作为:...原创 2019-08-15 20:26:47 · 279 阅读 · 0 评论 -
前端学习第15天:背景属性-弹性盒子-rem,em,v,vh单位
第十五天1.背景属性1.1背景原点(background-origin) 语法:div{ /* 以边框为原点 */ background-origin:border-box; /* 以padding为原点 */ background-origin:padding-box; /* 以内容边缘为原点 */ background-origin:content...原创 2019-08-15 20:25:51 · 229 阅读 · 0 评论 -
前端学习第14天:初识CSS3
第14天1.CSS3简介 如同人类的的进化一样,CSS3是 CSS2 的“进化”版本,在 CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。1.1CSS3现状- 浏览器支持成都差,需要添加私有前缀- 移动端支持优于`PC`端- 不断改进中- 应用相对广泛1.2如何对待- 坚持<font color="red">...原创 2019-08-15 20:24:08 · 154 阅读 · 0 评论 -
前端学习第13天:初识H5
第13天1.H5新的文档声明1.1 H4的文档声明1.2 H5的文档声明 怪异盒模型:DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。 当不对doctype进行定义时,会触发怪异模式。在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)在怪异模式下,一个块的总宽度=...原创 2019-08-15 20:23:22 · 200 阅读 · 0 评论 -
前端学习第12天:表单补充-网页添加图标
第12天1.表单标签及属性补充 表单作业:手机用户信息 表单组成: 表单域+表单控件1.1表单字段集 语法:<fieldset disabled="disabled"></fieldset> 说明: 相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套,...原创 2019-08-15 20:22:41 · 245 阅读 · 0 评论 -
前端学习第11天:高度自适应
第11天1.高度自适应 说明:网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应 元素宽度设置为100%。(块元素宽度默认为100%)width:100%;(2) 高度自适应 元素{height:auto;...原创 2019-08-15 20:20:26 · 398 阅读 · 0 评论 -
前端学习第10天:精灵图-滑动门
第10天1.精灵图1.1背景 网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS...原创 2019-08-15 20:19:53 · 229 阅读 · 0 评论 -
前端学习第9天:定位
第9天1.定位(position)1.1元素定位的属性边偏移top:相对于父元素上边线距离。bottom:相对于父元素下边线的距离。left:相对于父元素左边线的距离。right:相对于父元素右边线的距离。定位模式static:静态定位。(默认值)relative:相对定位,相对自身位置定位,原位置依然占有空间。absolute:绝对定位,相对父元素定位,脱离标准量...原创 2019-08-15 20:19:04 · 107 阅读 · 0 评论 -
前端学习第8天:元素类型
第八天1.元素类型1.1 块状元素(block element)独占一行,显示为矩形区域,自上而下排列,可自定义宽高。常见块状元素: div ,dl ,dt , dd, ol , ul , fieldset ,(h1-h6), p , for1.2行内元素/ 内联元素(inline element)没有固定的形状,不能自定义宽高,其宽度和高度由内容撑开,可水平逐个排列常见行内元...原创 2019-08-15 20:18:34 · 144 阅读 · 0 评论 -
前端学习第5天:盒模型
第五天1.盒模型1.1盒模型组成 margin :外边距 ~>盒子与盒子之间的距离 padding:内边距 ~>盒子边框到内容的距离1.2 相邻块外边距合并问题(margin塌陷) 上下两个相邻盒子分别使用 margin-bottom 和 margin-top 时,实际的外边距距离为较大的一个值,并不会相加。1.3嵌套块垂直外边距合并问题 对于两个嵌套关系的块...原创 2019-08-15 20:17:45 · 123 阅读 · 0 评论 -
前端学习第4天:css-文本样式
第四天1.文本样式属性1.1字体类型 font-family 语法:{ font-familu:字体1,字体2,字体3;}<!-- 当字体名是单个英文单词时,不加引号 -->{ font-family:SimSun;}<!-- 当字体名是中文时,需要加引号 -->{ font-family:"微软雅黑";}<!-- 当字体名中有空格时...原创 2019-08-15 20:17:06 · 190 阅读 · 0 评论 -
前端初学第2天
第二天重点web标准结构标准:结构用于对网页元素进行整理和分类,主要包括xml 和 xhtml 两个部分。样式标准:表现用于设置网页版的板式、颜色、大小等外观,主要指 css。行为标准:行为是指网页模型的定义及交互的编写,主要包括DOM 和ECMAScript 两个部分。...原创 2019-08-14 13:45:00 · 163 阅读 · 0 评论