- 博客(54)
- 收藏
- 关注
原创 web前端学习(十四)媒体查询
媒体查询- 什么是媒体查询?媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。- 媒体查询与弹性盒布局的适用情况媒体查询:当页面的结构发生变化的话最好使用媒体查询。 弹性盒:如果只是宽高的变化,尽量使用弹性
2021-09-03 19:57:03
1134
原创 web前端学习(十三)animation动画
动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作-过渡和动画之间的异同1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以
2021-09-03 19:50:35
3142
原创 web前端学习(十二)CSS过渡-Transitions
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。要实现这一点,必须规定两项内容: 1.指定要添加效果的CSS属性 2.指定效果的持续时间。CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性),.
2021-09-03 19:40:26
412
原创 web前端学习(十一)水平垂直居中
水平垂直居中的方法 1.通过外边距调整margin移动,根据父子元素的宽高来计算外边距的值。(cale为计算属性) 可以使用cale属性: margin-left:cale(50% - 1/2width) ——父元素宽的一半减自身宽一半 margin-top:cale(50% -1/2height) 2.定位 2.1定位:position:absol...
2021-09-02 21:14:21
1198
原创 web前端学习(十)flex布局
1.flex布局布局的传统解决方案,基于盒模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布
2021-09-02 20:17:14
546
原创 web前端学习(九)定位布局
1.定位布局定位流分类1.1.静态定位1.2.相对定位1.3.绝对定位1.4.固定定位1.5.粘滞定位1.6.z-index1.1.静态定位( Static positioning)是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。position: static;1.2.什么是相对定位?( Relative positioning )相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使用to
2021-09-02 20:02:10
213
原创 web前端学习(八)浮动布局——清除浮动
清除浮动的方法父子级清除浮动: 1.在子级元素后添加一个空元素,为其添加clear:both 弊端:增加了无意义的元素结构 2.给父级元素设置一个overflow:hiddden 解决了第一种方法的弊端【最推荐使用第二种】 3.使用伪元素::after清除 为需要清除浮动元素的伪对象中设置height:0, #layout:after{ clear:both; ...
2021-09-01 20:28:48
231
原创 web前端学习(七)浮动布局—浮动流、字围现象、高度塌陷
浮动流排版方式1.浮动流是一种"半脱离标准流"的排版方式 2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐1.浮动元素字围现象浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象 注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值 2.在浮动流中是不可以使用margin: 0 auto;2.浮动流的特点1.在浮动流中是不区分块级元素/..
2021-09-01 20:21:46
363
原创 web前端学习(六)CSS盒模型—组成及外边距合并问题
1.盒子组成盒子属性( Box properties)margin 外边距 代表盒子四周的区域。相邻元素的边距会合并(margin collapsing)border 设定介于padding的外边缘与margin的内边缘之间,默认值为0padding 内间距 在任何定义的边界内的元素内容周围生成空间width & height 用于设置内容区的宽高,该片区域用于显示内容。盒子高度默认为内容的高度。盒子一般指的是块元素,盒子是我们布局...
2021-09-01 19:59:04
475
原创 web前端学习(五)CSS的三大特性—继承性、层叠性、优先级
1.继承性作用:给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性 注意点: 1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承。 3.继承性中的特殊性 3.1 a标签的文字颜色和下划线是不能继承的,当做子元素,样式修改要在子元素处理。 3.2 h标.
2021-08-31 20:24:44
522
原创 web前端学习(四)http、https、http协议、get、post
什么是 HTTP?超文本传输协议(Hypertext Transfer Protocol,缩写 HTTP)旨在启用客户端和服务器之间的通信。https安全性、保密性比http强GET和POST是什么? HTTP协议中的两种发送请求的方法。http协议http协议是超文本传输协议,常用于BS架构中,为数据在网络传输中规定协议。HTTP报文的分类有两种:请求报文和响应报文。顾名思义,请求报文就是客户端向服务端发送请求的信号,响...
2021-08-31 19:58:56
278
原创 web前端学习(三)块级元素、行内元素特点及区别
1.块级元素作用:搭建网页结构特点:* 独占一行空间* 默认宽度为100%* 高度由子元素或内容决定* 可以通过css指定其宽度高度* 块级元素可以包含块级与行内。元素:html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、table、tr、th、td、hr、header、footer、nav、article、section、aside、address...2.行内元素作用:在结构中填充网页内容特点:* .
2021-08-31 13:52:16
907
原创 web前端学习(二)初识HTML与CSS
1.1.什么是HTML?什么是CSS?HTML是HyperText Markup Language(超文本标记语言)它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字
2021-08-31 11:20:22
131
原创 web前端学习(一)初识前端概况了解
1.软件的架构1.1 C/S即Client/Server(客户端/服务器)结构,它可以分为客户端和服务器两层:第一层是在客户机系统上结合了界面显示与业务逻辑,第二层是通过网络结合了数据库服务器。C/S架构的优点: 1.C/S架构的界面和操作可以很丰富。(客户端操作界面可以随意排列,满足客户的需要) 2.安全性能可以很容易保证。(它可以对权限进行多层次校验,提供了更安全的存取模式,对信息安全的控制能力很强。一般高度机密的信息系统采用C/S结构适宜) 3.由于只有一层交互,因此响应
2021-08-31 11:03:24
361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅