对于html和css初学者,你有什么值得推荐的简单的网页适合练习?

news2024/10/2 8:38:46

前言

html和css方面个人认为主要是在于css的学习,变化最多的也在于css,下面主要是介绍一些css相关的练习网站及一些项目,希望对你有帮助~

网站推荐

1、CODEPEN

代码与所展示的页面相互对应,你可以在上面找到其他人已经写好的demo,参考代码效果

网址:https://codepen.io

2、Coding Fantasy

通过游戏的形式来提高CSS

网址:https://codingfantasy.com/games

3、CSSBattle

与全球的玩家一起竞争,通过解决问题来获得奖励

网址:https://cssbattle.dev

4、CSS Challenges

有着关于CSS的各类的问题挑战,需要你使用CSS做出要求的效果,个人觉得这是练习CSS很好的一种方式,它有着各种难度区分,感兴趣的可以挑战一下

网址:https://css-challenges.com

GitHub项目推荐

1、CSS-Inspiration

Star:8.9k

提供很多种css的炫酷实现效果和各类布局。你可以先从图形出发,自定义 css样式,网站会给出实现你所需要的布局的代码,这种学习的方式也是非常不错的,可以先对于每一个效果的实现方式有所了解,将其慢慢消化转为自己的知识储备

这是其中一个css的效果图,还是非常有意思的

动图封面

github地址:https://github.com/chokcoco/CSS-Inspiration

官网:https://csscoco.com/inspiration/#/./init

2、You-need-to-know-css

Star:5k

给出了很多基于CSS做出来的效果,包括但不限于文字相关、布局相关等等一开始在项目中不知要怎么实现的效果。非常值得去学习

github地址:https://github.com/l-hammer/You-need-to-know-css

官网:https://lhammer.cn/You-need-to-know-css/#/

3、css_tricks

Star:3.8k

提供很多种css的炫酷实现效果和各类布局。你可以先从图形出发,自定义css样式,网站会给出实现你所需要的布局的代码,这种学习的方式也是非常不错的,可以先对于每一个效果的实现方式有所了解,将其慢慢消化转为自己的知识储备

github地址:https://github.com/QiShaoXuan/css_tricks

官网:https://qishaoxuan.github.io/cs

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/983354.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

胖小酱之不龟手之药寓言故事

宋国有个人善于炼制一种预防皮肤冻裂的药膏。在冬天如果把这种药膏涂在手上的话就能够防止手冻裂,所以他家祖祖辈辈就靠冬天的时候,在河边把这些药膏卖给洗衣服的人们来为生。 有个外地人听说他们家善于炼制这种药膏,便寻上门来,情…

同旺科技USB to I2C 适配器烧写 Arduino 模块

所需设备: 内附链接 1、同旺科技USB to I2C 适配器 2、Arduino 模块 硬件连接: 用同旺科技USB to I2C 适配器连接芯片的TX、RX、GND; 打开Arduino IDE编辑工具, 点击“上传”按钮,完成程序的编译和烧录;

RabbtiMQ的安装与在Springboot中的使用!!!

一、安装Erlang与Rabbitmq 安装教程本教程是在centos8下试验的,其实linux系统的都差不多RabbitMQ官方:Messaging that just works — RabbitMQRabbitMQ是开源AMQP实现,服务器端用Erlang语言编写,Python、Ruby、 NET、Java、JMS、c…

使用Python操作MySQL数据库

准备 安装Python,打开命令提示符,我已经安装成功了 安装Mysql我也安装成功了 我在用户的86188下利用记事本写了一个.py的python代码,在命令提示符中运行 Python自带的集成式开发环境,在电脑搜索框直接IDEA你也会打开 一,建立连接 使用Python…

AR眼镜: 与人并行的智能伙伴

AR眼镜: 与人并行的智能伙伴 增强现实(Augmented Reality,AR)眼镜是一种将虚拟信息与真实世界进行融合的设备,通过眼镜或头戴设备让用户能够看到真实世界,并在其上叠加数字内容和图像。目前工业级AR眼镜已…

python考研志愿填报模拟系统vue

本系统提供给管理员对学生、院校、研究生信息、专业信息、学院信息等诸多功能进行管理。本系统对于学生输入的任何信息都进行了一定的验证,为管理员操作提高了效率,也使其数据安全性得到了保障。本考研志愿填报模拟系统以Django作为框架,B/S模…

2022蓝帽杯半决赛

2022蓝帽杯取证题目解压密码附件 链接:https://pan.baidu.com/s/1AS0wVdjZxt46zaDcDzxdaQ 提取码:scpc –来自百度网盘超级会员V4的分享 解压密码7(G?fu9A8sdgfMsfsdrfE4q6#cf7af0fc1c 参考奇安信攻防社区-第六届“蓝帽杯”半决赛取证题目官方解析 20…

【项目测试报告】博客系统 + 在线聊天室

文章目录 一、项目介绍1.1 核心技术1.2 核心功能1.3 技术亮点1.4 前端页面设计登录页面注册页面博客广场页面搜索结果页面个人博客页面个人中心页面我的关注/粉丝页面聊天室页面写博客页面我的草稿修改博客页面博客详情页他人博客主页 二、功能测试2.1 登录测试用例2.2 注册测试…

OpenAI科学家Jason Wei专访:思维链灵感来源于冥想丨智源独家

导读 在大模型的研发道路上,思维链、指令微调和智能涌现等关键思想备受关注。正是思维链技术(Chain of Thought)让大模型能够涌现出一系列神奇的能力,成为了现代大语言模型产生「涌现」的底层技术。思维链旨在通过向大语言模型展示…

百度飞浆OCR识别表格入门python实践

1. 百度飞桨(PaddlePaddle) 百度飞桨(PaddlePaddle)是百度推出的一款深度学习平台,旨在为开发者提供强大的深度学习框架和工具。飞桨提供了包括OCR(光学字符识别)在内的多种功能,可…

【C++】内联函数 ① ( 内联函数引入 | 内联函数语法 )

文章目录 一、内联函数引入1、内联函数引入2、代码示例 - 宏代码片段 与 内联函数 二、内联函数语法1、内联函数语法说明2、代码示例 - 内联函数基本语法 一、内联函数引入 1、内联函数引入 " 内联函数 " 是 C 语言中的一种特殊函数 , 其目的是为了提高程序的执行效率…

vision transformer 详解

文章链接:https://arxiv.org/abs/2010.11929 代码地址:GitHub - google-research/vision_transformer Pytorch实现代码: https://github.com/WZMIAOMIAO/deep-learning-for-image-processing/tree/master/pytorch_classification/vision_tran…

你还在找淘宝商品信息查询的接口吗?

你还在找淘宝商品信息查询的接口吗?,不用找了,我这有,免费测试 在很多行业,比如淘客、商品采集、刊登、数据分析行业都需要用到相关的商品接口,但是官方一般又没有开放这些接口,怎么办&#xff…

原生Js Canvas去除视频绿幕背景

Js去除视频背景 注: 这里的去除视频背景并不是对视频文件进行操作去除背景 如果需要对视频扣除背景并导出可以使用ffmpeg等库,这里仅作播放用所以采用这种方法 由于uniapp中的canvas经过封装,且 uniapp 的 drawImage 无法绘制视频帧画面&…

深度学习论文: Rethinking Mobile Block for Efficient Attention-based Models及其PyTorch实现

深度学习论文: Rethinking Mobile Block for Efficient Attention-based Models及其PyTorch实现 Rethinking Mobile Block for Efficient Attention-based Models PDF: https://arxiv.org/pdf/2301.01146.pdf PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTor…

管理学国际化与领导力视角

随着全球化的进程不断加速,管理学的国际化已经成为一个不可忽视的趋势。在这个多元化和全球化的时代,管理者需要具备跨文化的领导力,以适应不同国家和地区的商业环境,并有效地管理全球团队。本文将从管理学国际化和领导力的角度探…

【文件翻译重命名与复制】一键实现文件名翻译,轻松复制到指定文件夹!

亲爱的朋友们,您是否曾经遇到过需要将文件名进行翻译,并且复制到指定文件夹的情况?现在,我们为您带来了一款全新的文件翻译重命名与复制工具,让您一键实现文件名翻译,轻松复制到指定文件夹,提高…

Zabbix -- QQ邮箱报警

目录 一、创建监控项及触发器 1.1创建监控项 1.2 创建监控项的触发器 1.3 测试触发器 二、邮箱媒介设置 2.1 设置报警媒介类型 2.2 创建用户群组和用户 三、动作绑定 3.1 创建动作 3.2 动作操作 3.3 动作测试(发送邮件测试) 四、问题总结 4.1 邮件发送…

Vue3+Element Plus实现el-table跨行显示(非脚手架)

Vue3Element Plus实现el-table跨行显示 app组件内容使用:span-method"objectSpanMethod"自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试&#xff0c;完整代码如下效果图 app组件内容 <div id"app"><!-- 远程搜索 --><e…

Consul学习笔记之-初识Consul

文章目录 1. What is consul?2. Consul能干什么3. Consul的架构3.1 概念 4. Consul VS Eureka4.1 CAP4.2 对比 1. What is consul? 根据官方文档的定义&#xff1a; HashiCorp Consul is a service networking solution that enables teams to manage secure network connec…