为什么会觉得CSS比JavaScript难?

前言

是的,就像你问题中描述的,“用起来没有底,有填不完的坑”,这大概就是css难的地方,因为css关乎的是页面整体的一个ui设计,暂且不说本身关于css的内容是非常繁杂的,主要是页面的设计是考验创造创新的思维,而js的代码很多是有一个固定的模式,比如你要实现一个什么功能,对应的代码其实已经被研究的透彻了,但是如果说在前端方面你没有考虑往ui方面发展的打算,那么前期的侧重点其实是应该放在JavaScript上,css主要是熟练度的问题,前面可以选择性的找两个项目练一下css的相关知识点就行了。

可以看看我下面推荐的一些css项目和相关的学习的网站,个人觉得还是挺有意思的,感受css乐趣的同时能学到东西,希望对你有帮助~

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/css_tricks/

网站推荐

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

持续更新中~

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flutter开发实战-实现首页分类目录入口切换功能

。 在开发中经常遇到首页的分类入口,如美团的美食团购、打车等入口,左右切换还可以分页更多展示。 一、使用flutter_swiper_null_safety 在pubspec.yaml引入 # 轮播图flutter_swiper_null_safety: ^1.0.2二、实现swiper分页代码 由于我这里按照一页8…

Element的el-select下拉框多选添加全选功能

先看效果图 全选: 没有选中时: 选中部分: 作者项目使用的是vue3写法,如果是vue2的自己转换一下 html代码: js代码: 拓展 另一种方法,如果不想使用勾选框,可以试试下面的方…

PPG心率血氧检测健康型沙发方案

《中国心血管健康与疾病报告2021》数据显示,我国心血管病患病人数已达 3.3 亿。目前,心脑血管病 死亡占城乡居民总死亡原因的首位,农村为46.7%,城市为44%。老年人是心脑血管病的主要发病体,老年 人患心脑血管病的几率较…

2023牛客暑期多校训练营7-c-Beautiful Sequence

思路: ,则有,也就是说只要知道A1就可以求任意A。由于A是升序排列,所以对于任意,二进制所包含1的最高位第k位来说,表明与第k位相反,要大一些,所以它的第k位为1,的第k位为…

问题解决和批判性思维是软件工程的重要核心

软件工程的重心在于问题解决和批判性思维(合理设计和架构降低复杂度),而非仅局限于编程。 许多人误以为软件工程就只是编程,即用编程语言编写指令,让计算机按照这些指令行事。但实际上,软件工程的内涵远超…

85. 最大矩形

题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵,找出只包含 1 的最大矩形,并返回其面积。 示例 1: 输入:matrix [["1","0","1","0","0"],["1…

HBase Shell 操作

1、基本操作 1.1、进入HBase客户端命令行 前提是先启动hadoop集群和zookeeper集群。 bin/hbase shell 1.2、查看帮助命令 helphelp 查看指定命令的语法规则 查看 list_namespace 的用法(‘记得加单引号’) help list_namespace 2、namespace 我们…

python文件操作

文章目录 一 文件的编码认识二 python文件操作2.1 open()打开函数2.2 mode常用的访问模式2.3 open函数的文件对象2.4 文件读操作2.5 练习案例:单词计数 三 文件的写入四 操作综合案例4.1 需求4.2 实现思路4.3 参考代码1.04.4 参考代码2.0 一 文件的编码认识 文件编码…

分享windwosServer2012R--ISO镜像下载地址(含激活教程)

windowsServer2012R----急速网盘下载地址:点击下载 提取码:888999 激活下载:点击下载 提取码:888999

ElasticSearch 7.4学习记录(基础概念和基础操作)

若你之前从未了解过ES,本文将由浅入深的一步步带你理解ES,简单使用ES。作者本人就是此状态,通过学习和梳理,产出本文,已对ES有个全面的了解和想法,不仅将知识点梳理,也涉及到自己的理解&#xf…

Java事件监听机制

这里写目录标题 先进行专栏介绍再插一句 开始喽事件监听机制分析观察者模式观察者模式由以下几个角色组成:观察者模式的工作流程如下:观察者模式的优点包括:观察者模式适用于以下场景:总结 事件监听机制的工作流程如下&#xff1a…

喆啡酒店十周年丨啡越时间限,ALL BY 10VE!

啡越时光热爱为伴 十年前,秉持对咖啡馆文化及复古风格的喜爱,喆啡酒店创造全新的Coffetel品类,将充满「温暖」「愉悦」「咖啡香」的格调体验带给消费者,成为无数人「旅途中的啡凡存在」。 十年间,喆啡酒店以热爱化为…

【深度学习】SMILEtrack: SiMIlarity LEarning for Multiple Object Tracking,论文

论文:https://arxiv.org/abs/2211.08824 代码:https://github.com/WWangYuHsiang/SMILEtrack 文章目录 AbstractIntroductionRelated WorkTracking-by-DetectionDetection methodData association method Tracking-by-Attention Methodology架构概述外观…

【vue3】基础知识点-setup语法糖

学习vue3&#xff0c;都会从基础知识点学起。了解setup函数&#xff0c;ref&#xff0c;recative&#xff0c;watch、comptued、pinia等如何使用 今天说vue3组合式api&#xff0c;setup函数 在学习过程中一开始接触到的是这样的&#xff0c;定义数据且都要通过return返回 <…

[保研/考研机试] KY102 计算表达式 上海交通大学复试上机题 C++实现

描述 对于一个不存在括号的表达式进行计算 输入描述&#xff1a; 存在多组数据&#xff0c;每组数据一行&#xff0c;表达式不存在空格 输出描述&#xff1a; 输出结果 示例1 输入&#xff1a; 6/233*4输出&#xff1a; 18思路&#xff1a; ①设立运算符和运算数两个…

Windows环境下通过 系统定时 执行脚本方式 压缩并备份文件夹 到其他数据盘

环境配置 压缩时需要使用7-zip进行调用&#xff0c;因此根据自己电脑进行安装 官网&#xff1a;https://www.7-zip.org/ 脚本文件 新建记事本文件&#xff0c;重命名为git_back_up.bat echo off rem 设置utf-8可以正常显示中文 chcp 65001 > nulrem 获取当前日期和时间&…

使用动态规划实现错排问题-2023年全国青少年信息素养大赛Python复赛真题精选

[导读]&#xff1a;超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲&#xff0c;这是超平老师解读Python编程挑战赛真题系列的第15讲。 全国青少年信息素养大赛&#xff08;原全国青少年电子信息智能创新大赛&#xff09;是“世界机器人大会青少年机器人设…

大数据Flink(五十七):Yarn集群环境(生产推荐)

文章目录 Yarn集群环境(生产推荐) 一、准备工作

Clickhouse 存储引擎

一、常用存储引擎分类 1.1 ReplacingMergeTree 这个引擎是在 MergeTree 的基础上&#xff0c;添加了”处理重复数据”的功能&#xff0c;该引擎和MergeTree的不同之处在于它会删除具有相同主键的重复项。 特点: 1使用ORDERBY排序键作为判断重复的唯一键 2.数据的去重只会在合并…

Openlayers实战:使几何图形适配窗口

Openlayers开发的项目中,有一种应用非常重要,就是绘制或者显示出几何图形后,让几何图形居中并适配到窗口下,这样能让用户很好的聚焦到所要看的内容中去。 这里使用了fit的这个view 的方法,具体的操作请参考示例源代码。 效果图 源代码 /* * @Author: 大剑师兰特(xiaozh…