- 博客(11)
- 收藏
- 关注
RSS订阅原创 Web前端学习笔记——响应式布局
响应式布局： 网页可以根据不通的设备或窗口大小呈现出不同的效果，使用响应式布局，可以使一个网页适用于所有设备，响应布局的关键就是媒体查询，通过媒体查询，可以为不通的设备，或者设备不同状态来分别设置样式。使用媒体查询：语法： @media 查询规则（）媒体类型：all：所有设备print：打印设备screen：带屏幕的设备speech：屏幕阅读器媒体特性：width：视口的宽度he...
2020-03-01 14:34:49
201
原创 Web前端学习笔记——弹性盒
flex（弹性盒、伸缩盒）是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局；flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变。弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器，我们通过display来设置弹性容器：display：flex 设置为块级弹性容器display：inline-flex 设置为行内的弹性容器弹性元素：弹性容器的子元素是弹性元素...
2020-02-29 12:05:54
200
原创 Web前端学习——less
less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。在less中添加了许多的新特性，像对变量的支持，对mixin的支持等。less的语法大体上和css语法一致，但是less中增添了许多对css的拓展，所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后再由浏览器执行。变量：①在变量中可以存储一个任意的值，并且我们...
2020-02-28 15:04:31
187
原创 Web前端学习笔记——过渡
过渡（transition）：1、通过过渡可以指定一个属性发生变化时的切换方式。2、通过过渡可以创建一些非常好的效果，提升用户的体验。3、过渡的属性值：①transition-property：指定要执行过渡的属性，大部分属性都支持过渡效果（如宽度、高度、颜色等可以计算数值的属性），注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡，多个属性间使用逗号隔开，如果所有属性都要过渡，则使...
2020-02-27 15:52:00
308
原创 Web前端学习笔记——音频和视频的播放
1、audio标签用来向页面中引入一个外部的音频文件的，音频文件引入时，默认情况下不允许用户自己控制播放和停止。属性：control：是否允许用户控制播放。autoplay：音频文件是否自动播放——如果设置了autoplay则音乐在打开页面时会自动播放，但是目前大部分浏览器都不会自动对音乐进行播放。loop：音乐是否循环播放。1、使用video标签来向网页中引入一个视频，使用方式和aud...
2020-02-24 14:32:51
645
原创 Web前端学习笔记——定位
定位： 定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位。可选值：static：默认值，元素是静止的没有开启定位relative：开启元素的相对定位absolute：开启元素的绝对定位fixed：开启元素的固定定位sticky：开启元素的粘滞定位相对定位： 当元素的position属性值设置为relative时则开启了元素的相对...
2020-02-23 15:20:52
197
原创 Web前端学习笔记——导航条小练习
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>导航条</title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ ...
2020-02-22 15:09:34
127
原创 Web前端学习笔记——简单页面布局
简单来说就是把网页分解为多个div，然后通过浮动、div嵌套等方法实现页面的简单布局。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*清除默认样式*/...
2020-02-22 14:27:52
297
原创 Web前端学习笔记——浮动
块元素在文档流中默认垂直排列，所以div自上向下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从而脱离文档流。浮动可选值：1、none：默认值，元素默认在文档流中排列。2、left：元素会立即脱离文档流，向页面的左侧浮动。3、right：元素会立即脱离文档流，向页面的右侧浮动。当为一个元素设置浮动以后（float属性是一个非none的值），...
2020-02-22 14:08:17
412
原创 Web前端学习笔记——文档流
什么是文档流？文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。元素在文档流中的特点1、块元素：①块元素在文档流中会独占一行，块元素会自上向下排列；②块元素在文档流中默认宽度是父元素的100%；③块元素在文档流中的高度默认被内容决定；④当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度以适应内边距。<...
2020-02-21 16:42:15
365
原创 Web前端学习笔记——内联元素的盒模型
1、盒模型的分类内容区（content）、内边距（padding）、边框（border）、外边距（margin）内容区：内联元素不能设置width和height。内边距：内联元素可以设置水平方向的内边距；内联元素可以设置垂直方向的内边距，但是不会影响页面的布局。边框：内联元素可以设置边框，但是垂直的边框不会影响到页面的布局。外边距：内联元素支持水平方向的外边距，水平方向的外边距不会重叠，...
2020-02-21 15:44:20
175
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人