CSS
骑猪西征
这个作者很懒,什么都没留下…
展开
-
CSS-移动端
CSS-移动端布局需要了解的基础知识原创 2022-06-29 15:49:18 · 125 阅读 · 0 评论 -
CSS-弹性盒子-主轴侧轴对齐方式
除了主轴和侧轴之外的弹性盒子相关元素以后再发文补齐,本章是弄清楚主侧轴的概念为主一、基本概念在开始之前,我们需要了解 Flex 和 主轴以及交叉轴(侧轴)别分是什么:1.首先是Flex:Flex是Flexible Box的缩写,意味“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它所有的子元素自动成为容器成员,称为Flex项目(flex item),简称“项目”。.原创 2022-05-17 13:45:54 · 5520 阅读 · 0 评论 -
弹性盒子-修改主轴方向
代码:<!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 · 1349 阅读 · 0 评论 -
CSS-弹性盒子
/弹性盒子 影响: 1.子元素默认横向排列,但与浮动不同 2.行内元素,变成了块级元素,变得可以设置宽高了 3.在弹性盒子中,想要让其中的子盒子在水平和垂直方向居中,那么除了绝对定位之外,还可以直接加margin:auto; 写了之后,子盒子就直接显示在大盒子中间了原创 2022-05-16 17:36:13 · 105 阅读 · 0 评论 -
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 · 75 阅读 · 0 评论 -
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 · 179 阅读 · 0 评论 -
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 · 126 阅读 · 0 评论 -
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 · 2033 阅读 · 0 评论 -
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 · 107 阅读 · 0 评论 -
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 · 132 阅读 · 0 评论 -
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 · 120 阅读 · 0 评论 -
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 · 611 阅读 · 0 评论 -
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 · 2224 阅读 · 0 评论 -
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 · 283 阅读 · 0 评论 -
CSS3-属性选择器
属性选择器代码段:[class]{}表示凡是有class类的元素或标签都能设置<style> /* 属性选择器[class] */ [class]{ background: yellowgreen; } /* 中括号加上class,表示只要是有class属性的,都可以设置上背景颜色 */ </style></head><body>原创 2022-05-08 21:51:30 · 147 阅读 · 0 评论 -
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 · 105 阅读 · 0 评论 -
增强表单-数据列表
<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 · 61 阅读 · 0 评论 -
表单进阶-字段集
<style> fieldset{ border: 1px solid burlywood; /* 改变字段集的边框线颜色 */ /* width: 300px; height: 300px; 也可进行宽高的设置 */ } legend{ border:..原创 2022-04-28 15:20:46 · 217 阅读 · 0 评论 -
CSS-表单进阶-下拉菜单
CSS-表单进阶-下拉菜单原创 2022-04-22 10:47:14 · 568 阅读 · 0 评论 -
CSS-表单进阶-上传文件和隐藏字段
CSS-表单进阶-上传文件和隐藏字段原创 2022-04-21 15:56:21 · 1182 阅读 · 0 评论 -
CSS-表单进阶-单选框
<h1>表单进阶-单选框</h1> <div>你对于京东首页的满意度如何</div><br> <div> <!-- <input type="text"> type="text" 普通的文本输入框 --> <input type="radio" name="c.原创 2022-04-18 17:14:11 · 1016 阅读 · 0 评论