- 博客(37)
- 收藏
- 关注
RSS订阅原创 图片整合技术:
图片整合技术:csssprites精灵图、雪碧图原理:background-position:xy优点:-将所有的小图标放在一张大的图片上可以减少体积-只需要请求一次减轻服务器的压力-面试:htm+css代码压缩(gulp\webpack)、图片整合技术(小图标)缺点-计算麻烦位置-...
2021-09-09 18:54:02
102
原创 网格布局的使用
网格布局:和表格布局相似(行和列)弹性布局:轴线(X轴和Y轴)网格布局的属性display:grid-是将网页分成很多的网格控制元素在网格中如何排列-概念-容器:设置了网格布局的盒子-项目:容器下面的直接子级元素网格布局中也有很多的属性分成添加在父级和子级上的属性display:grid形成网格布局 在浏览器中是不...
2021-09-08 21:21:54
630
原创 使用vw实现移动端布局的思路
vw实现移动端布局的思路推算100vw相对于和ui设计图的大小是一样的1vw就是设计图的百分之一100vw/设计图的大小=每一份大小得到的每一份(百分之一的视口宽度的单位是xp)如何把像素转化为rem在工作中写项目的时候无论用哪种方法都要考虑设备像素比dpr=物理像素/逻辑像素1.常见的设计图为640pxdpr为2640px/2=320px(逻辑像素)...
2021-09-07 18:40:38
473
原创 媒体查询的使用方法
媒体查询:只是一个工具,通过检查用户的设备的特效(屏幕的分辨率,横屏竖屏)从而加载不一样的样式表(一个函数,一个方法)媒体查询的写法:@media设备的类型(一般都是all)连接符号(媒体的特性-表达式(一般都是可以写成最大,最小宽度)){css语法}@media声明媒体查询的关键字设备的类型表示的含义是通过设备类型选中的设备特性是什么电脑屏幕(screen)全部(all)连接符号and(onlynot)...
2021-09-06 18:36:29
963
原创 弹性盒子 在布局经常使用的
弹性盒一般都是放在父级元素上的,直接控制子级所有的元素 属性display 属性值flex,让该盒子成为弹性盒子,有着弹性盒的各种特点: 在弹性盒中:所有的元素都可以直接设置宽高大小.在弹性盒中,是不会默认换行的,当遇到了元素过多的时候就会强行挤压盒子. 弹性盒有着一个很重要的概念,主轴和侧轴,默认主轴为X,侧轴为Y 如果弹性盒中的元素想要居中的话,可以直接添加margin:auto 在弹性盒的环境下:浮动不可以使用 定位,盒模型可...
2021-09-03 19:21:46
256
原创 怪异盒模型
怪异盒模型是一个非常好用的东西,也叫做ie盒模型,是ie在丢失文档类型的时候误打误撞出现的一个东西 标准的盒模型是由:内容(content),内边距(padding),外边距(margin),边框(边框)计算: 标准盒模型自身大小为 content(内容),padding(内外边距),border(边框) 实际大小为content+padding+margin+border 怪异盒模型(IE盒模型) 属性:box-...
2021-09-03 19:01:48
139
原创 css3中的景深,3d,和动画效果
在css3中添加了:景深属性,表现为远小近大 100px~1200px(在其中参数选择整百的进行调整,建议为1200px,效果比较的好) 1.可以在父级元素上添加 perspective:1200px(会为旋转的属性提供一部分远大近小的效果) 2.可以在子级元素上添加transform:perspective(1200px) (因为一般都是需要旋转属性的,所以如果添加在子级元素的上的话会造成属性覆盖 所以推荐在父级添加)3d属性,要结合上次的2d属性来进行谈论,在...
2021-09-02 19:41:08
2204
原创 css3中的2d使用
2d有四大应用 位移,缩放,旋转,倾斜位移:属性为transform 属性值(功能函数) translat()transform:translat(200px,200px)当属性值为两个值的时候表示,x轴200px,y轴200px,原点对齐,要注意从左到右为正,从上到下为正transform:translat(200px);可以写成transform:translatX(200px); 表示在X轴上进行移动,Y轴也可以当只有一个属性值的时候表示默认x轴,y轴为0当...
2021-09-01 18:57:16
147
原创 css3中的过度属性
过度表示为一个状态于另外一个状态的变化(从开始到结束) 如果该状态是从无到有的化将会无法使用过度属性 1.transition-property:检索或者设置对象中的参与过度的属性 参与过度的属性都可以写在后面,每一个属性都用空格隔开,all为全部,如果不写的话默认为全部transition-duration:检索或者设置对象过度的持续时间(就是持续时间)单位为s,ms transition-delay...
2021-09-01 17:46:24
147
原创 css3中的渐变属性的使用
渐变属性是一种浏览器解析生成的一种背景,是不会占位置的,相当于背景颜色 分为:线性渐变,径向渐变,重复渐变 线性渐变的使用方式 为一个背景颜色 属性:background,或者background-image 属性值:linear-gradient (参数) 参数1表示方向(默认为从上到下) 参数2,3,4,5...等等都表示的颜色 ...
2021-09-01 17:33:54
291
原创 css3中增加的一些属性
文本属性,颜色属性,背景属性,边框属性 四大属性开始入手 文本属性:文本阴影 属性:text-shoadow 属性值:常用的属性有4个 第一个属性表示水平方向 10px 第二个属性值表示垂直方向 10px 第三个属性值表示模糊程度 2px 第四个属性值表示的颜色值 (多种写法,...
2021-08-31 20:23:44
61
原创 css中增加的一些属性
文本属性,颜色属性,背景属性,边框属性 四大属性开始入手 文本属性:文本阴影 属性:text-shoadow 属性值:常用的属性有4个 第一个属性表示水平方向 10px 第二个属性值表示垂直方向 10px 第三个属性值表示模糊程度 2px 第四个属性值表示的颜色值 (多种写...
2021-08-31 20:22:08
254
原创 css3中添加的多个选择器
属性选择器: 选择到元素/标签里面的属性 - 针对于有默认属性的标签进行设置 标签名字[属性] 选择标签和属性 标签名字[属性='属性值'] 选择标签和属性,并且规定属性值 标签名字[属性~='属性值'] 选择标签和属性值,有这个属性值就可以被选择到~ 标签名字[属性^='属性值'] 选择标签和属性值,以这个字符开头的就可以被选择到^...
2021-08-31 20:00:45
319
原创 智能表单的使用
进入html5之后,表单也加入了不少的新功能正常的input的组件加入了不少的新type属性邮件:input type='email' 可以确认输入是否为邮箱,不过只能确格式是否,无法验证是否存在数字: input:type = 'number' 只能输入数字,有html属性:min最小值 max最大值网络地址: input:type='url'滑块:input:type='range' 和数字类似,可以看成数字的变体搜索:input:type='search' 和搜索引擎类似,搜索
2021-08-30 19:23:32
115
原创 html5中新增的属性
html5由2014年正式的发布,有着非常多的改进加入了不少的标签,可以让开发者更加愉快的进行开发语义化的标签:section元素 表示页面中的一个内容区块 类似于divheader元素 表示页面中一个内容区块或者整个页面的标题nav元素 表示页面中导航链接部分article元素 表示在一块与上下文无关的独立内容aside元素 在article之外的,与article内容相关的辅助信息footer元素 表示页面中一个内容区块或整个页面的脚注figure元素 表示一段独立的
2021-08-30 19:12:16
5190
原创 属性的继承
不可继承的：display、margin、border、padding、background、height、min-height、max- height、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align所有元素可继承：visibility和cursor。内联元素可继承：letter-spacing、word-spacing、line-
2021-08-27 17:58:29
62
原创 BFC是什么呢?
BFC 全名:Box、Formatting（格式化） Context（上下文）==块级格式化上下文它是一个独立的渲染区域，独立出来的,只对里面的元素等物品进行渲染,和块元素类似,对BFC里面的块元素不会进行渲染,需要重新触发1、内部的Box会在垂直方向，一个接一个地放置。块级元素的特点2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠margin-top/bottom解析最大值3、每个元素的margin...
2021-08-27 17:56:43
63
原创 新增表格属性
表格的基本结构： <table> (包裹表格的标签) <tr> (表格的行标签) <td></td> (表格的列标签)</tr></table>html属性:cellspacing="单元格与单元格之间的间距"cellpadding=“单元格与内容之间的距离"align="表格水平对齐方式" 取值：left、right、center、 valign=“垂直对齐” to...
2021-08-27 17:48:46
93
原创 表单的控件补充
复习表单控件 ： <input type="text" value=""/> 文本<input type="password" value=""/> 密码<input type="button" value=""/> 空按钮<input type="submit" value=""/> 提交<input type="reset" value=""/> 重置...
2021-08-27 17:28:33
46
原创 表单的进一步的使用
标签:fieldest(双标签)相对于一个方框,在字端集中的时候可以包含文本或者其他的元素,可以使用css 样式来进行修改,包过可以修改宽高大小,也可以修改边框线,fieldset元素可以进行嵌套,包过自己嵌套自己,可以使用disabled开禁止某些元素使用字段级标题标签:legend(双标签) html属性有align='left,right,center,justify' 可以设置该标签的位置legend元素可以在fieldset对象绘制的方框内插入一个标题.legend元素必须是fie
2021-08-27 17:23:13
47
原创 伪类选择器和伪对象选择器
伪类选择器::link(当鼠标没有点击的时候)(未访问的链接状态):visited(当鼠标点击过之后)(已经访问过的状态):hover(当鼠标滑过的时候):visited(当鼠标点下之后,还没抬起来的时候)伪对象选择器:::after{content:''}(表示在被选中的元素之后添加...)::before{content:''}(表示在被选中的元素之前添加...)::first...
2021-08-26 18:51:04
197
原创 高度塌陷的由来与解决方式
高度塌陷就是因为父级盒子为了自适应而没有设置固定高度,并且让父级盒子里面的盒子进行了浮动,这样就会发生这种情况父级盒子的高度塌陷进去了
2021-08-26 18:50:00
144
原创 宽高自适应
行内元素都是跟随内容大小进行变化的,所有不在此进行讨论宽度自适应块级元素是默认进行占满全屏的所以,当我们的没有设置宽度或者把宽度设为100%,或者不设置的情况下会占满全屏块级元素在没有设置宽度的时候,而且还被嵌套在父级容器里面的时候,会和父级容器等宽,也就是宽度在扩张的时候就如果遇到了父级会停止注意:当块级元素脱离文档流的时候,宽度会随着自身的内容决定=>这个时候就需要宽高来约束所以每一个盒子元素都要加宽高!!!!!!高度自适应:我们这里还是只是讨论块元素,不考虑行内元素
2021-08-26 12:41:11
129
原创 定位属性:常用定位
定位的三要素为:对象(要进行定位移动的对象),参照物(参照于某一个参照物来进行移动的),方向(移动的方向与距离(推荐添加两个方向来进行准确的定位))在进行定位之后需要添加left或者right来进行方向确认,不然就无法进行定位方向的移动是从浏览器的方向然后往反方向移动比如说left:50px就是从浏览器的左边出发,往右移动50像素注意可以添加负数,比如说left:-50px就是往左边移动50像素定位的属性:position属性值:static(默认),静态定.
2021-08-25 19:04:10
341
原创 常见的中英文切换效果
首先进行案例分析:我们有着一个大盒子来装着数据,使用ul>li来进行数据展示并且使用浮动来让li元素共处一行为ul添加下边框的大小与颜色来提供视觉判断在lu里面使用a标签来实现跳转,并且为a标签添加足够的样式在a标签中添加中文与英文两个数据,并且使用display:nono来隐藏中文数据使用伪类选择器来实现动态效果,当鼠标滑过li的时候让i标签里面的英文给清除,使用display:nono来进行隐藏并且使用display:block来让中文数据显示出来之后,因为原来..
2021-08-24 17:37:11
232
原创 8.24元素类型的切换
当我们想要使用某一个元素的时候,当这个标签可以使用,但是该个元素因为是块级,或者行内,或者别的类型而导致无法进行下去的时候就可以使用类型转换属性名称:display(显示方式) 元素值:block(块):可以将其他的元素转换为块级元素 inline(行内)可以加其他元素转换为行内元素 inline-block(行内块)可以将其他元素转化为行内块元素 ...
2021-08-24 17:25:18
86
原创 常见的按钮动态按钮案例
首先先分析一下案例:我们有着一个大盒子里面嵌套着4个小盒子可以使用div来进行嵌套,不过也可以直接使用ul>li*4来进行快捷写法使用了ul>li的写法来进行快速的内容保存之后,使用浮动来让li能在一行内排开,并且使用css样式来让各个li分开使用margin来让4个盒子分开,使用line-height:px;text-align:center;来让文字居中使用padding来撑大盒子,从而让文字相对的居中使用边框属性来让边框显示,注意,这里大部分的...
2021-08-24 12:38:50
202
原创 8.24日元素类型的分类与转换
html内部的元素大致分为三种:块元素,行内元素,行内块元素块元素: 特点:可以设置宽高大小,以盒子的类型在浏览器中出现,虽然没有内容,但是会占据一整行,没有内容的部分使用阴影来占据,默认的排序方向为从上到下开始排序,常用方法:块元素,用于在嵌套其他的元素,或者行内元素来进行网页的布局,占据位置行内元素 特点:行内元素一般情况是无法设置宽高的,元素的大小是由本身的内容决定的,行内元素在浏览器页面的按照一字排开的.行内块元素: ...
2021-08-24 11:50:43
35
原创 8.23的文本溢出属性
当文本量大增的时候,会出现文本量超过盒子长度的情况,这种情况,要么文本在盒子的约束下自动换行,要么浏览器出现进度条进行左右换行.当我们不想文档出现换行的时候就可以使用overflow来进行设置属性:overflow属性值:visible(正常属性),hidden(隐藏超出的文本),scroll(当文本量超出的时候会出现滚动条)auto(自动判断,当文本量超出的时候就会出现,不超出的时候会自己隐藏)常用的需求:overflow-x(横向文本溢出隐藏),overflow-y(竖向文本溢出隐藏
2021-08-23 20:01:57
76
原创 8.23的初步dome小案例
制做一个页面简单的流程:制作一个根盒子,在根盒子里面嵌套各种各样的div盒子按照网页需求把网页分为若干个大型盒子,然后在大型的盒子里面嵌套版心区域盒子版心区域的盒子一般都会设置长宽大小,并且强制居中,让网站的版心跟着用户走在进行了大纲盒子与版心盒子的划分之后就可以在各个模块的版心区域开始进行各个模块的精准划分导航区域:在导航区域的地方有着两个盒子,两个盒子都进行左浮动,并且中间使用外边距进行隔开,左边的盒子装填logo...
2021-08-23 18:38:25
113
原创 8.20总结
css常用的核心样式分为4个大类文字样式,列表样式,边框样式,背景样式文字样式的常用样式有调整文字大小:font-size 属性值为数值+单位常用的单位为px 前端的常用单位px像素还有em 相对于父系来设置的单位,表现为*乘法关系文本的行高:line-height:用来调整所选元素在垂直方向上面的关系line-height的值设定为和父级盒子一样高的时候盒内文字元素会进行垂直居中当行高大于高度的时候会往下移动当行高小于高度的时候会往上移动行高的设置都是...
2021-08-20 20:23:33
67
原创 css中文字属性:font
在css中文字属性是非常的有用而且常见的 font(文字)在css写法中为 属性:属性值;font-size:文字大小属性 写法为 font-size:20px;属性值的写法为数值加上单位:px单位为像素:web前端中很常见的单位在浏览器中文字的默认像素为16px 在浏览器中能设置更小的像素单位,但是不建议使用,因为不同浏览器有着不同的解析方式,如果小于16px 有可能出现错误在设置像素的时候也建议把像素给设置为偶数当属性值为0的时候可以不写单位.em单位:相对于父级..
2021-08-20 13:02:26
686
原创 学习第四天-早上总结-8.20
css的语法使用:选择器{属性:'属性值';属性2:'属性值2';}选择器有非常多种,从大小小排列为:行内选择器:权重1000id选择器:权重100class(类选择器):权重10标签选择器:权重1通配符选择器:权重0包含选择器:包含的各种相加群组选择器:各种计算选择器优先级伪类选择器:权重为10(伪类选择器有({:link{(未被访问过的(链接)状态(里面添加属性与属性值))}:visited{已经访问过(链接)的状态(里面添加属性与属性值)
2021-08-20 08:56:27
61
原创 第三天下午 8.19
css属性里面的浮动属性:浮动属性是区别于普通文档流的浮动流 浮动属性能让被修饰的元素在水平方向上进行移动,(向左,向右)当属性被浮动给修饰之后,会区别于普通的文档流动.当碰到当前的包含框(也就是父级边框属性就会停止浮动).当碰到另外的一个浮动框的时候也会停止浮动.如果当某一个浮动元素无法被父级边框与同级浮动框同时给包裹住的时候就会"往下挤"间接的改变了该元素的垂直上下方向.当被浮动的元素脱离了当前文本流的时候,该元素的初始位置还在,会有下一个没有浮动的元素进行填充.(特殊情况:文本文字,文本文
2021-08-19 18:55:54
64
原创 第三天上午内容8.19
css的语句应该怎么写呢?选择器{属性1:'属性值1';属性2:'属性值2';}css 的选择器有很多: 常用的为---------------------------------------------------------------------------------------------------------------id选择器:#(id的属性值){属性1:'属性值1';属性2:'属性值2'}id为在html结构代码中的标签的id属性里面的属性
2021-08-19 12:52:00
36
原创 坚持学习的第二天 8.18
首先进行复习,昨天学习了html5的发行时间:2014年html的基本结构<标签 属性='属性值'></标签>常用的标签:h1到h6,p标签(段落标签),b标签(加粗标签),i标签(倾斜标签),br(单标签,强制换行.)hr(水平线),三种不同的列表ul=>li(无序列表,可以更改里面的属性值 实心圆圈更改为别的)ol=>li(也可以更改里面的属性值) dl=>dt+dd(自定义标签,用处很少)a标签=>可以传输链接,地址等不同的东西, .
2021-08-18 20:12:35
45
原创 坚持学习的第一天8.17
HTML5于2014年发布HTML作为标签类型的语言,大部分都是为双标签格式,即有头有尾:<div></div>在标签内可以添加属性,用来描述该标签比如可以在img(图片标签中添加,高和宽来修改图片)标签有单标签与双标签的差距,在HTML5的语法要求中单标签可以省略/常用标签有p(段落标签,可以换行),i(倾斜标签),h1(文本标题标签,有1到6),b(加粗),u(文字下添加下划线),br(强制换行),hr(水平线,占一行)列表有无序,有序,自定义三种列表分别为:
2021-08-17 19:03:45
45
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人