自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(15)
  • 收藏
  • 关注

原创 弹性盒子布局,flex布局

弹性盒子布局(Flexbox)是CSS3引入的一种新的布局模式,它提供了一种更加有效的方式来设计、布局和对齐容器中的项目,即使容器的大小动态改变或者项目的数量未知。弹性盒子布局的主要特点是能够轻松地在不同的屏幕大小和设备上实现一致的布局,通过为父容器(弹性容器)设置或来定义。弹性容器内的子元素(弹性项)会自动成为容器的成员,并按照弹性盒子的规则进行布局。:弹性盒子布局可以轻松地适应不同屏幕尺寸和设备,无论是桌面设备还是移动设备。:可以设置主轴的方向(水平或垂直),从而决定弹性项是水平排列还是垂直排列。

2024-05-25 21:28:45 813

原创 CSS3新增特性

CSS3 引入了过渡(transition)属性,它允许你在元素从一个样式逐渐改变为另一个样式的过程中添加动画效果。这种效果可以在元素的 CSS 属性值发生变化时平滑地过渡,而不是立即改变。CSS 过渡通常包含以下几个属性:transition-property: 指定应用过渡的 CSS 属性名称。你可以指定一个或多个属性,或者使用all表示所有可过渡属性。transition-duration: 定义过渡效果花费的时间,以秒(s)或毫秒(ms)为单位。transition-timing-f

2024-05-08 22:33:14 2320 1

原创 HTML5--新增特性

HTML5引入了许多新的语义化标签,如<article><section><nav><header><footer>等。这些标签能够更好地描述和组织网页内容,提高SEO和网站的可访问性。header:头部标签 nav:导航标签 article:内容标签 aside:侧边栏标签 footer:尾部标签section:定义文档某个区域。

2024-05-02 22:43:30 966 1

原创 CSS 高级技巧

如果遇到一些结构和样式比较简单的小图标,就用字体图标。如果遇到一些结构和样式复杂一点的小图片,就用精灵图。

2024-05-01 22:21:49 127

原创 元素的显示与隐藏

在CSS中,overflow是一个重要的属性,用于控制当元素的内容超出其指定尺寸或容器尺寸时应该如何处理。它规定了当内容溢出元素框时发生的事情,例如内容是否会被修剪,溢出部分是否会被隐藏等。overflow属性有四个可能的值:visible(默认值):内容不会被修剪,会呈现在元素框之外。hidden:内容会被修剪,并且其余内容是不可见的,不会显示滚动条。scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容,即使内容没有超出容器的大小。auto:浏览器会根据需要自动显示滚动条。如

2024-04-22 20:37:18 342

原创 CSS 定位

CSS定位允许你控制元素在页面上的位置。CSS提供了多种定位方式,包括静态定位、相对定位、绝对定位和固定定位。:这是元素的默认值,即如果你没有为元素指定定位属性,那么它就使用静态定位。静态定位的元素不受 top, bottom, left, right 这些属性的影响。元素相对于其正常位置进行定位。因此,"left:20px" 会向元素的左边添加 20 像素。:元素相对于最近的已定位父元素(即设置了 position 属性的父元素)进行定位。如果没有已定位的父元素,那么它会相对于初始包含块进行定位。

2024-04-21 16:09:32 1679 1

原创 CSS浮动

CSS浮动(Float)是CSS中的一个重要特性,主要用于控制元素的布局和定位。通过设置元素的float属性,可以使元素向左或向右移动,其周围的元素也会重新排列。浮动通常用于创建文本环绕效果,或者在布局中让元素并排显示。

2024-04-14 15:40:36 998 1

原创 CSS盒子模型

CSS盒子模型是CSS中描述网页布局的基本概念之一。它将每个HTML元素看作是一个矩形的盒子,这个盒子包含了内容、内边距、边框和外边距,共四个部分。这些部分构成了盒子的整体结构,通过调整它们的大小和样式,可以实现对网页布局的控制。:内容框是盒子中实际包含内容的部分,例如文字、图片等。内容框的大小可以通过设置元素的width和height属性来控制。:内边距框围绕在内容框外部,用于定义内容与边框之间的空白区域。可以通过设置padding属性来调整内边距的大小。:边框框位于内边距框的外部,用于显示元素的边框。

2024-04-08 22:35:42 834

原创 CSS层叠样式--基础

CSS,全称为层叠样式表(Cascading Style Sheets),是一种用来描述网页文件(HTML、XML等)样式和布局的标记语言。通过使用CSS,可以控制元素的外观、排版、颜色、字体等方面的表现,使网页具有更好的可读性、可访问性和视觉效果。CSS 的设计目的是将文档内容(如HTML元素)与其样式(如颜色、字体、布局)分离,从而实现内容和表现的分离。这样做使得网页维护更加方便,可以通过修改一处CSS样式来改变整个网站的外观,而不需要逐个修改每个页面。

2024-03-31 22:20:49 690 1

原创 CSS继承性-行高的继承性

子元素可以通过显式设置自己的行高来覆盖从父元素继承的行高。此外,行高的继承也受到CSS优先级和层叠性的影响,即如果有多个样式规则同时作用于一个元素,那么最终的行高值将取决于这些规则的优先级和层叠顺序。例如,如果父元素的行高设置为1.5(这通常是相对于字体大小的倍数),那么子元素的行高也会是1.5倍,这有助于保持文本在不同元素之间的垂直对齐和视觉一致性。简单来说,如果一个元素(父元素)设置了行高(line-height),那么它的子元素会继承这个行高值,除非子元素本身也设置了行高。

2024-03-31 21:54:11 389 1

原创 单行文字垂直居中的原理

就可以让文字在当前盒子内垂直居中;让文字的行高等于盒子的高度。单行文字垂直居中代码。

2024-03-27 21:13:33 173

原创 CSS复合选择器

复合选择器在CSS中扮演着非常重要的角色,它允许开发者通过组合不同的选择器来更精确、更高效地选择目标元素(标签)。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的,常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等。使用复合选择器可以大大提高CSS代码的可读性和可维护性,同时也能减少代码的冗余。通过精确选择目标元素,开发者可以更有效地控制页面的样式表现,提升用户体验。

2024-03-25 21:28:29 437 1

原创 表格标签案例

【代码】表格标签案例。

2024-03-23 16:43:44 219 2

原创 表单案列实践

【代码】表单案列实践。

2024-03-23 16:43:24 160 2

原创 HTML基础

关注我们新浪微博官方微信联系电话

2024-03-23 16:42:47 1577 3

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除