第一阶段基础学习
caicai16
实践是检验真理的唯一标准
展开
-
Emment语法的使用一思维导图
原创 2020-04-19 16:00:21 · 202 阅读 · 0 评论 -
补充:4月1号一html新增的语义化标签的使用实例
功能性语义化标签hgroup标签:一个标题和一个子标题,或者标语的组合**PS:可使用的浏览器IE 9、Firefox、Opera、Chrome 和 Safari 支持 标签。注意:IE 8 或更早版本的 IE 浏览器不支持 标签使用在对网页或区段(section)的标题进行组合效果图如下figure标签:用户对元素进行组合,一般用于图片或视频 PS: 可使用的浏览器...原创 2020-04-16 18:48:02 · 147 阅读 · 0 评论 -
4月5号一制作网站时的心得体会
注意点1.head:引入公共样式,新建css文件写入:common.css2.书写公共样式:< rel=“icon” >把图标插入网页标题< rel=“shortcut icon” >在收藏夹里显示图标,提高用户体验< type= “image/x-icon” 引入图片类型>(1)link rel=" icon" href=“favicon. i...原创 2020-04-05 23:38:17 · 107 阅读 · 0 评论 -
4月2号一温故而知新
补充知识点:锚点链接:a标签和id选择器的使用(使用在右侧导航栏)2.高仿轮播3.复习知识点:盲点:样式优先级:层级由低到高:通配符(关系选择器权重为0)<标签选择器(伪元素权重为1)<伪类选择器(类名,属性选择器权重为10)<id选择器权重为100<行内元素权重1000<!important属性选择器:伪类选择器之属性选择器行内元素:不占一行,不可以设置宽高,上下边距以及aut...原创 2020-04-03 10:31:00 · 93 阅读 · 0 评论 -
4月1号一响应式布局的学习心得
新知识:响应试布局:一个网站可以兼容多个终端(bootstrap)(1)优点:1)面对不同的分辨率时,设备的灵活性较强2)能够快捷的解决在多个设备上适应的问题3)使用在中小型网站(2)缺点:1)为了兼容多个设备,工作量较大,效率不高2)代码冗余,有很多隐藏无意义的元素,加载速率不会很快(3)原理:通过css新增的媒体查询,同过匹配不同宽度达到不同的显示效果(4)媒体查询:能够检...原创 2020-04-01 22:07:46 · 330 阅读 · 0 评论 -
3月30号一弹性盒模型的使用心得
学习测试感悟:在audio中的autoplay自动播放。但谷歌默认禁止自动播放1.新知识:弹性盒模型1)原因:使得用户体验更加好,以及布局的整体效果随着用户的缩放来定昵称:flex2)概念:父元素(容器)父元素:有两个轴(主轴和交叉轴)3)设置格式:父级:display:flex;4)主轴方向(决定元素的排布顺序):row默认值:左从到右row-reverse右_左colum...原创 2020-03-31 23:07:23 · 263 阅读 · 0 评论 -
3月31号一阿里图标的使用心得
1.新知识(1)阿里图标阿里图标第一种:Unicode用法Unicode 是字体在网页端最原始的应用方式,特点是:兼容性最好,支持 IE6+,及所有现代浏览器。支持按字体的方式去动态调整图标大小,颜色等等。但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能...原创 2020-03-31 23:05:02 · 187 阅读 · 0 评论 -
使用滤镜的注意事项
3D补充知识点:滤镜样式主要应用在图片上比较多filter取值:1)none(没有)2)blur(px)高斯模糊,值越大越模糊,不接受百分比3)brightness(%)亮度,100%不变,0%全黑。超过100%会越来越亮4)contrast(%)对比度100%默认,0%全灰,超过100%对比度越高。没有负值5)drop-shadow水平偏移垂直偏移模糊距离(blur)模...原创 2020-03-29 21:38:19 · 180 阅读 · 0 评论 -
3月28号一3D动画的学习心得
1.测试题练习(1)怎么让Chrome支持小于12px的文字(2)介绍一下标准的css盒模型与低版本IE的盒子模型有何区别(3)img的alt与title有何区别。strong与em有何区别(4)简述一下src与href的区别(5)display:none;与visibilite:hidden;的区别2.新知识(1)3D制作给父级添加:开辟异次元空间:transform-styl...原创 2020-03-29 10:53:04 · 206 阅读 · 0 评论 -
3月27号一transform变化的学习心得
1.作业讲解注意动画是只设置第一帧和最后一帧2.新知识transform变化取值:(1)角度:rotate(多少deg)元素中心点顺时针旋转(2)位移translate(x,y)分开:translateYtranslateX(3)放大或缩小:scale(x,y)scaleXscaleY取值为负数则是进翻转(4)倾斜角度skew(x,y)在中心点进行倾斜角度取值:(多少...原创 2020-03-27 22:13:31 · 115 阅读 · 0 评论 -
3月26号一动画学习心得
今日份测试:(1)em是指根据父级的字数的倍数(2)时间不充裕?挤出来新知识:动画(1)什么是动画(2)触发式动画(3)主动式动画动画就是由一个一个的关键帧组成的;触发式动画:1)时间参数,执行多久:transition-duration2)延迟执行时间:transition-delay3)速率(过渡动画时间参数)transition-timing-function:取值...原创 2020-03-26 22:35:51 · 189 阅读 · 0 评论 -
3月24号一高级选择器+伪元素的学习心得
1.高级选择器(伪类)种类:(1)状态类选择器1)~4)顺序必须记住:爱恨准则love hate(lv ha)1)未访问状态:link2)已访问状态visited3)鼠标移动到链接上:hover4)选定的链接(在鼠标按下去但是没有松手的时候的状态):active5)checked改变被选中的状态,常使用在表单中的input6)focus表单聚焦时的状态(2)结构类括号去取值:...原创 2020-03-24 23:25:43 · 124 阅读 · 0 评论 -
3月23号一表格以及表格布局的心得
1.测试注意:(1)input属于行内替换元素(2)img属于行内元素,并且可以设置宽高(3)input中的name是为了提交数据(4)label标签中的for属性是为了和表单中input标签的id绑定(5)表单中form提交的方式的区别post安全性高,但是get储量小,不安全。2.新知识:表格元素与表格布局解析(1)盒子table(2)边框分隔:border-collaps...原创 2020-03-23 22:12:05 · 176 阅读 · 0 评论 -
3月22号一复习表单以及实战心得
复习表单注意:(1)需要提交才要加form(2)可以添加任何的样式(3)清除input的边框:border:none;清除选中时显示的边缘线:outline:none;(4)鼠标样式:cursorpointer小手,代表可以点击不会找W3C(万维网联盟。制定网络标准,如html,css等,祖师爷:蒂姆-博纳斯-李)(5)实战王者荣耀下拉导航栏...原创 2020-03-22 22:50:01 · 103 阅读 · 0 评论 -
3月21号一表单的学习心得
测试的时候注意的点:注意:区别隐藏与显示visibility:hidden;占据位置,隐藏元素overflow:hidden;不占据位置,隐藏元素二.学习的 新知识:表单:申请form作用:数据提交1.属性:(1)提交方式:method(get提交不安全,因为信息全部会暴露/post安全性高)(2)注意:你的提交方式你的后端会告诉你的(3)name 写当前的内容表示的是什...原创 2020-03-21 22:41:16 · 224 阅读 · 0 评论 -
3月19号一浮动学习心得
学习心得浮动样式:脱离标准文档流(1)缘由:实现文本环绕的效果(2)布局位置:从左到右:float:left;从右到左:float:right;(2)好处:不会产生解析空格,默认顶端对齐,并且同排显示注意:布局不要指局限于当前所学的(3)浮动延申:解决父级塌陷问题:1)让父级BFC化,即给父级设置:overflow:hidden;display:inline-block;f...原创 2020-03-20 22:27:25 · 112 阅读 · 0 评论 -
3月20号一定位的学习心得
学习心得:1.测试:注意:border-radius的最大值不能超过边长2.作业讲解:文字加粗:font-weight:bold;/bolder(加粗)取值:100-900背景图片居中:position:center/像数值 auto3.学习新知识4.定位:position注意:会脱离标准文档流(1)绝对定位:相对浏览器窗口来定位,完全脱离标准文档流(2)相对定位:相对于初始...原创 2020-03-20 22:24:05 · 100 阅读 · 0 评论 -
3月18日一复习实践三心得
学习方法:每个ppt敲三遍,但是需要提前看两边先敲,再自己理解敲一遍。注意点:1)vertical-align是指跟线对齐,如果设置了像素值则是会在页面放大或缩小的时候影响布局2)相邻选择器+3)背景复合样式...原创 2020-03-18 22:42:12 · 76 阅读 · 0 评论 -
3月17日一一圆角属性的学习心得
圆角属性的学习心得测试注意点:如何做到元素的显示与隐藏(元素位置保留)opacity:0;opacity:1;如何做到元素的显示与隐藏(不保留元素位置)display:block;display:none;新知识:圆角样式与渐变色1.圆角样式(1)格式:border-radius取值:一个值:相当于四个角的取值两个值:对角线(左上右下 右上左下)三个值:左上 右上左下...原创 2020-03-17 22:18:09 · 93 阅读 · 0 评论 -
周末复习实践心得
(1)作业布局思路:先结构~样式~内容(从外到里设置样式)(2)案例实践复习:小米官网使用已经掌握的知识实战小米官网1)企业级命名规范2)外联样式命名要一样3)使用div,以及id进行每一块的唯一性...原创 2020-03-15 22:29:44 · 97 阅读 · 0 评论 -
默认显示类型与显示类型的转化的学习心得
1.作业注意点:一行文字给p标签。img需要给边距可以给个父级div注意点:2.测试易错点:alt与title的区别alt是指图片显示不出来时,替换图片(描述图片的内容)title是鼠标悬浮的时候出现的效果3.默认显示类型与显示类型的转化(1)概念:显示类型:display块级元素默认显示类型:block行内元素:inline行内块:inline-block使用行内块但是会...原创 2020-03-15 16:59:26 · 187 阅读 · 0 评论 -
行内盒模型的学习
行内盒模型的学习1.概念:是W3C规定一个浏览器如何渲染,显示,排版文字的一整套规则2.文本对齐方式(1)行内盒模型的内容区由字体大小决定的padding:左右生效,上下无效margin:左右生效,上下无效,但是居中无效(注意)字体:font-size,单位:em(父级的倍数增加),px(2)文本线基线baseline由该字体中的X的小写字母的底线决定(3)字体样式:font-...原创 2020-03-13 22:30:45 · 97 阅读 · 0 评论 -
盒模型的学习心得
学习心得1.盒模型的概念是:根据元素的种类分为块级元素盒模型和行内盒模型2.盒模型的一些样式:(1)内容(2)padding(3)border边框:粗细 样式(实线solid,点dotted,双实线double,虚线dashed)颜色(color)边框复合属性:border:1px solid red;transparent透明色根据方向分开:border-topborde...原创 2020-03-12 22:30:39 · 817 阅读 · 0 评论 -
html+css的学习
谭州课堂基础班学习第一天跟着sherry大佬学习,新的开始新的起程,加油。开课第一天:1.老师介绍潭州课堂的历史2.讲解内容(1)什么是前端:主要是完成基于浏览器用户界面设计和开发,主要工作有PC网站开发,Webapp开发,在线开发,本地软件开发(2)前端三把斧:html:网页内容的展示(文字,视频,图片)+css:内容的装饰+js(javascript内容的交互:注册,登录,点击……...原创 2020-03-10 22:46:40 · 110 阅读 · 0 评论