Rossy Yan的博客

蓝桥为了帮助大家学习，开发了一个知识汇总网站，现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。​准备步骤├── css│ └── style.css├── data.txt├── index.html└── mark.pngcss/style.css 是样式文件。data.txt 是页面数据文件。index.html 是主页面。mark.png 是页面参数标注图。cd /home/projectwget https://labfile.oss.aliyun

厨房里新到一批蔬菜，被凌乱地堆放在一起，现在我们给蔬菜分下类，把相同的蔬菜放到同一个菜板上，拿给厨师烹饪美味佳肴吧。​准备步骤├── css│ └── style.css├── images└── index.htmlcss/style.css 是需要补充代码的样式文件。images 是图片文件夹。index.html 是主页面。cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/02.zip

由爱拼社举办的拼图大赛进行到最后一关，1 号选手小蓝披荆斩棘成为全场黑马。本关卡需要选手使用 CSS Grid 布局完成拼图页面，但是由于小蓝技术水平有限，拼图的效果没有达到预期。现在邀请你作为协助嘉宾帮助小蓝优化拼图页面的效果。本题需要在已提供的基础项目中，使用 CSS 让拼图正确显示。​准备步骤├── css│ └── style.css├── images└── index.html目标效果要求规定请勿修改 css/style.css 文件外的任何内容。请严格按照考试步

"地球漫游"：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。​准备步骤├── css│ └── style.css└── index.htmlindex.html 是主页面。css/style.css 是需要补充代码的 css 文件。cd /home/projectfile="earth" && wget "https://labfile.oss.aliyuncs.

日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。本题请实现一个顶栏固定的课程网站首页。

响应式布局是在 2010 年 5 月份提出的一个概念，这个概念是为解决移动互联网浏览而诞生的。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。通过响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。因此越来越多的设计师采用这个技术。本题需要在已提供的基础项目中，使用 CSS 或者 DOM 操作达到 Menu 和内容页自适应的效果。​准备步骤├── css│ └── style.css├── i

随着人们生活水平的日益提升，电影院成为了越来越多的人休闲娱乐，周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近日，又有一个电影院正在做着开张前期的准备，小蓝作为设计工程师，需要对电影院的座位进行布局设计。本题需要在已提供的基础项目中，使用 CSS 达到对电影院排座位的目的。

师徒四人一行向西天拜佛求经，不料中途被妖怪施了法术动弹不得！俗话说救人一命胜造七级浮屠！情急之下小蓝挺身而出，灵机一动，用css行善施救，让师徒西行而去，从而普渡众生，善哉，善哉！​准备步骤├── images │ ├── background.webp│ ├── west_01.png│ ├── west_02.png│ ├── west_03.png │ └── west_04.png└── index.htmljs/echarts.js 是 ECharts

网站上为了让内容显示不臃肿，我们可以做一个折叠展开的效果。本题将使用 CSS3 实现元素呈扇形展开的效果。​准备步骤├── css│ └── style.css├── effect.gif└── index.htmlcss/style.css 是样式文件。effect.gif 是最终实现的效果图。index.html 是主页面。cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/02.zip &

CSS3 的 Flex 弹性布局和 Grid 网格布局已经成为前端页面排版的主流选择。本次挑战将使用这两种布局方式来画一只考拉。​准备步骤├── styles.css└── index.htmlstyles.css 是页面样式文件。index.html 是页面布局结构。选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的 Web 服务，就可以在浏览器中看到未完成的考拉。目标效果创造

最近蓝桥准备了很多 618 优惠，今天我们将化身蓝桥前端小工，亲自动手制作一个 618 活动页面，快来一显身手吧。​准备步骤├── css│ └── style.css├── images├── index.html└── mark ├── assets ├── index.html └── previewcss/style.css 是样式文件。images 是页面布局需要用到的图片素材。index.html 是主页面。mark/preview 是存放页

CSS 样式是前端开发的必备技能之一，下面请用你丰富的经验帮小蓝完成一个漂亮的用户名片制作吧。​准备步骤├── css│ └── style.css├── images└── index.htmlcss/style.css 是样式文件。images 是页面布局需要用到的图片素材。index.html 是主页面。目标效果实现卡片（class = card） 和用户头像（class = avatar） 元素水平垂直居中。左侧文字（class = level 和 clas

CSS 布局（Cascading Style Sheets Layout）是网页设计的核心，定义元素位置、大小和排列，构建页面结构。其布局模式多样：Flexbox 通过display:flex激活，借助justify-content和align-items灵活排列元素，适用于导航栏、卡片列表；CSS Grid 用grid-template-columns和grid-template-rows定义二维网格定位元素，常用于电商、多列图文排版；传统流式布局基于文档流，元素顺序排列，自适应屏幕宽度，保障页面可读性。

通常情况下，为保证布局的稳定性，以及遵循在有限的空间展示更多内容的原则，页面的某块区域不会随内容的增多而无限增高或增宽，一般会有一个约束。例如：整体元素过多可以使用滚动条；文字内容过多可以使用文本溢出处理。这些情况在实际开发中经常遇到。例如电商平台的商品列表中对商品的描述通常是简短的介绍，详细的介绍需要点击进去才能看到。如下图所示：如果不进行限制，那就会变成这样：这么一看对用户而言，是不是体验很不好，商品的简介把价格都遮挡住了。因此，解决这样的问题成为日常开发中不可或缺的需求。

各个网站都拥有登录页面，设计一个界面美观的登录页面，会给用户带来视觉上的享受。本次试题我们要完成一个登录页面的布局。​准备步骤wget https://labfile.oss.aliyuncs.com/courses/7835/exam01-imi.zip && unzip exam01-imi.zip && mv exam01-imi/* ./ && rm -rf exam01-imi*├── css│ └── style.css├── images│ ├── backgroun

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。

很多人都有自己的博客，在博客上面用自己的方式去书写文章，用来记录生活，分享技术等。下面是蓝桥云课的博客，但是上面还缺少一些样式，需要大家去完善。

层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述网页视觉表现的语言。该语言与HTML协同工作，其中HTML负责构建网页的结构，而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用，这些规则由选择器（Selectors）和声明块（Declaration Blocks）构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响，而声明块则包含了具体的样式声明，这些声明定义了元素的视觉属性和相应的值。