文章 2024-07-17 来自:开发者社区

CSS Flex布局实战案例:构建响应式卡片组件

在现代网页设计中,Flexbox(弹性盒模型)因其强大而灵活的布局能力,成为了构建响应式网页布局的首选工具之一。Flexbox能够让我们以更简单的方式处理复杂的布局问题,特别是当涉及到不同屏幕尺寸和分辨率时。本文将通过一个实战案例——构建一个响应式的卡片组件,来展示CSS Flex布局的实际应用。 案例背景 假设...

文章 2024-07-06 来自:开发者社区

CSS【实战】抽屉动画

效果预览 技术要点 实现思路 元素固定布局(fixed)在窗口最右侧外部 js 定时器改变元素的 right 属性,控制元素移入,移出 ...

CSS【实战】抽屉动画

CSS 快速掌握

49 课时 |
20278 人已学 |
免费

零基础学前端HTML+CSS

57 课时 |
9134 人已学 |
免费

前端开发CSS基础

21 课时 |
4321 人已学 |
免费
开发者课程背景图
文章 2024-07-05 来自:开发者社区

CSS 【实战】 “四合院”布局

效果预览 页面要求: 上下固定高度 左右固定宽度 中间区域自适应宽高 整个页面内容撑满全屏,没有滚动条 技术要点 使...

CSS 【实战】 “四合院”布局
文章 2024-07-04 来自:开发者社区

css实战——清除列表中最后一个元素的下边距

需求描述 常见于列表的排版,如文章列表、用户列表、商品列表等。 代码实现 ...

css实战——清除列表中最后一个元素的下边距
文章 2024-07-02 来自:开发者社区

vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)

<template> <div> <div class="arrowsBox"> <div class="arrowsItem" v-for="(item, index) in list" :key="index"> <div class="arrows-up arrows" ...

vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
文章 2024-06-26 来自:开发者社区

HTML5+CSS3+JavaScript网页实战

1. HTML5基础 HTML5,作为构建和呈现网页内容的标准标记语言,带来了许多革命性的变化。它不仅提供了更加语义化的标签,使得网页内容更具可读性和可访问性,还增加了对多媒体的原生支持,无需依赖第三方插件即可播放视频和音频。在本文中,我们将深入探讨HTML5的新特性,如<article>, <section>, <nav>, <header&g....

文章 2024-06-25 来自:开发者社区

CSS3 字体图标+实战:商城首页

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! ✍CSS3 字体图标 1 字体图标的产生 字体图标使用场景: 主要用于显示网页中通用、常用的一些小...

CSS3 字体图标+实战:商城首页
文章 2024-06-11 来自:开发者社区

Web实战丨基于django+html+css+js的在线博客网站

写在前面 本期内容:基于Django+Html+Css+JavaScript的在线博客网站 实验环境: vscode或pycharm python(3.11.4及以上) django 实验目标 使用Django+HTML+CSS+JS开发一个含登录界面的在线博客网站,用户可以通过网站发布博客,管理员可以登录后台管理...

Web实战丨基于django+html+css+js的在线博客网站
文章 2024-06-11 来自:开发者社区

Web实战丨基于django+html+css+js的电子商务网站

写在前面 本期内容:基于Django+HTML+CSS+JS的电子商务网站 实验环境: vscode或pycharm python(3.11.4) django 实验目标 使用Django+HTML+CSS+JS开发一个含登陆界面的电子商务网站。本项目共分为六大模块: 用户信息界面 商...

Web实战丨基于django+html+css+js的电子商务网站
文章 2024-06-11 来自:开发者社区

Web实战丨基于django+html+css的在线购物商城

写在前面 本期内容:基于Django+HTML+CSS+的在线购物商城 实验环境: vscode或pycharm python(3.11.4) django celery dj-static 实验目标 使用Django+HTML+CSS开发一个在线购物商城系统,该在...

Web实战丨基于django+html+css的在线购物商城

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。