new-SkyWaller-CSDN博客

原创前端的学习之路：初级CSS---弹性容器上的样式03

弹性容器上的样式03<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性容器上的样式03</title> <style>

2021-02-20 20:46:48 102

原创前端的学习之路：初级CSS---弹性容器上的样式02

弹性容器上的样式02<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性容器上的样式02</title> <!-- <link rel="styl

2021-02-20 20:45:45 126

原创前端的学习之路：初级CSS---弹性容器上的样式01

弹性容器上的样式01<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性容器上的样式01</title> <!-- <link rel="styl

2021-02-20 20:44:24 131

原创前端的学习之路：初级CSS---弹性盒

弹性盒<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性盒</title> <!-- <link rel="stylesheet" href=".

2021-02-20 20:36:31 66

原创前端的学习之路：初级CSS---补充less

补充less//import 用来将其他的less引入到当前的less@import "12.01.04.less";.box1{ // 在less中所有的数值都可以直接进行运算 // + - * / width: 100px+100px; height: 100px*2; background-color: #bfa;}

2021-02-20 20:27:43 61

less混合函数// 混合函数在混合函数中可以直接设置变量.test(@w,@h){ width: @w; height: @h; border:1px solid red;}//还可以直接设置默认值//.test(@w:200px,@h:300px){// width: @w;// height: @h;// border:1px solid red;//}//div{// .test(300px);//这样宽度为300px，高度

2021-02-20 20:26:34 91

原创前端的学习之路：初级CSS---父元素和扩展

父元素和扩展.box1{ .box2{ color: red; } >.box3{ color: red; &:hover{ color: blue; //此时父元素为box3 } } // 为box1设置一个hover // &表示外层的父元素 &:hover{ // 此时父元素为box1

2021-02-20 20:24:49 177

原创前端的学习之路：初级CSS---less中的变量

less中的变量.box1{ .box2{ color: red; } >.box3{ color: red; &:hover{ color: blue; //此时父元素为box3 } } // 为box1设置一个hover // &表示外层的父元素 &:hover{ // 此时父元素为bo

2021-02-20 20:20:38 215

原创前端的学习之路：初级CSS---less 简介

less 简介<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>less 简介</title> <!-- <link rel="stylesheet"

2021-02-20 20:15:20 97

原创前端的学习之路：初级CSS---缩放

缩放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放</title> <!-- <link rel="stylesheet" href="../

2021-02-20 20:10:52 175

原创前端的学习之路：初级CSS---时钟原理练习

时钟原理练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时钟原理练习</title> <!-- <link rel="stylesheet" h

2021-02-10 16:16:28 347

原创前端的学习之路：初级CSS---时钟原理

时钟原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时钟原理</title> <!-- <link rel="stylesheet" href=

2021-02-10 16:12:01 124

原创前端的学习之路：初级CSS---旋转图片

旋转图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转图片</title> <!-- <link rel="stylesheet" href=

2021-02-10 16:00:34 282

原创前端的学习之路：初级CSS---旋转

旋转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转</title> <!-- <link rel="stylesheet" href="../

2021-02-10 15:46:46 215

原创前端的学习之路：初级CSS---Z轴平移

Z轴平移<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Z轴平移</title> <!-- <link rel="stylesheet" href=

2021-02-10 15:44:03 1267 1

原创前端的学习之路：初级CSS---变形平移

变形平移<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>变形平移</title> <!-- <link rel="stylesheet" href=

2021-02-10 15:38:38 143

原创前端的学习之路：初级CSS---动画(练习2)

动画(练习2)<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title

2021-02-10 15:34:54 100

原创前端的学习之路：初级CSS---关键帧

关键帧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关键帧</title> <!-- <link rel="stylesheet" href=".

2021-02-10 15:31:32 190

原创前端的学习之路：初级CSS---奔跑的少年(动画练习)

奔跑的少年(动画练习)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>奔跑的少年(动画练习)</title> <!-- <link rel="sty

2021-02-10 15:27:00 967

原创前端的学习之路：初级CSS---动画

动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</title> <!-- <link rel="stylesheet" href="..

2021-02-10 15:22:49 131

原创前端的学习之路：初级CSS---米兔练习

米兔练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>米兔练习</title> <!-- <link rel="stylesheet" href=

2021-02-09 20:33:26 972

原创前端的学习之路：初级CSS---过渡2

过渡2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡2</title> <!-- <link rel="stylesheet" href="

2021-02-09 20:28:44 76

原创前端的学习之路：初级CSS---过渡1

过渡1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡1</title> <!-- <link rel="stylesheet" href="

2021-02-09 20:25:07 104

原创前端的学习之路：初级CSS---径向渐变

径向渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>径向渐变</title> <!-- <link rel="stylesheet" href=

2021-02-09 20:08:32 131

原创前端的学习之路：初级CSS---线性渐变

线性渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线性渐变</title> <!-- <link rel="stylesheet" href=

2021-02-09 20:07:00 225

原创前端的学习之路：初级CSS---雪碧图

雪碧图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>雪碧图</title>  <style type="text/css">

2021-02-09 20:05:35 95

原创前端的学习之路：初级CSS---背景练习

背景练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景练习</title> <!-- <link rel="stylesheet" href=

2021-02-09 20:02:55 178

原创前端的学习之路：初级CSS---背景 2

背景 2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景2</title> <!-- <link rel="stylesheet" href="

2021-02-09 19:58:21 128

原创前端的学习之路：初级CSS---背景 1

背景 1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景 1</title> <!-- <link rel="stylesheet" href=

2021-02-09 19:50:46 75

原创前端的学习之路：初级CSS---其他的文本样式

其他的文本样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>其他的文本样式</title> <!-- <link rel="stylesheet"

2021-02-09 19:48:42 103

原创前端的学习之路：初级CSS---文本的水平和垂直对齐

文本的水平和垂直对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本的水平和垂直对齐</title> <!-- <link rel="style

2021-02-08 14:48:38 176

原创前端的学习之路：初级CSS---字体的简写属性

字体的简写属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体的简写属性</title> <!-- <link rel="stylesheet"

2021-02-08 14:42:03 193

原创前端的学习之路：初级CSS---行高

行高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行高</title> <!-- <link rel="stylesheet" href="../

2021-02-08 14:39:02 146

原创前端的学习之路：初级CSS---iconfont

iconfont<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iconfont</title> <link rel="stylesheet" href=

2021-02-08 14:31:28 653

原创前端的学习之路：初级CSS---图标字体的其他使用方式

图标字体的其他使用方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图标字体的其他使用方式</title> <!-- <link rel="sty

2021-02-08 14:28:09 119

原创前端的学习之路：初级CSS---图标字体

图标字体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图标字体</title></head><body> <!--

2021-02-08 14:25:01 107

原创前端的学习之路：初级CSS---字体族

字体族<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体族</title> <!-- <link rel="stylesheet" href=".

2021-02-08 14:22:55 291

原创前端的学习之路：初级CSS---元素的层级

元素的层级<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素的层级</title> <!-- <link rel="stylesheet" hre

2021-02-08 14:11:52 175

原创前端的学习之路：初级CSS---绝对定位的布局

绝对定位的布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位的布局</title> <!-- <link rel="stylesheet"

2021-02-08 14:08:44 154

原创前端的学习之路：初级CSS---固对定位

固对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固对定位</title> <!-- <link rel="stylesheet" href=

2021-02-08 14:01:02 139

空空如也

空空如也