- 博客(20)
- 收藏
- 关注
原创 前端学习第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
168
原创 前端学习第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
338
原创 前端学习第16天:媒体查询-响应式布局
第16天1.媒体查询 说明:媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和color(等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。1.1媒体查询操作方式 实际操作为:...
2019-08-15 20:26:47
284
原创 前端学习第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
231
原创 前端学习第14天:初识CSS3
第14天1.CSS3简介 如同人类的的进化一样,CSS3是 CSS2 的“进化”版本,在 CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。1.1CSS3现状- 浏览器支持成都差,需要添加私有前缀- 移动端支持优于`PC`端- 不断改进中- 应用相对广泛1.2如何对待- 坚持<font color="red">...
2019-08-15 20:24:08
156
原创 前端学习第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
203
原创 前端学习第12天:表单补充-网页添加图标
第12天1.表单标签及属性补充 表单作业:手机用户信息 表单组成: 表单域+表单控件1.1表单字段集 语法:<fieldset disabled="disabled"></fieldset> 说明: 相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套,...
2019-08-15 20:22:41
247
原创 前端学习第11天:高度自适应
第11天1.高度自适应 说明:网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应 元素宽度设置为100%。(块元素宽度默认为100%)width:100%;(2) 高度自适应 元素{height:auto;...
2019-08-15 20:20:26
402
原创 前端学习第10天:精灵图-滑动门
第10天1.精灵图1.1背景 网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS...
2019-08-15 20:19:53
234
原创 前端学习第9天:定位
第9天1.定位(position)1.1元素定位的属性边偏移top:相对于父元素上边线距离。bottom:相对于父元素下边线的距离。left:相对于父元素左边线的距离。right:相对于父元素右边线的距离。定位模式static:静态定位。(默认值)relative:相对定位,相对自身位置定位,原位置依然占有空间。absolute:绝对定位,相对父元素定位,脱离标准量...
2019-08-15 20:19:04
112
原创 前端学习第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
150
原创 前端学习第5天:盒模型
第五天1.盒模型1.1盒模型组成 margin :外边距 ~>盒子与盒子之间的距离 padding:内边距 ~>盒子边框到内容的距离1.2 相邻块外边距合并问题(margin塌陷) 上下两个相邻盒子分别使用 margin-bottom 和 margin-top 时,实际的外边距距离为较大的一个值,并不会相加。1.3嵌套块垂直外边距合并问题 对于两个嵌套关系的块...
2019-08-15 20:17:45
129
原创 前端学习第4天:css-文本样式
第四天1.文本样式属性1.1字体类型 font-family 语法:{ font-familu:字体1,字体2,字体3;}<!-- 当字体名是单个英文单词时,不加引号 -->{ font-family:SimSun;}<!-- 当字体名是中文时,需要加引号 -->{ font-family:"微软雅黑";}<!-- 当字体名中有空格时...
2019-08-15 20:17:06
195
原创 前端学习第3天:初识CSS
第三天:CSS1.Css 样式规则:选择器{ 声明-> 属性:属性值;}说明:- 每个 `CSS `样式由选择器和声明组成,声明由属性和属性值组成,且由分号(;)结束。- 一个属性有多个属性值得时候,属性值与属性值不分先后。2.样式表的简历和优先级### 2.1内部样式表: 语法:<style type = "style/css"> 样式<...
2019-08-14 13:46:12
297
原创 前端初学第2天
第二天重点web标准结构标准:结构用于对网页元素进行整理和分类,主要包括xml 和 xhtml 两个部分。样式标准:表现用于设置网页版的板式、颜色、大小等外观,主要指 css。行为标准:行为是指网页模型的定义及交互的编写,主要包括DOM 和ECMAScript 两个部分。...
2019-08-14 13:45:00
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人