- 博客(37)
- 收藏
- 关注
RSS订阅原创 CSS-支付宝小案例-用弹性盒实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-05-27 16:10:41
374
原创 CSS-项目-调整顺序
代码段：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
2022-05-23 17:09:24
570
原创 CSS-弹性盒子-主轴侧轴对齐方式
除了主轴和侧轴之外的弹性盒子相关元素以后再发文补齐，本章是弄清楚主侧轴的概念为主一、基本概念在开始之前，我们需要了解 Flex 和 主轴以及交叉轴（侧轴）别分是什么：1.首先是Flex:Flex是Flexible Box的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。采用Flex布局的元素，称为Flex容器(flex container),简称“容器”。它所有的子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。.
2022-05-17 13:45:54
5634
原创 弹性盒子-修改主轴方向
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2022-05-16 18:03:18
1382
原创 CSS-弹性盒子
/弹性盒子 影响： 1.子元素默认横向排列，但与浮动不同 2.行内元素，变成了块级元素，变得可以设置宽高了 3.在弹性盒子中，想要让其中的子盒子在水平和垂直方向居中，那么除了绝对定位之外，还可以直接加margin：auto； 写了之后，子盒子就直接显示在大盒子中间了
2022-05-16 17:36:13
129
原创 CSS3-IE/怪异盒子模型
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
2022-05-16 09:40:54
96
原创 CSS-字体引入
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
2022-05-14 22:25:07
214
原创 CSS-圆角案例
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title.
2022-05-13 17:08:34
148
原创 CSS-圆角边框
掌握了圆角边框的内容就可以做出类似百度搜索框的效果来代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in.
2022-05-12 11:06:15
2127
原创 CSS-盒子阴影
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
2022-05-11 11:07:24
142
原创 H5新增音频标签
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2022-05-10 11:45:27
155
原创 CSS-文本阴影
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2022-05-10 11:38:48
147
原创 CSS3选择器-否定和动态伪类选择器
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
2022-05-10 09:17:39
135
原创 CSS3选择器-UI元素状态伪类选择器
UI元素状态伪类选择器E：enabled 匹配所有用户界面（form表单）中处于可用状态的E元素E：disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素E：checked 匹配所有用户界面（form表单）中处于选中状态的E元素E：selection 匹配E元素中被用户选中或处于高亮状态的部分代码：<!DOCTYPE html><html lang="en"><head> <meta charset=".
2022-05-09 17:18:46
635
原创 CSS-锚点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-05-09 15:54:06
2276
原创 CSS3-结构伪类选择器
1、结构伪类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2022-05-09 10:09:31
315
原创 CSS3-属性选择器
属性选择器代码段：[class]{}表示凡是有class类的元素或标签都能设置<style> /* 属性选择器[class] */ [class]{ background: yellowgreen; } /* 中括号加上class，表示只要是有class属性的，都可以设置上背景颜色 */ </style></head><body>
2022-05-08 21:51:30
178
原创 CSS3基础和层级选择器
一、CSS3基础二、层级选择器（1）子代选择器<style> /* .box1 li{ border: 1px solid hotpink; } 这么写会给所有的后代都加上边框线（包括子二代） */ /* 子代选择器 */ .box1>li{ border: 1px solid indigo; } /* 给它..
2022-05-08 16:00:00
643
原创 H5新增-增强表单-属性
<form action=""><div> 用户名：<input type="text" autofocus required pattern="[0-9][A-Z]{3}"> <!-- autofocus 自动聚焦/自动获取焦点 加多个autofocus只会取第一个生效--> <!-- required 给标签加上必填项--></div><div> 邮箱：<input ..
2022-05-07 10:26:57
132
原创 增强表单-数据列表
<input type="text" list="mylist"> <datalist id="mylist"> <option value="手机"></option> <option value="手环"></option> <option value="手套"></option> <option value="手镯"&g...
2022-05-07 08:22:41
79
原创 H5新增-增强表单
<!-- 颜色选择 --> <form action=""> <!-- 发送给后端要加上form --> <div>颜色选择：<input type="color" name="color"></div> <input type="submit"> <!-- 加上按钮 --> <div>...
2022-05-06 16:39:25
126
原创 H5新增视频标签
<style> video{ width: 400px; height: 300px; } </style> <!-- 通过css也可以设置video的宽高 --></head><body> <h1>视频</h1> <!-- <video src="../mp4/104.mp4" co.
2022-05-06 11:35:40
232
原创 H5新增音频标签-audio
<body> <p>之前的霸主flash，由于安全性、计算机资源使用效率低，被抛弃了</p> <h1>音频</h1> <h3>河图-倾尽天下</h3> <audio src="../wav/01河图-倾尽天下.wav" controls="controls" loop autoplay muted>Audio元素 定义音频</audio> &l...
2022-05-06 09:48:20
2216
原创 H5新增语义化标签-2
<header>header</header> <section> <!-- 页面中的主体部分 --> <nav> <!-- 导航栏 --> <figure> <!-- 用于包裹独立的内容 --> nav </figure> <ul> .
2022-05-06 08:13:05
177
原创 表单进阶-字段集
<style> fieldset{ border: 1px solid burlywood; /* 改变字段集的边框线颜色 */ /* width: 300px; height: 300px; 也可进行宽高的设置 */ } legend{ border:..
2022-04-28 15:20:46
244
原创 趁手兵器-VScode
前端的工具个人推荐VScode 1、VS code功能 Visual Studio Code是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。 2、插件管理 vscode新到目前位置,内置了插件安装功能,在编辑器右侧有一个插件中心的按钮,可以方便的安装,升级,卸载...
2022-04-20 09:00:47
128
原创 CSS-表单进阶-单选框
<h1>表单进阶-单选框</h1> <div>你对于京东首页的满意度如何</div><br> <div> <!-- <input type="text"> type="text" 普通的文本输入框 --> <input type="radio" name="c.
2022-04-18 17:14:11
1045
原创 关于前端-行业介绍
“前端，又称Web前端，是指计算机Web应用程序（网站）的前台页面，在我们打开一个网站所看到网页界面的内容一级交互体验，一般都是由前端工程师开发设计的页面，该内容属于前端部分。如，使用小程序开发者工具开发的这一部分代码，是属于前端部分。小程序开发是前后分离的，获取动态数据是通过后端的API进行请求。”如果你在度娘上搜索前端的话，应该可以看到如上的一段解释。前端的核心技术主要是HTML、CSS、Javascript，这也是走前端路线必须要掌握的基础，属于前端路上的基石。简单来说，HTML好比是
2022-04-15 16:36:19
1766
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人