08 2020 档案

html取名大全
摘要：导航栏：nav 导航栏下拉：nav-pull-down 导航栏：nav-item search-body input-group search-keyword 导航栏 导航栏 可以用无序列表 第一个li左浮动,剩下的右浮动 再用padding调整左边距和右边距 阅读全文
posted @ 2020-08-23 22:33 珊迪·奇克斯 阅读(782) 评论(0) 推荐(0)
css3盒子模型
摘要：css中可以通过box-sizing来指定盒模型,有两个值,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况： 1.box-sizing:content-box 盒子为width + paddinf + border(以前默认的) 2 阅读全文
posted @ 2020-08-23 00:01 珊迪·奇克斯 阅读(198) 评论(0) 推荐(0)
CSS初始化
摘要：不同浏览器对有些标签的默认值是不同的,为了消除不同的浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对css初始化。 简单理解：css初始化是指重设浏览器的样式。（也称为css reset） 每个网页都必须首先运行css初始化。 这里我们以 京东css初始化代码为例 <!DOCTYPE h 阅读全文
posted @ 2020-08-20 22:28 珊迪·奇克斯 阅读(622) 评论(0) 推荐(0)
css行内块元素的使用技巧 可以利用text-align实现水平居中
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-08-20 07:03 珊迪·奇克斯 阅读(497) 评论(0) 推荐(0)
布局技巧：文字围绕浮动元素
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-08-20 06:18 珊迪·奇克斯 阅读(195) 评论(0) 推荐(0)
margin负值运用
摘要：1.让每个盒子margin往左侧移动-1px正好压住相邻盒子 边框 2.鼠标经过某个盒子的时候,提高当前盒子的层级即可（如果没有定位,则加相对定位（保留位置）如果有定位,则加z-index） <!DOCTYPE html> <html lang="en"> <head> <meta charset= 阅读全文
posted @ 2020-08-19 22:11 珊迪·奇克斯 阅读(116) 评论(0) 推荐(0)
margin负值的应用
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-08-18 23:11 珊迪·奇克斯 阅读(90) 评论(0) 推荐(0)
溢出的文字省略号显示
摘要：多行文本溢出显示省略号 多行文本溢出显示省略号,有较大的兼容性问题,适合于webkit浏览器或移动端（移动端大部分是webkit内核） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor 阅读全文
posted @ 2020-08-18 23:01 珊迪·奇克斯 阅读(91) 评论(0) 推荐(0)
溢出的文本省略号显示
摘要：溢出的文字省略号显示 1.单行文本溢出显示省略面--必须满足三个条件 /* 先强制一行内显示文本 */ white-space: nowrap;(默认normal自动换行) /* 超出的部分隐藏 */ overflow: hidden; /* 文字用省略号替代超出的部分 */ text-overfl 阅读全文
posted @ 2020-08-17 23:52 珊迪·奇克斯 阅读(136) 评论(0) 推荐(0)
vertical-align属性应用
摘要：解决图片底部默认空白缝隙问题 bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。 主要解决方法有两种： 1.给图片添加vertical-align:middle |top | bottom等（提倡使用的） 2.把图片转换成块级元素 display:block 阅读全文
posted @ 2020-08-17 23:44 珊迪·奇克斯 阅读(125) 评论(0) 推荐(0)
http协议
摘要：http协议就是按照一定的规则，向服务器要数据,或发送数据。而服务器按一定规则回应数据。 HTTP请求信息和响应信息的格式 请求： （1）请求行 （2）请求头信息 （3）请求主体信息 请求行又分3部分 请求方法 请求路径 所用的协议 请求方法：GET/POST/PUT/DELETE/TRACE/OP 阅读全文
posted @ 2020-08-17 00:01 珊迪·奇克斯 阅读(120) 评论(0) 推荐(0)
css:vertical-align 属性应用
摘要：css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。 官方解释：用于设置一个元素的垂直对齐方式,但是只针对于行内元素或者行内块元素有效。 语法： vertical-align:baseline | top | middle | bottom 值 描 阅读全文
posted @ 2020-08-16 22:16 珊迪·奇克斯 阅读(141) 评论(0) 推荐(0)
css表单轮廓和防止拖拽文本域
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户界面样式-表单 阅读全文
posted @ 2020-08-16 21:54 珊迪·奇克斯 阅读(290) 评论(0) 推荐(0)
css三角
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-08-16 21:38 珊迪·奇克斯 阅读(105) 评论(0) 推荐(0)
css三角的制作方法
摘要：网页中常见的三角形,使用css直接画出来就可以,不必做成图片或者字体图标。 一张图,你就知道css三角形是怎么来的了。做法如下： div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transpare 阅读全文
posted @ 2020-08-16 21:20 珊迪·奇克斯 阅读(161) 评论(0) 推荐(0)
字体图标的产生
摘要：字体图标使用场景：主要用于显示网页中通用,常用的一些小图标 精灵图是有很多优点的,但是缺点很明显 1.图片文件还是比较大的。 2.图片本身放大和缩小会失真 3.一旦图片制作完毕想要更换非常复杂 此时，有一种技术的出现很好的解决了以上问题。就是字体图标iconfont. 字体图标可以作为前端工程师提供 阅读全文
posted @ 2020-08-16 20:56 珊迪·奇克斯 阅读(146) 评论(0) 推荐(0)
精灵图二倍图的做法
摘要：在firework里面把精灵图等比例缩放为原来的一半 之后根据大小测量坐标 注意代码里面的background-size也要写：精灵图原来宽度的一半 阅读全文
posted @ 2020-08-12 23:09 珊迪·奇克斯 阅读(456) 评论(0) 推荐(0)
AJAX教程
摘要：AJAX(Asynchronous JavaScript and XML) (异步的JavaScript和XML)。 AJAX不是新的编程语言,而是一种现有标准的新方法。 AJAX是与服务器交换数据并更新部分页面的艺术,在不重新加载整个页面的情况下。 XMLHttpRequest对象 所有现代浏览器 阅读全文
posted @ 2020-08-10 16:22 珊迪·奇克斯 阅读(211) 评论(0) 推荐(0)
移动端常见布局
摘要：流式布局（百分比布局） 流式布局,就是百分比布局,也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行延伸,不受固定像素的限制,内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式 <!DOCTYPE html> <html lang="en"> <head> < 阅读全文
posted @ 2020-08-09 22:41 珊迪·奇克斯 阅读(217) 评论(0) 推荐(0)
css为什么需要精灵图
摘要：一个网页中往往会应用很小的背景图作为修饰,当网页上的图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的速度。 因此为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了css精灵技术（也称csssprites、css雪碧） 精灵图的使用 使用精灵 阅读全文
posted @ 2020-08-08 01:07 珊迪·奇克斯 阅读(377) 评论(0) 推荐(0)
元素的显示与隐藏
摘要：类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 1.display 显示隐藏 2.visibility 显示隐藏 3.overflow 溢出显示隐藏 display属性 display属性用于设置一个元素应如何显示 display 阅读全文
posted @ 2020-08-07 21:50 珊迪·奇克斯 阅读(155) 评论(0) 推荐(0)
css网页布局总结
摘要：通过盒子模型,清楚知道大部分html标签是一个盒子。 通过css浮动,定位可以让每个盒子排列成为网页。 一个完整的网页,是标准、浮动、定位一起完成布局的,每个都有自己的专门用法。 1.标准流 可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。 2.浮动 可以多个块级元素一行显示或者左 阅读全文
posted @ 2020-08-07 21:31 珊迪·奇克斯 阅读(170) 评论(0) 推荐(0)
css定位的拓展
摘要：定位的特殊性 绝对定位和固定定位也和浮动类似 1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度 2.块级元素添加绝对和固定定位,如果不给宽度或高度,默认大小是内容的大小。 3.脱标的盒子不会触发外边距的塌陷 浮动元素,绝对定位(固定定位)元素都不会触发外边距合并的问题。 定位的拓展 绝对（固 阅读全文
posted @ 2020-08-06 22:13 珊迪·奇克斯 阅读(121) 评论(0) 推荐(0)
css绝对定位的盒子居中算法
摘要：绝对定位的盒子居中 加了绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下方法实现水平居中。 ①left:50%;让盒子的左侧移动到父级元素的水平中心位置 ②margin-left:-100px;让盒子向左移动自身宽度的一半。 <!DOCTYPE html> <html la 阅读全文
posted @ 2020-08-06 19:59 珊迪·奇克斯 阅读(583) 评论(0) 推荐(0)
css定位叠放次序z-index
摘要：在使用定位布局时,可能会出现盒子模型重叠的情况。此时,可以用z-index来控制盒子的前后次序(z轴) 语法： 选择器:{z-index} 数值可以是正整数,负整数或0，默认值是auto，数值越大,盒子越靠上 如果属性相同,则按照书写顺序,后来居上 数字后面不能加单位 只有定位的盒子才有z-inde 阅读全文
posted @ 2020-08-06 19:50 珊迪·奇克斯 阅读(196) 评论(0) 推荐(0)
css粘性定位sticky(了解)
摘要：粘性定位可以被认为是相对定位的混合,Sticky粘性的 语法： 选择器{position:sticky;top:10px} 粘性定位的特点： 1.以浏览器的可视窗口为参照点移动元素(固定定位特色) 2.粘性定位是占有原先的位置（相对定位特点） 3.必须添加top,left,right,bottom其 阅读全文
posted @ 2020-08-06 17:43 珊迪·奇克斯 阅读(480) 评论(0) 推荐(0)
固定定位fixed（含固定版心右侧位置）
摘要：固定定位小技巧：固定在版心右侧位置 小算法： 1.让固定定位的盒子left:50%，走到浏览器可视区（也可以看做版心）的一半位置。 2.让固定定位的盒子margin-left核心宽度的一半距离。多走 版心宽度的一半位置 就可以让固定定位的盒子贴着版心右侧对齐了。 阅读全文
posted @ 2020-08-06 17:27 珊迪·奇克斯 阅读(1053) 评论(0) 推荐(0)
css定位:为什么需要定位
摘要：1.浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。 2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。 定位 = 定位模式 + 变偏移 定位模式用于指定 阅读全文
posted @ 2020-08-05 21:11 珊迪·奇克斯 阅读(611) 评论(0) 推荐(0)
css网页布局整体思路
摘要：页面布局思路 为了提高网页的开发效率,布局时通常有以下的整体思路： 1.必须确定页面的版心(可视区),我们测量可得知 2.分析页面的行模块,以及每个模块中的列模块。其实网页布局第一准则 3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则 4.制作HTML结构,我们 阅读全文
posted @ 2020-08-05 01:02 珊迪·奇克斯 阅读(282) 评论(0) 推荐(0)
css 添加透明背景色
摘要：RGB就是红色R+绿色G+蓝色B，RGBA说得简单一点就是在RGB的基础上加进了一个通道Alpha. 语法: 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。 R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百分数 A：透明度。取值0~1之间 取值 阅读全文
posted @ 2020-08-04 21:16 珊迪·奇克斯 阅读(1237) 评论(0) 推荐(0)
css导航栏注意点
摘要：实际开发中,我们不会直接用链接a,而是用li,包含链接(li+a)的做法 1.li + a 语义更清晰,一看这就是有条理的列表型内容 2. 如果直接用a,搜索引擎容易辨别成堆砌字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)，从而影响网站排名 阅读全文
posted @ 2020-08-04 07:38 珊迪·奇克斯 阅读(155) 评论(0) 推荐(0)
css属性书写顺序
摘要：css属性书写顺序 生活中衡量一个人有气质: 穿着打扮 举止言行 等等 编程中衡量一个人的代码能力？ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验 建议遵循以下顺序 1.布局定位属性: display/position/float/clear/visibility/overf 阅读全文
posted @ 2020-08-04 07:21 珊迪·奇克斯 阅读(162) 评论(0) 推荐(0)
MongoDB
摘要：基本概念 文档(document) 类似于js中的对象,在MongoDB中每一条数据都是一个文档 集合(collection) 集合就是一组文档,也是集合是用来存放文档的 集合中存储的文档可以是各种各种的,没有格式要求 多个文档组成集合,多个集合组成数据库 基本指令 show dbs 或者 show 阅读全文
posted @ 2020-08-04 00:01 珊迪·奇克斯 阅读(107) 评论(0) 推荐(0)
MongoDB的下载方式
摘要：下载地址zip包 安装安装后开始配置环境变量 比如我的下载路径是：D:\mongoDB\bin 配置完后 在命令行工具输入mongod 在c盘根目录 创建一个文件夹data 在data中创建一个文件夹db （或者在桌面创建data然后输入mongod --dbpath （填入路径）） 打开命令行窗口 阅读全文
posted @ 2020-08-03 23:26 珊迪·奇克斯 阅读(221) 评论(0) 推荐(0)
MongoDB简介
摘要：MongoDB是快速开发互联网Web应用而设计的数据库系统。 MongoDB的设计目标是极简、灵活、作为Web应用栈的一部分。 MongoDB的数据模型是面向文档的,所谓文档是一种JSON的结构,简单理解MongoDB这个数据库中存的各种各样的JSON.(BSON) 三个概念 数据库(databas 阅读全文
posted @ 2020-08-03 21:08 珊迪·奇克斯 阅读(137) 评论(0) 推荐(0)
MongoDB入门
摘要：恢复内容开始 数据库(Database) 数据库是按照数据结构来组织、存储和管理数据的仓库。 我们的程序都是在内存中运行的,一日程序运行结束或者计算机断电,程序运行中的数据会丢失。 所以我们就需要将一些程序运行的数据性永久化到硬盘之中,以确保数据的安全性。而数据库就是数据持久化的最佳选择。 说白了, 阅读全文
posted @ 2020-08-03 20:59 珊迪·奇克斯 阅读(110) 评论(0) 推荐(0)
css浮动布局注意点以及为什么需要清除浮动
摘要：1.浮动和标准流的父盒子搭配 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置 2.一个元素浮动了,理论上其余的兄弟元素也要浮动 一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流 阅读全文
posted @ 2020-08-03 02:11 珊迪·奇克斯 阅读(717) 评论(0) 推荐(0)
web框架学习秘籍
摘要：web框架学习 以React为例 1.理清框架应用场景基础知识 因为是一个前端框架所以必然要对JavaScript、CSS、HTML这些知识非常熟悉,尤其是DOM的API,尤其是一个非常容易被忽略的点就是DOM的API,比如Document.createElement这些基本的API应该要了如指掌, 阅读全文
posted @ 2020-08-02 21:08 珊迪·奇克斯 阅读(164) 评论(0) 推荐(0)
如何快速掌握一门新技术
摘要：第一大步 1.认知、了解（第一印象很重要） 2.该技术解决了什么问题 3.摸清同类技术有哪些 4.了解技术的主要组成部分 5.思考为什么这个技术会出现 第二大步 学语法、学用法 1.视频教学 2.找快速上手视频 3.看入门博客 4.买书看（优先权威书看） 5.看官方文档(硬着头皮看) 过程中多思考、 阅读全文
posted @ 2020-08-02 20:25 珊迪·奇克斯 阅读(238) 评论(0) 推荐(0)
css浮动元素经常和标准流父级搭配使用
摘要：为了约束浮动元素位置,我们页面布局一般采用的策略是: 先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则。 阅读全文
posted @ 2020-08-02 18:37 珊迪·奇克斯 阅读(180) 评论(0) 推荐(0)
css浮动特性（难点）
摘要：浮动特性 加了浮动之后的元素,会具有很多特性,需要我们掌握 1.浮动元素会脱离标准文档流(脱标) 2.浮动的元素会一行内显示并且元素顶部对齐 3.浮动的元素会具有行内块元素的特性 设置了浮动(float)的元素最重要特性 1.脱离标准流的控制（浮）移动到指定位置(动),（俗称脱标） 2.浮动的盒子不 阅读全文
posted @ 2020-08-02 18:04 珊迪·奇克斯 阅读(320) 评论(0) 推荐(0)
传统网页的三种布局方式
摘要：一。标准流（普通流/文档流） 所谓的标准流,就是标签按照规定好的默认方式排列 1.块级元素会独占一行,从上而下顺序排列 常用元素:div，hr,p,h1~h6,ul,ol,dl,form,table 2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。 常用元素:span a i e 阅读全文
posted @ 2020-08-02 17:34 珊迪·奇克斯 阅读(723) 评论(0) 推荐(0)
css盒子模型：清除内外边距
摘要：网页元素很多都带有默认内外边距,而且不同浏览器默认也不一致,因此我们在布局前,首先要清除下网页元素的内外边距 * { padding: 0; /* 清除内边距 */ margin: 0; /* 清除外边距 */ } 注意：行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换 阅读全文
posted @ 2020-08-02 09:19 珊迪·奇克斯 阅读(977) 评论(0) 推荐(0)
css盒子模型外边距（margin）
摘要：外边距(margin) margin属性用于设置外边距,即控制盒子和盒子之间的距离 属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-botom 下外边距 外边距典型应用 外边距可以让块级盒子水平居中, 但是必须满足两个条 阅读全文
posted @ 2020-08-02 08:38 珊迪·奇克斯 阅读(787) 评论(0) 推荐(0)
padding影响盒子的好处
摘要：padding内边距可以撑开盒子,我们可以做非常巧妙的运用 比如做导航栏如果每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适 阅读全文
posted @ 2020-08-01 21:59 珊迪·奇克斯 阅读(208) 评论(0) 推荐(0)
css盒子模型之内边距
摘要：padding属性用于设置内边距，即边框与内容之间的距离 属性 作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 内边距（padding） 当我们给盒子指定padding值之后,发生了2件事情: 阅读全文
posted @ 2020-08-01 21:14 珊迪·奇克斯 阅读(331) 评论(0) 推荐(0)
css盒子模型
摘要：边框会影响盒子实际大小 边框会额外增加盒子的实际大小,因为我们有两种方案解决： 测量盒子大小的时候不量边框 如果测量的时候包含了边框,则需要width/height减去边框宽度（左右都要减） 阅读全文
posted @ 2020-08-01 20:10 珊迪·奇克斯 阅读(134) 评论(0) 推荐(0)