前端基础
cwl_java
这个作者很懒,什么都没留下…
展开
-
快速学习-SpringBoot的配置文件
四、SpringBoot的配置文件4.1 SpringBoot配置文件类型4.1.1 SpringBoot配置文件类型和作用SpringBoot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话,就可以使用application.properties或者application.yml(application.yaml)进行配置。SpringBoot默认会从Reso...原创 2020-03-30 18:02:03 · 372 阅读 · 0 评论 -
快速学习-SpringBoot简介
一、SpringBoot简介1.1 原有Spring优缺点分析1.1.1 Spring的优点分析Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE)的轻量级代替品。无需开发重量级的Enterprise JavaBean(EJB),Spring为企业级Java开发提供了一种相对简单的方法,通过依赖注入和面向切面编程,用简单的Java对象(Pla...原创 2020-03-30 17:56:47 · 415 阅读 · 1 评论 -
前端基础-CSS梅兰练习
四、梅兰练习引入字体图标css和当前文件的css <link rel="stylesheet" type="text/css" href="font/iconfont.css"> <link rel="stylesheet" type="text/css" href="css/index.css">顶部代码:<!-- 顶部开始 -->&...原创 2020-03-30 17:44:57 · 482 阅读 · 0 评论 -
前端基础-CSS(ps简单操作)
三、ps简单操作1.放大缩小按住alt键滚动鼠标示意图2.移动按住空格键使用鼠标抓取示意图3.量尺寸使用矩形选框工具示意图4.采集颜色使用吸管工具示意图5.文字复制使用文本工具示意图6.切图片使用切片工具...原创 2020-03-30 17:43:37 · 376 阅读 · 0 评论 -
前端基础-CSS滑动门效果
二、滑动门效果概念:3个盒子浮动,左边和右边写宽高,负责加载两边的背景,中间的盒子宽度不定,让文字撑开<head> <meta charset="UTF-8"> <title>滑动门</title> <style type="text/css"> .box{ height:33px; margin-left:30...原创 2020-03-30 17:42:26 · 681 阅读 · 0 评论 -
前端基础-CSS精灵技术
一、css精灵技术网址:http://mil.news.sina.com.cn/china/2018-08-31/doc-ihiixyeu1558608.shtml示意图网页加载每一张图片都需要对服务器进行一次请求,所以对服务器的负荷会很大,可以将多个小图放到一张大图上,每个地方使用小图片都对大图进行背景定位即可,这样只需要加载一张大图片,对服务器只做一次请求,可以减少...原创 2020-03-30 17:41:20 · 362 阅读 · 0 评论 -
前端基础-CSS弹性布局
三、弹性布局1.多栏布局概念:实现多个栏目的布局,类似于报纸示意图a) 分栏显示–语法:column-count:值取值:值是一个栏目的数量<style type="text/css"> .box{column-count:3;width:500px;} </style></head><body> <...原创 2020-03-30 17:29:44 · 519 阅读 · 0 评论 -
前端基础-CSS缩放zoom
二、缩放zoom语法:zoom:值取值:值是一个倍数<head><meta charset="utf-8"><title>无标题文档</title><style> .box{ width:200px; height:200px; border:1px solid #000; } div.box:hove...原创 2020-03-30 17:28:38 · 1916 阅读 · 0 评论 -
前端基础-CSS3和CSS2的区别
二、css3和css2的区别css3在原有的基础上新增了很多css属性选择器,伪类选择器,伪对象选择器以及动画H5=html5 + css3 +js大前端:js1.内减模式可以将padding内边距和边框带来增大盒子的影响去掉语法:box-sizing:border-box;<head><meta charset="utf-8"><title>...原创 2020-03-30 17:10:23 · 1477 阅读 · 0 评论 -
前端基础-CSS定位
一、定位(重点)定位的使用: 1.4种定位方式:静态、相对、绝对、固定 2.4种边偏移属性:left、right、top、bottom注意:偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 (向下走)1.静态定位所有标准流都是静态定位语法:position:static<head> <meta charset=...原创 2020-03-30 17:07:32 · 484 阅读 · 0 评论 -
前端基础-CSS网站图标和字体图标
网站图标和字体图标1.网站图标作用:一个好的ico图标可以加深用户对于网站的记忆。降低用户记忆成本,就好像现在说道熊爪大家都能够想到度娘,更多的属于用户体验。有利于识别当前窗口是在哪个网站。制作流程: (1)一张图 (2)在网上将图片做成ico图标(网址:http://www.bitbug.net/) (3)在html中引入<link rel="shortcut icon"...原创 2020-03-30 16:57:31 · 647 阅读 · 0 评论 -
前端基础-CSS细线表格
细线表格语法:border-collapse:collapse;示意图注意:一定要加在table标签上,且表格和单元格都加边框属性原创 2020-03-30 16:56:39 · 648 阅读 · 0 评论 -
前端基础-CSS阴影
阴影1.文本阴影语法:text-shadow:横向偏移 纵向偏移 模糊距离 颜色示意图2.边框的阴影语法:box-shadow: 水平偏移 垂直偏移 模糊距离 阴影尺寸 颜色;示意图注意:边框阴影和边框没有关系...原创 2020-03-30 16:55:41 · 412 阅读 · 0 评论 -
前端基础-CSS浮动
浮动(重点)图文绕排图示浮动最早期做的是图文绕排<head> <meta charset="utf-8"> <title></title> <style type="text/css"> .news{width:500px;border:1px solid #000;overflow:hidden;}...原创 2020-03-30 16:54:47 · 388 阅读 · 0 评论 -
前端基础-CSS伪对象
伪对象概念:就是给元素追加一个虚拟标签,由css加载,可以节省html的资源开销,必须有content属性,默认是行元素,可以进行转换。::after:在指定的标签后面添加一个对象::before:在指定的标签前面添加一个对象content:元素里面的内容(内容中不能写标签)语法:元素::after{ content:"";}注意:伪对象样式中,必须有content属性,...原创 2020-03-30 16:53:34 · 971 阅读 · 0 评论 -
前端基础-CSS元素的可见性
元素的可见性语法:visibility:值取值:hidden隐藏,visible可见的示意图多学一招:使用该属性隐藏的元素,在页面中还占用空间语法:display:none元素隐藏后在页面中不占用空间示意图...原创 2020-03-30 15:47:10 · 570 阅读 · 0 评论 -
前端基础-CSS模型
盒子模型我们说div就是一个块,它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程小米官网:www.mi.com图示盒子模型的组成示意图盒子模型特性4个组成部分:宽高、内间距、边框、外间距1.内边距padding示意图注意:添加了padding属性的元素,会加大盒子的宽或高,需要减去padding的大小...原创 2020-03-30 15:46:21 · 368 阅读 · 0 评论 -
前端基础-CSS标签的显示模式
标签的显示模式(重点)div和span标签 1.样式完全相同,标签不同,显示的结果完全不同 2.每个div会独占一行,多个span会并列一排1.块元素特点:宽度默认是100%,高度默认是0,可以设置宽度和高度,会继承父级的宽度,换行显示—div ul li p h1示意图总结:块元素可以添加宽高的属性,独占一行2.行元素特点:宽高默认都是0,不能...原创 2020-03-30 15:31:24 · 471 阅读 · 1 评论 -
前端基础-CSS样式的优先级
样式的优先级(了解)1.强制优先级(important)语法:样式属性:值 !important;示意图注意:只针对当前这一条css属性2.选择器优先级伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承示意图3.伪对象选择器的优先级(了解)首...原创 2020-03-30 15:30:31 · 763 阅读 · 0 评论 -
前端基础-CSS样式的继承和覆盖
样式的继承和覆盖(重点)当父标签设置了样式,子标签都会具有父标签的样式示意图总结:1.能继承的css属性:font系列,text系列,color,line-height2.div可以继承父亲的宽度,高度不能继承当子标签和父标签设置了同样属性的css,子标签会覆盖父标签的设置示意图总结: 继承:父元素设置了样式,子元素也具有了 覆盖...原创 2020-03-30 15:29:31 · 1401 阅读 · 1 评论 -
前端基础-CSS样式的分类
css样式的分类1.内部样式----内联样式使用的是style标签<style type="text/css">/* 样式 */</style>多学一招:把页面的公共样式(不多的情况下)写在style标签中2.行内样式直接写在标签上的style属性中<div style="color:red;"> 我是盒子</div>...原创 2020-03-30 15:28:25 · 484 阅读 · 0 评论 -
前端基础-CSS网页调试
网页调试(重点)开发者工具对于开发者来说特别重要,只要你开发你就离不开它。一定要学会使用作用:调试代码 检测代码的!!在网页中点击右键,选择(审查元素/查看元素/检查)或者按F12,在右侧或下面会打开一个窗口,窗口最左边是查看html的结构,network是查看网页的http请求加载,console是控制台,查看网页中打印的信息,也可以自己写调试代码,source中是网页的所有资源。在结构...原创 2020-03-30 15:27:35 · 962 阅读 · 0 评论 -
前端基础-CSS内容溢出
内容溢出语法:overflow:值取值:auto当内容溢出时,生成滚动条------默认,hidden内容溢出时超出部分隐藏示意图总结: overflow取值: auto----自动生成滚动条(右边) hidden----超出部分隐藏 scroll----右边和下边都有滚动条设置水平方向溢出可以使用overflow-x,纵向溢出使用overfl...原创 2020-03-30 15:26:44 · 316 阅读 · 0 评论 -
前端基础-CSS列表属性
列表属性1.list-style-type设置列表前缀样式,通常设置为none,去掉前缀语法:list-style-type:none示意图2.list-style-image将列表前缀设置为自定义图片语法:list-style-image:url(图片路径)示意图应用场景:通常在网页中,使用的列表都是要去除前面的符号,并且去除左边和上...原创 2020-03-30 15:25:54 · 341 阅读 · 1 评论 -
前端基础-CSS背景属性
背景属性a) 背景颜色语法:background-color:颜色值示意图b) 背景图片语法:background-image:url(图片路径)示意图c) 设置背景图片是否平铺语法:background-repeat:值取值:no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺,repeat横向纵向都平铺---...原创 2020-03-30 15:24:57 · 462 阅读 · 0 评论 -
前端基础-CSS行高属性
行高属性语法:line-height:数字px;代表的一行的高度,放在段落中,可以理解为是行距总结: 1.文字在行高中是垂直居中的 2.行高通常用于让文字在盒子中垂直居中...原创 2020-03-30 15:23:38 · 602 阅读 · 0 评论 -
前端基础-CSS属性选择器
属性选择器 [属性名]语法:[属性名]{} [属性名=属性值]语法:[属性名=属性值]{} [属性名~=属性值](选择多个值中的一个)语法:[属性名~=属性值]{} [属性名|=属性值](选择连字符值中的第一个单词)语法:[属性名|=属性值]{} [属性名*=属性值](选择包含当前值的元素)语法:[属性名*=属性值]{}总结: 重点[属性名]...原创 2020-03-30 15:22:45 · 289 阅读 · 0 评论 -
前端基础-CSS相邻元素选择器
相邻元素选择器哥哥+弟弟{} /*通过哥哥选择到弟弟 */例:<style> div+p{/* 兄弟选择器,哥哥标签+弟弟标签,,,,修饰的是弟弟 */ color:red; }</style><div>第一个盒子</div><p>第一个段落</p><p>第二个段落</p>...原创 2020-03-30 15:21:52 · 1237 阅读 · 1 评论 -
前端基础-伪对象选择器
伪对象选择器语法:元素:first-letter 选择第一个字符元素:first-line 选择第一行总结: 1.这是选择器,不是css属性,不能写在{}中 2.所谓的元素,可以是标签名,还可以是类名.class名:first-letter/line{}...原创 2020-03-30 15:20:52 · 334 阅读 · 0 评论 -
前端基础-CSS尺寸与行高属性
九、css尺寸、行高属性1.尺寸属性a) 宽度语法:width:值取值:数字 + px/百分比/em -------------------------px代表像素,百分比代表浏览器宽度的百分比,em代表字符数示意图注意:1.div设置宽度为100%,其实和没设一样2.span标签设置宽度无效b) 高度语法:height:值用法和宽度一样注意:d...原创 2020-03-30 15:04:42 · 568 阅读 · 0 评论 -
前端基础-CSS属性选择器
八、属性选择器1.[属性名]选择具有该属性的元素示意图2.[属性=值](重点)选择具有该属性且等于该值的元素示意图3.[属性~=值](了解)选择具有该属性,且值中包含该值的元素示意图多学一招:元素属性的值可以有多个注意:这种场景适用于一个属性名对应多个属性的值4.[属性|=字符](了解)选择由连字符连接多个...原创 2020-03-30 15:02:22 · 423 阅读 · 0 评论 -
前端基础-CSS伪对象选择器
七、伪对象选择器(了解)first-letter:选择第一个字符语法:元素:first-letter示意图first-line:选择第一行语法:元素:first-line示意图...原创 2020-03-30 15:01:22 · 320 阅读 · 0 评论 -
前端基础-CSS伪类选择器和类选择器一起使用
六、伪类选择器和类选择器一起使用示意图原创 2020-03-30 15:00:31 · 1979 阅读 · 0 评论 -
前端基础-CSS常用选择器
五、常用选择器1.通配选择器(了解)给所有标签添加样式,*{css样式}示意图多学一招:通常只是用来去掉所有代码的边距,因为每个浏览器的边距不同,有的8个像素,有的7个像素,所以干脆会全部去掉,重新设置,保证浏览器的每个边距都一致2.后代选择器(掌握)选择元素里面的元素,外层元素和内层元素中间用空格隔开:外层 内层{css样式}示意图3....原创 2020-03-30 14:59:36 · 374 阅读 · 0 评论 -
前端基础-CSS注释
三、css注释语法:/*注释的内容*/四、css基本选择器1.标签选择器通过标签来选择元素,标签{css样式}示意图2.id选择器通过id属性来选择元素,#id名{css样式}示意图注意:id选择要保证页面中的唯一性,这是语义3.class类选择器通过class属性选择元素,.类名{css样式}示意图Goo...原创 2020-03-30 14:58:36 · 397 阅读 · 1 评论 -
前端基础-css字体与文本属性
二、css字体、文本属性css学前小知识:一张图片的打印出来的实际尺寸是由电子图片的像素和分辨率共同决定的,像素(Pixel)是指构成图片的小色点,分辨率(单位DPI)是指每英寸(Inch)上的像素数量,可以看做是这些小色点的分布密度;像素相同时,分辨率越高则像素密度越大,实际打印尺寸越小,图像也越清晰。实际尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一张图片宽为600像素,分辨...原创 2020-03-30 14:57:36 · 552 阅读 · 0 评论 -
前端基础-CSS介绍
一、css介绍引子:html是网页的结构,css是网页的化妆师,让网页更美观。传智官网删除css后会变得横七竖八,加上后又变美观了,这就是css样式的魔力。css就是给网页设置一些样式,让网页变的漂亮,更具有可读性。css全称为Cascading Style Sheets 翻译过来叫层叠样式表作用:设置网页的文字(大小,颜色,字体风格,对齐方式等)图片和排版等,简单点说就是给网页化妆...原创 2020-03-30 14:56:34 · 392 阅读 · 0 评论 -
前端基础-DW设计器的使用
DW设计器的使用1.热点热点就是带有超链接的区域点解3中模式中的设计模式,选择图片示意图2.插入图片方法1:示意图方法2:示意图3.插入换行回车:换段shift+回车:换行4.添加超链接示意图5.插入表格示意图6.合并单元格示意图...原创 2020-03-30 14:45:38 · 1148 阅读 · 0 评论 -
前端基础-HTML(object标签)
object标签<object type="application/x-shockwave-flash" data="line.swf" width="500" height="500"></object>效果图原创 2020-03-30 14:44:32 · 799 阅读 · 0 评论 -
前端基础-HTML文字滚动
1.文字滚动<html><head> <title>我的第一个页面</title></head><body> <marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" widt...原创 2020-03-30 14:43:33 · 896 阅读 · 0 评论