前端
文章平均质量分 86
茉莉发2233
一个小朋友
展开
-
03-CSS基本样式和选择器
CSS( Cascading Style Sheets )---- 元素的显示方式层叠样式表层叠:相同的样式的不同值作用到同一元素的时候,会有样式被覆盖.样式生效会有先后重要的顺序.根据样式优先级,如果优先级一样,后写会覆盖先写的.样式表:元素视觉表现的集合.例如我们看到的宽高背景颜色等等样式是依附HTML而存在的,如果没有标签,样式将毫无意义.最小影响法则当我们创建一个标签之...原创 2020-04-01 23:51:30 · 169 阅读 · 0 评论 -
02-基本标签
基本标签什么是标签?标签是由:小于号+中间字符+大于号组成的代码(注意:代码里所有字符都由英文字符组成)如里面的的冒号: 和分号 引号;建议你们在输入法属性设置里将中文输入时键入英文标点,习惯使用英文的半角标点符号.单标签 (单身标签)<br> <hr> <img> <input> <meta> <link&g...原创 2020-04-01 23:50:52 · 677 阅读 · 0 评论 -
01-初识前端
前端简介能够直接跟用户打交道的交互界面都可以称之为前端, 前端技术一般分为前端设计和前端开发前端设计就是ui设计部分,界面模板,一般可以理解为网站的视觉设计.前端开发则是网站的前台代码实现, 利用前端设计模块创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript/ajax以及衍生出来的各种技术、框架、解决方案,比如现在最新HTML5,CSS3以及SVG...原创 2020-04-01 23:50:21 · 6136 阅读 · 0 评论 -
06-显示样式
显示类型转换页面中的所有内容都可以看成块和文字我们去写一个盒子 div{ width: 100px; height: 100px; background-color: skyblue; } <div></div>/*这个盒子能设置宽度,高度和背景颜色. 这时我们去写上文字的时候会发现.*/ 我要忘了你的样子 <div&g...原创 2020-04-01 23:47:28 · 163 阅读 · 0 评论 -
05-行内盒模型
行内盒模型行内元素具有盒子模型吗行内元素同样具有盒子模型。行内元素的属性设置行内元素的上下内边距和外边距属性设置是无效的行内元素的左右外边距和内边距属性设置是有效的行内元素的padding-top、padding-bottom从显示的效果上是增加的但其实设置的是无效的。并不会对他周围的元素产生任何影响。字体大小(font-size)font-size实际上设置的是字体的高...原创 2020-04-01 23:45:16 · 268 阅读 · 0 评论 -
16-3d和盒阴影和遮罩
3d动画3d立体空间 css3的属性,让我们非常简单的开发3d的应用反观我们的2dtransform只是在平面上进行操作.电脑上游览器绘制的不是真正的3d,而是游览器模拟出来的3d,是3d空间在屏幕当中的投影我们的双眼是怎么看见立体空间的?1.双眼,物体呈现的画面左右不同2.大脑:近大远小(景深),绘画领域:透视法则如果我们能够模拟这样的效果,我们就可以欺骗我们的大脑,让大脑以为这是一个真实的3D空间,最终我们可以实现3D效果如何出现3d的盒子,一个普通的盒子旋转(rotate),原创 2020-06-17 19:43:55 · 448 阅读 · 0 评论 -
15-transform
变化样式tansform变形主体:页面中的元素(盒子),方式:旋转,平移,拉伸和压缩,倾斜.核心概念:使其物体发生形状和位置的变化过渡和2d变化的最本质的区别transition:描述了物体在变化过程中的方式.transform描述了物体形变的一个结果平移:translate(x,y)两个参数,第一个参数为X轴的平移,第二个参数Y轴平移只写一个参数默认就是x轴的平移前端平面直角坐标系 左上为顶点 水平向右x+ 竖直向下Y+.box{ width: 300px;原创 2020-06-17 19:42:07 · 394 阅读 · 0 评论 -
14-动画样式
过渡给岁月以文明,而不是给文明以岁月—出自三体,有了时间才会产生变化.我们玩游戏.例如英雄联盟的时候你无论是传送还是释放技能是不是也需要一个施法时间.过渡是一种动画,可以从一种状态过渡到另一种状态.比如按钮从常规状态变成被按下的状态,正常情况下,这种变化是瞬间完成的.至少是游览器会尽快的完成这种状态变换.在点击或者按下按钮的时候.游览器会重新计算页面新外观,在几毫秒之内进行重绘.而我们在应用过渡的时候,我们要告诉游览器完成各种变换需要多长时间.然后游览器再计算在此期间屏幕上该显示哪些过渡原创 2020-06-17 19:41:10 · 736 阅读 · 1 评论 -
13-高级选择器和伪元素
伪类:hover :focus :foucswithin我们给任何选择器加上冒号就叫做我们的伪类,这种伪类的存在的意义是什么?他会凭空去多出来元素或者选择其他的元素?其实是不会..box{ width: 100px; height:100px; background-color: black; } .box:hover{ background-color: green; /*打开控制台,页面的结构不会发生改变,元素也不会发生增加或者减少.*/ } <div原创 2020-05-09 11:35:45 · 319 阅读 · 0 评论 -
12-表格
表格表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些很多行列组成的东西,就叫表格.表格是标签来定义的。而标签中的行就是标签,而列就是标签,必须先定义行才能定义列。因为html中,每一列是在一行当中的。表格:在15年前的时候是非常火爆的页面所有的内容都是用表格制作的:排版布局,天生有优势,随着开发发展被淘汰了,现在网站几乎没有用表格开发目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用tab原创 2020-05-09 11:34:40 · 322 阅读 · 0 评论 -
11-表单
表单大家有没有街上去填写过调查问卷.这些各式各样的调查问卷的问题就想网页上一个个的表单元素.这些问题都是为了收集你的个人信息,或者为了各类面试考试等等.这些填写自己的个人信息,任何情况,前端收集用户信息会用到表单表单----单词MDN—前端API文档 w3c非前端了解前端知识我们网页用户输入内容,填写信息,填写收货地址,或是抢购按钮等都是表单.这些都是很有价值的活动但很多网站设计不好主要是因为表单的控件众多,不好设计和应用样式.表单作用 :数据采集;在form表单里填写表单,发原创 2020-05-09 11:33:22 · 260 阅读 · 0 评论 -
10-定位
定位(确定元素的位置)相对定位(position:relative)我们以前学过几种布局方式浮动 从左往右依次排列正常布局 从上往下依次排display:inline-block 看上去水平排列,本质上还是文本,有解析空格和垂直对齐的问题这些能解决掉布局的很多问题,但是对于某些特殊情况 ul{ border: 2px solid pink; } li{ width: 100px; height: 100px; background-color: s原创 2020-05-09 11:31:45 · 354 阅读 · 0 评论 -
09-浮动
浮动普通流布局从上到下,从左往右;块级盒子独占一行 ul>li{ width: 100px; height: 100px; background-color: skyblue; margin: 10px 0; } <ul> <li>1</li> <li>2</li> <li>3</li> </ul>/*这就是普通流的布局,从上往下依次排列,普通流的流就像一原创 2020-05-09 11:29:45 · 146 阅读 · 0 评论 -
08-圆角渐变
圆角样式长时间以来,圆角都是开发者最期盼的效果,很多网页设计的老手都投入几十甚至上百个小时,就是为了通过图片来实现可以可以缩放,同时由兼容各种游览器的圆角效果,现在并不用考虑那么多兼容问题也就ie8及ie8以前和opera mini不支持.况且圆角也只是锦上添花的效果,并没有对可用性构成实际影响,所以大家使用标准属性即可.网页的排版,布局内容设置都是矩形,我们圆角只是隐藏了四周的角而已.不...原创 2020-04-07 01:41:23 · 984 阅读 · 0 评论 -
07-背景样式
背景颜色–漂亮的盒子背景顾名思义就是背后的景物.英文就为background.我们的家里的墙壁刚装修时候是不是白色的墙壁.我们的块级盒子例如div刚创建的时候就相当于一面白色透明墙壁.如果想让这个盒子的背景更加的美观.那我们当一个装修工人,让它背景更加更加丰富把.颜色表示方法关键字表示法RGB函数表示法RGB是光学三原色,R为红色,G为绿色,B是蓝色,我们小时候玩调色盘记不...原创 2020-04-07 01:39:57 · 201 阅读 · 0 评论 -
04-盒模型
盒模型要在文档首部加了doctype声明,即使用了标准盒模型,而不加,则会由浏览器自己决定内容区(width和height)width和height属性用来设置内容区域的宽和高,也就是元素可渲染内容区的宽高.height属性在默认情况下由内容撑开,也就是随内容多少的变化而变化。内容默认左上角原点开始排列.width:500px; 默认宽度是父级宽度100%height:500px;...原创 2020-04-01 23:44:31 · 205 阅读 · 0 评论