小白基础
文章平均质量分 66
Mr._Dang
一手Ctrl C,一手Ctrl V
展开
-
框架 bootstrap
BootStrap1. 主要内容文章目录BootStrap1. 主要内容2. BootStrap的安装和使用2.1. BootStrap 介绍2.2. BootStrap 特点2.3. 下载与使用3. 布局容器和栅格系统3.1. 布局容器3.2. 栅格系统3.2.1. 列组合3.2.2. 列偏移3.2.3. 列排序3.2.4. 列嵌套4. 常用样式4.1. 排版4.1.1. 标题4.1.2. 段落4.1.3. 强调4.1.4. 对齐效果4.1.5.列表4.1.6. 代码4.1.7.表格表格样式tr、th原创 2021-04-12 19:02:51 · 284 阅读 · 0 评论 -
移动端布局
视口布局视口移动端默认的布局宽度为980px,这个980px是苹果公司首先提出的,后来其他公司纷纷效仿,统一了布局宽度,可以让页面更为完整的展示。视觉视口我们视觉看到的手机屏幕区域。因为手机的屏幕大小和分辨率不同,在980px下,同样应该div在不同的手机下看到的大小会不同,那么会操作样式的不同。理想视口为了让每一个设备能够完美的显示网页的内容,我们让布局视口与视觉视口一致,也就是我们说的理想视口。物理像素就是屏幕上最小的发光单位,物理像素点。在PC端,默认是1px = 1个物原创 2021-04-07 15:00:25 · 586 阅读 · 0 评论 -
分栏布局
将盒子分为若干栏,是垂直上下划分的,每一栏的宽度相等,效果与报纸差不多。1.column-count:数值; 指定分栏的数量。例:.box { column-count: 5; }2.column-width:数值px; 指定分栏的宽度。例: .box { /* column-count: 5; */ column-width: 400px; }【注意】column-count与column-width不要同时使用。如果同时使用,则column-w原创 2021-04-06 20:45:59 · 169 阅读 · 0 评论 -
H5新特性之语义化标签
在日常生活看报,或浏览网页,都有着固定的样式,如:头部,导航,标题等。在html5中,为了方便划分板块结构,增加了新的语义化标签。1.header(重点)header表示表示一个页面或者一个区域块的标题。通常是一些引导和导航信息。例:<header> <p>this is the page Logo</p> <nav>this is page navigation</nav></header>2.na...原创 2021-04-06 15:08:02 · 143 阅读 · 0 评论 -
BFC
BFC【全称】block fomatting context 块级格式化上下文。官方解释:它决定了元素如何对其内容进行定位,以及其他元素的关系和相互作用。BFC提供了一个环境,HTML元素在这个环境中按照一定的规则进行布局。可以理解成:BFC的目的就是形成一个完全独立的空间,让这个空间的子元素不会在布局上影响到其他元素。每一个块级元素应该都是一个独立的盒子,不应该对其他的块级元素或者父盒子操作影响。但实际情况并不是这样的,可能会出现以下几种情况:1.外边距塌陷。2.外边距重合。3.高度原创 2021-04-05 16:23:37 · 81 阅读 · 0 评论 -
背景 back-ground
背景 back-ground【tips】背景色与背景图是可以一起设置的。1.背景颜色 (掌握)背景色 background-color有三种表达方式:单词 (颜色英文名称) 例:(red、green、blue) 。十六进制:1.RGB 。例:【background-color: rgb(0, 0, 0);】。2.RGBA (A指的是透明度)。 例:【background-color:rgba(0,0,0,0.5)】。3.直接写十六进制数值,前面必须加‘#’,否则不生效 。例:(bac原创 2021-04-01 23:18:26 · 1258 阅读 · 0 评论 -
弹性盒模型 flex
2009年,w3c提出了一个新的盒模型(flex),用于解决网页布局中的一些问题。flex的优势1.flex布局的子元素不会脱标。2.属性非常丰富,可以灵活使用更加便捷的为页面布局。3.IE低版本不支持IE10-11支持度不高,标准浏览器完全支持。4.移动端支持性也比较高。弹性盒子声明定义:使用display:flex;或者inline-flex声明一个元素为弹性盒子。[注意 ]弹性盒子中的子级块级元素会并排显示。flex与inline-flex的区别flex;如果没有设置宽高,宽默认为原创 2021-03-31 23:50:00 · 164 阅读 · 0 评论 -
CSS 动画
动画和过度的区别:过度只能从一个状态到另一个状态,无法控制更加精细的过程。过度必须有触发事件,动画可以没有。过度变化没有次数,动画可以指定次数。动画使用过程定义动画。通过@keyframes关键帧。在指定元素中,调用动画。通过anmiation属性来调用。【注意】使用动画可以设置多个属性的变化过程。前提是这些属性是数值型的。动画属性:1.animation-name:指定要调用的动画,属性值为动画名(必填)。2.animation-duration:一次动画完成原创 2021-03-30 19:46:55 · 66 阅读 · 0 评论 -
CSS 转换 2D和3D
转换 transform转换是css中的一个特征,可以实现元素的缩放、位移和变形。可配合‘transition’属性来使用。常用属性值:scale(缩放)、translate(位移)、rotate(旋转)、skew(倾斜)。作用:使元素在位置或者形状上发生一定的改变。1.scale 缩放格式: transform:scale(x y);x:表示水平方向上的缩放倍数。y:表示垂直方向上的缩放倍数。如果只写一个值表示等比例缩放属性值直接写数字。取值大于1表示放大,小于1 表示缩小。原创 2021-03-29 23:19:58 · 140 阅读 · 0 评论 -
精灵图(雪碧图)
精灵图 css sprite1.概念:css sprite也叫精灵图雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。这样一来,当访问该页面时,就由原来的多次请求变为一次请求。客户端每显示一张图片都会想服务器发送一次请求,图片越多请求越多,延迟的可能性就越大,同时对服务器会造成压力。所以页面中如果有多个icon(小图标)时,推荐使用精灵图。2.优点:减少网页的http请求,从而提升网页的性能。减少图片的字节。3.用法:需要一个设置原创 2021-03-28 20:58:23 · 129 阅读 · 0 评论 -
清除浮动
定义:清除浮动元素之间的影响。高度塌陷父元素中所有的子元素都浮动后,父元素没有设置高度,则高度为0。在标准文档流中,父元素的高度默认是由内容的高度撑开的。也就是说,子元素的最大高度就是父元素的高度。但是当子元素都浮动后,子元素就脱离了标准文档流,无法撑开父盒子,对于父盒子来说,它里面没有标准文档流的内容,则导致它没有高度。解决方法1.添加高度(不推荐)原因:在网页中,父元素一般不设置高度,而是由内容去撑开高度,如果设置了高度,可能会出现底部有大片的留白或者内容溢出。2.父元.原创 2021-03-22 18:55:10 · 97 阅读 · 0 评论 -
什么是盒模型?
盒模型:box model。div和span是最常见的两个盒子。图片、表单元素等这些可以看做文本,它们并不是盒子。1.盒子中的区域一个盒子主要的属性有5个:width、height、margin、padding、border。width 内容的宽(标准盒模型下,不是盒子的宽)。height 内容的高 (标准盒模型下,不是盒子的高)。margin 外边距。padding 内边距。border 边框。2.宽高标准盒模型下,我们设置的宽和高,是内容的宽和高,并不包含边框、内边距和外.原创 2021-03-21 16:11:06 · 107 阅读 · 0 评论 -
什么是浮动?
浮动(float):float是css样式中的定位属性,用于设置标签对象(如:< div>标签盒子、< span>标签、标签、< em>标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left;)和浮动居右靠右(float:right;)。1.标准文档流定义:内容是从上往下,从左到右书写的。前面的内容或位置发生改变时,后面的内容也会随之改变。HTML就是一个标签的文档流,网页上内容的位置,与我们书写的顺序有关。元素的.原创 2021-03-20 10:15:46 · 3304 阅读 · 0 评论 -
CSS文本样式
文本样式1.font字体属性行高 line-height一行文字实际占有的高度。单位是像素(px)、em、百分比(不常用)。1em=自身字体大小的1倍。2em=自身字体大小的2倍。百分比:自身字体大小的比例。使用场景:让一行文字在盒子中垂直居中。让行高等于盒子的高度。【注意】只适用于单行文字。行高、字号一般设置为偶数。例: <style> div { width: 200px; height: 38px;原创 2021-03-18 22:27:15 · 424 阅读 · 0 评论 -
继承与层叠的用法
1.继承定义:一些样式父给元素设置后,其后代元素也会继承父类的样式,这就叫做继承性。后代元素只能继承来自祖先元素的文本样式。比如:color、text-开头的、font-开头的、line-开头的例: <style> div { color: #F4A460; font-size: 48px; } </style></head><body><body> <div>原创 2021-03-18 16:12:19 · 75 阅读 · 0 评论 -
什么是选择器?
基础选择器1.标签选择器–通过标签名直接选中标签。格式:标签名 {属性:属性值;}例:<style> p { color: pink; font-size: 24px; } </style></head><body> <p>这是一段文字</p>【知识点】1.标签选择器会选中页面中所有的响应的标签。不管嵌套关系。2.在实际开发中,不推荐直接使用,不过可以用原创 2021-03-18 10:45:26 · 4183 阅读 · 2 评论 -
什么是CSS?
CSS介绍CSS:表现层,网页的美化。CSS与HTML都是由W3C组织进行维护的,现在的版本已经更行到3.0版本,也就是我们常说的CSS3。CSS全称:cascading style sheets (层叠样式表)CSS优点1.能够使代码简洁,可读性比较强。2.便于维护。3.对搜索引擎比较友好。4.提高开发效率。CSS语法选择器{属性:属性值;}例: <style> p { color: pink; font-size: 24px原创 2021-03-18 00:03:42 · 893 阅读 · 0 评论 -
什么是表单?
表单表单:收集不同类型的用户输入信息。 输入框,密码框,文本域 下拉菜单,单选,多选。from标签: 作用:定义一个表单。 一个表单是由表单元素组成的。 标签:只是说开始标签与结束标签。 元素:在HTML中,从开始标签到结束标签的所有代码统称为一个元素。 表单元素:不同类型的input元素 以及 单选框,提交按钮等。 格式: <form action=""> 传输的数据 </form&原创 2021-03-16 20:40:15 · 9161 阅读 · 0 评论