前端学习
scyllake
这个作者很懒,什么都没留下…
展开
-
十、css 之 flex(弹性盒)
1.flex 弹性盒flex(弹性盒、伸缩盒)是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变弹性容器要使用弹性盒,必须先将一个元素设置为弹性容器,我们通过 display 来设置弹性容器display:flex 设置为块级弹性容器display:inline-flex 设置为行内的弹性容器弹性元素弹性容器的直接子元素是弹性元素(弹性项)(间接的子元素不是)弹性元素可以同时是弹性容器,可以有原创 2020-11-22 23:07:10 · 431 阅读 · 0 评论 -
九、less
1.less的简介less是一门css的预处理语言, less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性:像对变量的支持、对mixin的支持… …法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再由浏览器执行css原生也支持变量的设置语法:–color:#ff0;使用方法: var(–color);calc()计算函数width: cal原创 2020-11-22 23:06:30 · 158 阅读 · 0 评论 -
八.CSS之animation(动画)
1. 过渡过渡(transition)通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果,提升用户的体验1.1 transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡,则使用all关键字 大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡(auto不是有效数值,过渡动画效果不会生效)原创 2020-11-22 23:05:53 · 388 阅读 · 0 评论 -
七 .Html的表格
1.表格owspan 纵向的合并单元格colspan 横向的合并单元格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con原创 2020-11-22 23:05:12 · 95 阅读 · 0 评论 -
六. CSS 样式补充之 font & background
1.字体font-face可以将服务器中的字体直接提供给用户去使用问题:1.加载速度2.版权3.字体格式@font-face { 命名一个自己的字体/* 指定字体的名字 /font-family:‘myfont’ ; /也可以是电脑自带的字体// 服务器中字体的路径 */src: url(’./font/ZCOOLKuaiLe-Regular.ttf’) format(“truetype”);font-family: myfont; 引用字体字体相关的样式color 用原创 2020-11-22 23:04:25 · 173 阅读 · 0 评论 -
五. css 布局之 position(定位)
1.定位的简介定位(position)定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值:static 默认值,元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位相对定位:当元素的position属性值设置为relative时则开启了元素的相对定位相对定位的特点:1.元素开启相对定位以后,如果不设原创 2020-11-22 23:03:43 · 216 阅读 · 0 评论 -
四. css 布局之 float
1. float 简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动:可选值:none 默认值 ,元素不浮动left 元素向左浮动right 元素向右浮动注意:元素设置浮动以后,水平布局的等式便不需要强制成立元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动浮动的特点:1、浮动元素会完全脱离文档流,不再占据文档流中的位置2、设置浮动以后元素会向父元素的左侧或右侧移动,3、原创 2020-11-22 23:02:46 · 90 阅读 · 0 评论 -
三. CSS layout(布局)
1.文档流(normal flow)网页是一个多层的结构,一层摞着一层,通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层,这些层中,最底下的一层称为文档流,文档流是网页的基础, 我们所创建的元素默认都是在文档流中进行排列,对于我们来元素主要有两个状态:在文档流中不在文档流中(脱离文档流)元素在文档流中有什么特点:块元素块元素会在页面中独占一行(自上向下垂直排列)默认宽度是父元素的全部(会把父元素撑满)默认高度是被内容撑开(子元素)行内元素行内元素不会独原创 2020-10-24 18:42:48 · 1137 阅读 · 0 评论 -
二、css3基础
1. css文件在网页内的引入 方法<link rel = “stylesheet” href = “”>2. 选择器1.元素选择器: p div body h1 等,根据元素的标签名来2.Id 选择器:给元素分配一个id不能重复 以 #开头<style type="text/css"> .red{ color: red; } /*复合选择器,通过标签+类选择器来完成特定的效果*/ div.red{ font-size: 50px原创 2020-10-24 18:42:16 · 95 阅读 · 0 评论 -
一、html 基础
1. vs code插件Live server 用于直接浏览器中进行预览2.实体指的是以 &开头的一些特殊字符,如空格,等3.meta设置元数据,网页与生俱来的,不是给用户看的常用的属性:1.Name:指定名称2.Content:指定内容3.charset : 设置字符集4.keywords :网站的关键字,可以同时指定多个关键字,中间用逗号隔开5.http-equiv=refresh content=“3;url=””” 页面重定向4. 标签1.Hgroup:对原创 2020-10-24 18:41:35 · 100 阅读 · 0 评论