CSS3详解
文章平均质量分 64
小黑神zxs
经历风雨遇彩虹
展开
-
CSS学习18之小试牛刀
小试牛刀到现在为止,我们已经将css要学习的初级中级高级知识都已经学完了,接下来我们就应该对自己做一个小测验了,以下就是我的小测验,模拟qq会员官网的头部栏!素材bg.png背景图logo.png 企鹅logo图qqvip官网头部栏示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>qq会员官网头部栏</tit原创 2022-03-22 19:01:23 · 434 阅读 · 0 评论 -
CSS学习17之动画
回顾z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 可用于将在一个元素放置于另一元素之后。动画动画使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画,必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。@keyframes 规则如果在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。要使动画生原创 2022-03-22 19:00:20 · 406 阅读 · 0 评论 -
CSS学习16之层级
回顾定位position 属性规定应用于元素的定位方法的类型定位分为相对定位和绝对定位层级示例z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 可用于将在一个元素放置于另一元素之后。html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2022-03-16 14:05:02 · 1079 阅读 · 0 评论 -
CSS学习15之定位
回顾display 属性display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。浮动和清除浮动CSS 布局 - 浮动和清除CSS float 属性规定元素如何浮动。CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。定位position 属性规定应用于元素的定位方法的原创 2022-03-09 14:44:54 · 165 阅读 · 0 评论 -
CSS学习14之display和浮动
Display和浮动display 属性display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。浮动和清除浮动CSS 布局 - 浮动和清除CSS float 属性规定元素如何浮动。CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。示例代码<!DOCTYPE原创 2022-02-17 04:00:00 · 650 阅读 · 0 评论 -
CSS学习13之圆角边框及阴影
回顾盒子模型盒子模型它的学名为框模型!但是我觉得叫它盒子模型更加贴切,方便理解!CSS 框模型所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。圆角边框示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2022-02-16 04:00:00 · 1707 阅读 · 0 评论 -
CSS学习12之盒子模型
盒子模型盒子模型它的学名为框模型!但是我觉得叫它盒子模型更加贴切,方便理解!CSS 框模型所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。示例仿京东前端登录页面(仅模仿练习,无意冒犯)代码<!DOCTYPE html><html lang="en"><head> <meta ch原创 2022-02-15 04:00:00 · 405 阅读 · 0 评论 -
CSS学习11之背景和渐变
回顾列表格式默认是实心圆使用 list-style: 值;修改列表样式none 去掉圆点circle 空心圆square 实心方块decimal 数字标记背景和渐变CSS 背景属性用于定义元素的背景效果。CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit原创 2022-02-15 03:00:00 · 388 阅读 · 0 评论 -
CSS学习10之列表
回顾超链接伪类(我们常用的就这两个):hover 鼠标悬停active 鼠标选择(按压)简单应用代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接伪类</title> <style> a{ text-decoration: none;原创 2022-02-14 04:00:00 · 215 阅读 · 0 评论 -
CSS学习09之超链接伪类
回顾文字图片水平对齐img,span{ border: red solid 2px; /*水平对齐*/ vertical-align: middle;}超链接伪类超链接伪类(我们常用的就这两个):hover 鼠标悬停active 鼠标选择(按压)简单应用相信大家淘宝都在用,一些商品的格式那叫司空见惯。这一次我们模拟一个书籍这个商品的简单出售界面。代码<!DOCTYPE html><htm原创 2022-02-13 04:00:00 · 1766 阅读 · 0 评论 -
CSS学习08之图片样式
回顾文字样式:文字设置设置文字的风格,大小,粗细,字体span标签把一些比较重要的文字我们用span便签框起来图片和文字混合样式代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片样式</title> <style> /*简写边框属性*/ div{原创 2022-02-12 20:20:53 · 1189 阅读 · 0 评论 -
CSS学习07之字体样式
回顾属性选择器为带有属性的 HTML 元素设置样。顾名思义可以设置带有特定属性或属性值的 HTML 元素的样式。使用方式属性选择器:元素类型[属性名=属性值(正则)]字体样式和span标签(追加)文字设置设置文字的风格,大小,粗细,字体span标签把一些比较重要的文字我们用span便签框起来span标签的简单应用代码<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2022-02-12 04:00:00 · 795 阅读 · 0 评论 -
CSS学习06之属性选择器
回顾结构伪类选择器有很多种伪类,列举常用的几种方式:first-child 伪类hover悬停伪类nth-of-type() 伪类nth-child()伪类属性选择器(重要)为带有属性的 HTML 元素设置样。顾名思义可以设置带有特定属性或属性值的 HTML 元素的样式。使用方式属性选择器:元素类型[属性名=属性值(正则)]示例<!DOCTYPE html><html lang="en"><head> <meta chars原创 2022-02-11 05:00:00 · 590 阅读 · 0 评论 -
CSS学习05之结构伪类选择器
回顾基本选择器又分为三种方式:后代选择器子选择器相邻选择器通用选择器结构伪类选择器结构伪类选择器有很多种伪类,这里我们列举常用的几种方式方式:first-child 伪类hover悬停伪类nth-of-type() 伪类nth-child()伪类示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>结构伪类选择原创 2022-02-10 19:15:09 · 401 阅读 · 0 评论 -
CSS学习04之层次选择器
回顾什么是选择器在 CSS 中,选择器是选取需设置样式的元素的模式。选择器的作用CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。方便我们对元素添加样式。层次选择器基本选择器又分为三种方式:后代选择器子选择器相邻选择器通用选择器示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层次选择器&l原创 2022-02-10 19:02:00 · 478 阅读 · 0 评论 -
CSS学习03之基本选择器
回顾有三种插入样式表的方法:外部 CSS<!--外部样式link,还有一种@import url=""--><link rel="stylesheet" href="css/style.css">内部 CSS<!--内部样式--> <style> h2{ color: green; } </style>行内 CSS<!--行内样式:在标签元原创 2022-02-10 18:49:10 · 393 阅读 · 0 评论 -
CSS学习02之css导入方式
回顾什么是 CSS?CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML元素 CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素(HTML美颜)。三种使用 CSS 的方法有三种插入样式表的方法:外部 CSS<!--外部样式link,还有一种@import url=""--&g原创 2022-02-09 21:40:54 · 478 阅读 · 0 评论 -
CSS学习01之我的第一css程序
新的开始学习完html,我们开始踏上新的征程。没错这个新的征程就是CSS3,它和html5息息相关!接下来让我们来了解CSS3吧!什么是CSS什么是 CSS?CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML元素 CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素(HTML美颜)。原创 2022-02-09 21:28:17 · 544 阅读 · 0 评论