前端就业实战第二阶段 CSS3
关注
分享
扫一扫
文章平均质量分 94
前端就业实战第二阶段 CSS3
1_bit
全网20w+粉丝、知名博主、CSDN博客之星、各大平台签约作者、评委、导师、嘉宾，超15年编程经验
InfoQ签约作者
动漫系列编程作者
自媒体程序员
2021Infoq社区年度社区荣誉共建奖
51、InfoQ专家
2021年火爆C站的大话教程作者
展开
-
一张图不用，纯CSS 做个生日贺卡
朋友生日了，直接画，炫技并且表示本人闲的全身疼才会去拿CSS画画，以此嘲弄对方的加班：既然贺卡做出来了，那就顺便介绍一下贺卡制作流程吧，其实也不是什么技术，也就是CSS 拼拼拼就可以了，简简单单。注：本篇内容无法逐一进行讲解，只是讲一下大概思路，之后会单独把元素作为讲解内容并且完善元素使其更加美观。首先这个贺卡是网页居中的，那么直接给予一个 flex 不就好了？直接给 body ：那么接下来我们的海报是有一个外边框的，这个做起来也和粘单，直接先给予外部一个 div，然后写一个样式叫做 happy-bor原创 2022-06-08 21:50:38 · 12563 阅读 · 6 评论 -
700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》
今天才想起来这回事，没办法就急急忙忙的赶工一下，接下来我就画一下这个海报试试手了：先给整个网页制作一个布局吧，直接 flex 搞定，并且使其居中 justify-content、align-items 都要赋值为 center：接下来直接创建一个 div ，给予一个 demo 样式：那么此刻咱们需要做的准备工作就搞定了，那么接下来咱们就在这个框内画东西：首先咱们就先画一个云朵吧，云朵就在粽子的脚底下，制作起来很简单；哦，提一下，为了简单（主要是懒），就直接在 style 标签中添加样式吧。我们先看一下一原创 2022-06-04 21:47:25 · 10526 阅读 · 1 评论 -
【CSS动效实战（纯CSS与JS动效）】03 精美手风琴侧边栏完整示例教程 示例1
本节示例演示：一般来说，侧边栏的位置是在左侧，咱们为了更好的展现侧边栏的效果，并且在本节中不涉及过多的内容，我们只需要直接给一个 div 宽度为 15即可，接着再到这个 div 中编写对应的侧边栏。给予一个 nav 样式，设置宽度为 15%，并且给予一些基础样式，使其呈现有一定的对比度：此时页面效果如下：有了基本布局后，开始着手编写侧边栏。从这个侧边栏我们可以明显的知道，侧边栏顶部是 logo 区，或者你放其他的也行，logo 之下就是对应的菜单，那么侧边栏的内容就分为两块，一个上一个下，并且这一上一原创 2022-09-11 05:15:41 · 1345 阅读 · 0 评论 -
【CSS动效实战（纯CSS与JS动效）】02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探
首先，我们在编辑器中，写上基础代码，当然要在 style 中加上一个 flex 类，用于 flex 布局的定义，这个是必然需要的，在此一定得加上。1.1 JD 基本布局基础代码有了，我们直接看 jd 的布局。我们首先查看当前 JD 首页的头部：在此我们可以将其图中部分看成一个整体，我们不在乎其内部实现细节，我们此时只需要将这个页面的整体布局划分，那么再到每个块之间对其内部元素进行再一次的细分即可。在此我们将头部看成是一个整体后，再往下看，我们可以将其看做是一个另一个整体，那么整个 flex 布局的方原创 2022-09-10 18:18:39 · 985 阅读 · 0 评论 -
【CSS动效实战（纯CSS与JS动效）】02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探 下
首先查看我们的页面：这个时候直接顶部一个块，下面分为左中右三个块，然后就解决了，是不是很简单？相比刚刚那么这个简单多了。那就来做吧。首先给一个 style 价格 flex，一样的开头：接着 给予 body flex 样式，并且由于当前 flex 是竖着的，那么给予一个 cloumn 样式确定方向还有对应的背景色、边距等，这些都不存在什么疑问吧？学过上一小节的都看得懂吧，代码如下：那么接下来咱们就在 body 里面新建两个 div：此时页面效果如下：一点问题没有，那么接下来在内容的div 里新建原创 2022-09-10 18:17:24 · 768 阅读 · 0 评论 -
CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战（07）
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。transform-origin 表示当前元素的基点，使用 transform-origin 可以对目标元素的基点进行设置，在 3D 效果中，transform-origin 可以灵活运用制作出非常舒服的动态效果，给你的页面增加不少的分数。以下是一个基础的 trans原创 2022-08-04 04:42:07 · 2958 阅读 · 2 评论 -
HTML Animation 【前端就业课 第二阶段】CSS 零基础到实战（06）
一、Animation 基础使用 Animation 可以设置帧动画，与 transition 区别于 transition 需要有状态对齐变换效果进行激活，而 Animation 则不用，并且 Animation 可以设置多个时间段的关键帧状态，但 transition 只有起始与最终的两个状态。Animation 使用 @keyframes 定义其动画的关键帧内容，例如在其状态中的 1% 位置当前动画是什么状态，又或者 10%、30%以及100%最终状态如何，我们以下使用一个示例来说明：<原创 2022-08-02 11:26:46 · 733 阅读 · 0 评论 -
CSS 零基础到实战（05）布局、盒子模型、弹性盒子【前端就业课 第二阶段】
一、流动布局流动布局有3种布局模型，分别是流动布局（常规默认时）、定位布局（relative）以及浮动布局，其中所述的流动布局、定位布局已在第一点讲解，接下来咱们查看浮动布局。1.1浮动布局浮动布局的属性为 float，其值可以是 float 或 right，设置浮动布局后将会影响左右相邻元素，并且会脱离文档流但却受文档流影响。首先我们查看以下示例：<head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2022-07-30 08:57:58 · 854 阅读 · 0 评论 -
【前端就业课 第二阶段】CSS 零基础到实战（04）定位
一、定位定位分为相对定位以及绝对定位。相对定位可以理解为在 HTML 中，元素会依照原有的顺序进行显示，通过相对距离（例如左右距离多少）的方式使这些元素进行位置的显示。绝对定位可以理解为，在 HTML 中，元素并不会按照有序的方式进行排列，需要依靠自身给予的定位信息决定元素出现在 HTML 页面中的位置。1.1 文档流我们在了解定位前，需要了解什么是文档流。在 HTML 中，默认情况下一个网页是多个元素从上而下自动进行排列而成，并且是一行一行组成，这些行中的元素则是从左往右默认进行排列，当元素超原创 2022-07-25 15:01:08 · 691 阅读 · 0 评论 -
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
本节案例如下（其他动效篇幅原因逐步讲解，欢迎三连）：一、线性渐变1.1 渐变分类在 CSS 中，使用渐变色需要用到 gradient 属性，而 gradient 属性分为 线性渐变 linear-gradient 与 径向渐变 radial-gradient。线性渐变 和 径向渐变的不同在于渐变色方向不同，线性渐变的渐变方向可以指定为 上下左右、角度以及对角渐变，径向渐变的方向则是基于某个中心点。例如咱们使用一个线性渐变给定渐变方向为上下，渐变色为红橙，那么可以写成：<style>原创 2022-07-19 01:18:18 · 10266 阅读 · 1 评论 -
【前端就业课 第二阶段】CSS 零基础到实战（03）前端 CSS 动效 transition transform
一、动态效果 transition、transform1.1 transition 动效（过渡）在网页中，常规的静态页面感觉过于单调，此时可以使用动态效果为其页面增加效果，丰富网页表现，在此咱们需要使用 transition 属性。在介绍 transition 前我们假定有一个需求：当鼠标移动到某一个 div 时，使 div 可以更改其宽度例如如下 html 代码：<!DOCTYPE html><html lang="en"><head> <me原创 2022-05-14 16:12:30 · 3053 阅读 · 0 评论 -
【前端就业课 第二阶段】CSS 零基础到实战（02）列表
第一篇：一、块元素、行内元素、行内块元素在学习CSS时，我们需要搞清楚HTML 标签的一些分类，HTML 一般可分为块元素、行内元素以及行内块元素，不同的种类在呈现上有着不同的表现形式。1.1 块元素块元素有比较多的特性，例如在 HTML 页面中的呈现为独占一行，例如标题标签 <h1>、<h2>、<h3> 这些，当然也包括 <li> 标签元素这一类，这一类标签在页面中独占一个行，你在后面所编写的内容将会自动换行显示。例如如下代码，即时你并排显示也会进行原创 2022-05-05 15:13:40 · 2381 阅读 · 0 评论 -
【前端就业课 第二阶段】CSS 零基础到实战（02）标签类型、字体与图片
一、块元素、行内元素、行内块元素在学习CSS时，我们需要搞清楚HTML 标签的一些分类，HTML 一般可分为块元素、行内元素以及行内块元素，不同的种类在呈现上有着不同的表现形式。1.1 块元素块元素有比较多的特性，例如在 HTML 页面中的呈现为独占一行，例如标题标签 <h1>、<h2>、<h3> 这些，当然也包括 <li> 标签元素这一类，这一类标签在页面中独占一个行，你在后面所编写的内容将会自动换行显示。例如如下代码，即时你并排显示也会进行自动换行，原创 2022-05-06 14:40:09 · 2968 阅读 · 2 评论