TypechoJoeTheme

Lonhaiy的个人博客

登录
用户名
密码

Lonhaiy

如果结果不如你所愿，就在尘埃落定前奋力一搏
网站页面
类目归类
标签搜索

最新文章

2022-08-26

CSS Grid 网格布局教程
CSS Grid 网格布局教程
CSS Grid 网格布局教程了解更多请访问 https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html一、基本概念1、容器和项目采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。<div class="grid-container"> <div class="grid-item"><span>item1</span></div> <div class="grid-item"><span>item2</span></div> <div class="grid-item"><span>item3</span></div> <div class="grid-item&quo...
2022年08月26日
493 阅读
0 评论
2022-08-26

CSS Flex 布局语法教程
CSS Flex 布局语法教程
Flex 布局语法教程一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做mai...
2022年08月26日
418 阅读
0 评论
2022-08-26

CSS Position(定位)详解
CSS Position(定位)详解
CSS Position(定位)详解CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位，粘性定位这五种，定位有不同的参数，例如：left、right、top、bottom、z-index等。一、position 属性指定了元素的定位类型。position 属性的五个值：static（静态定位）relative（相对定位）absolute（绝对定位）fixed（固定定位）sticky（粘性定位）1、static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。<style> div.static { position: static; border: 3px solid #73AD21; } </style> <p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p> <div class="st...
2022年08月26日
549 阅读
0 评论
2022-08-26

CSS 盒子模型理解
CSS 盒子模型理解
css 盒子模型理解一、css盒子模型概念css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。实例div { width: 300px; border: 5px solid green; padding: 15px; margin: 25px; }图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin）,整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。元素框的总宽度 = 元素（element）的width + padd...
2022年08月26日
465 阅读
0 评论
2022-08-26

CSS 常用伪类简介
CSS 常用伪类简介
CSS 常用伪类简介CSS伪类是用来添加一些选择器的特殊效果，伪类包含两种：状态伪类（UI伪类）和结构性伪类。(1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：:link应用于未被访问过的链接；:hover应用于鼠标悬停到的元素；:active应用于被激活的元素；:visited应用于被访问过的链接，与:link互斥。:focus应用于拥有键盘输入焦点的元素。:target应用于链接点击后指向元素实例a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS ...
2022年08月26日
435 阅读
0 评论
2022-08-26

HTML 表单内容的详细介绍
HTML 表单内容的详细介绍
HTML表单内容的详细介绍HTML 表单是用于搜集不同类型的用户输入的，表单是一个包含表单元素的区域；表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素；表单使用表单标签（）定义。一、介绍1、表单概念表单最重要的表现是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据，从技术的概念上说，表单就是用来操作form对象，对象是一种基本的数据类型2、创建表单表单通过标签来创建，其中放置表单的对象，如表单域、按钮和其他事物，标签中可扩展几个属性a.action属性通过标签定义的表单里面必须有action属性才可以将表单中的数据递交上去 <form action="check.php"> </form>以上代码表示这个表单的作用是用来提交到check.php这个页面的数据b.method属性该属性的作用是告诉浏览器数据是以何种方式提交上去的，该属性下有两个选择："get"和"post"。默认情况下，数据被提交的方式是get，表单域中输入的内容会添加在action指定的URL中，当表单提交后用户便...
2022年08月26日
441 阅读
0 评论
Lonhaiy
如果结果不如你所愿，就在尘埃落定前奋力一搏
20 文章数
5,736 评论量

人生倒计时

今日已经过去小时
这周已经过去天
本月已经过去天
今年已经过去个月
2021 - 2022 © Reach - Joe
湘ICP备2021019990号-1