CSS块元素,CSS的伪类和伪元素

news2025/1/16 17:51:52

学习建议

在你开始入手学习前,有一些小的建议。根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的。还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的文章,通过对许多文章及前人的建议。整理出适合自己学习的一套完整计划,然后在学习过程中,在自己对前端更加了解之后,做出一些计划的调整。
比如先根据一份思维导图学习,再根据自己实际情况制定路线
思维导图

我相信,在这样的计划学习之下比一来就开始学习具体知识要快速有效得多。

1、建议的学习步骤

(1)HTML标签(网页结构标记语言) +CSS样式(网页样式语言)。它们是实现静态Web应用最基础的语言,掌握好它们,你可以编写出一个简单的模块(如导航等)甚至一个完整的静态网页。

(2)Jquery库(Javascript编程语言的一个必须掌握的库)。它可以让你之前做的静态网页“动起来”,比如(下拉二级菜单、网页右侧工具导航的展开等等交互特效)。

(3)建议花时间看看《DOM编程艺术》这本书,或这类书籍。它是关于Javascript编程语言在网页开发上面的运用,跟着这本书走下来,你可以编写一个简单的具有交互效果的网站了。

以上几点就是小白最开始入门学习的东西,建议按照顺序学好这三种语言。可以使用sublime编辑器进行动手编写。当你根据学习步骤
完成一个小小的网站时,你会觉得很有成就感,后续的学习也就信心百增,兴趣百倍。

2.完善我们的基础知识

(1)HTML5,更高级的标记语言,功能更加丰富多彩。新增许多标签,比如:canvas、video等,可以自己实现更多的动画,炫酷的特效或者播放视频等等。

(2)CSS3,更高级的样式语言。你可以实现丰富多彩的页面动画,不必要每次都是用js,使用CSS3就可以轻松便捷的实现一些想要的网页交互。

比如用CSS为女朋友画个爱心,友谊长长久久~
css画爱心
css源码pdf

(3)重中之重,javascript编程语言。这是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。

JavaScript知识点

(4)开始学会使用一些前端的框架,这里我是指前端的UI框架,它们可以帮助我们快速高效的开发一个网站,并且界面风格也好不错。比如PC端的Bootstrap,其实它是响应式的框架,也可以用在移动端H5页面,或者AmazeUi,这是一款专注于移动端的框架。你可以百度也可以在对应框架的官网查看文档,当你学会使用某个框架的时候,其他的n+1个各种各样的前端UI框架,你也会信手拈来。

(5)还有一种前端框架,如layui这类的,算是工具类框架。它里面包含了分页效果、弹窗效果、日期选择控件等等内容。当你学习到这个时候或者更后面的学习里,你可以去学习如何使用,能够更高效的帮助你完成项目的开发。

(6)通过百度,可以找到许多网页交互特效的插件,如二级菜单下拉特效、手风琴菜单、图片轮播、弹窗效果等等。下载它们源码及示例,动手学习使用或模仿它们的效果,可以帮助我们快速实现一些比较复杂的交互特效。现在有非常多的免费开源插件,让我们不用再重复造轮子,直接使用就很方便。当然,我的建议是当你学会使用某个特效插件时,你可以学习它的源码,看看效果究竟是如何实现的。这也是巩固学习javascript语言的好方法,你值得拥有哦。

当你可以完成一个基本的带有交互效果的页面之后,参加工作中进一步提升自己就是需要掌握一些流行的前端开发JS框架及高效流行的开发模式。相信到了这一步,你已经成功迈入了前端的大门,接下来就是为了如何成为工作中的主力前端工程师而修行了。

四.常用的一些前端JS框架建议

(1)vue.js,一款偏向于移动端的JS框架,轻量级。数据驱动交互,学习起来非常容易,它可以不依赖与Jquery框架独立使用帮助你开发一个友好的移动端界面。一个前端开发必要掌握的技能,一款流行的JS框架。关于如何使用掌握它,你可以百度,还可以去它的官网学习官方文档,或者是菜鸟网站也有介绍。

(2)react.js,比较起vue,它更复杂一点,重量级一点,但是实现大型的项目也很快速便捷。掌握它也成了诸多公司入职要求,相信学习过vue这类数据驱动框架,在学习起这个就会容易很多。比起平常jQuery开发项目,vue和react开发关键是思想会有所转变,掌握面向对象和数据驱动交互,会让你感到开发的更加容易和友好。如何掌握它,百度、菜鸟网站、官网文档都是不错的选择。

2、比较流行的开发模式建议

(1)vue + webpack集成开发

(2)react + webpack集成开发

(3)node.js学习及应用,一款可以使用javascript语言开发后台的工具

(4)weex + webpack集成开发,目前很少看到公司使用

(5)angular.js,和vue.js这些差不多,但目前也很少看到使用了

以上的开发框架及开发模式(1)(2)(3),是比较多的互联网公司团队,都会采用的。值得去深入学习,并且当你掌握后,你会发现开发前端项目原来可以这么简单。

保持学习状态不断进步

以上的文章都是一些建议。当然贯穿你学习中和以后的工作中,你可能还学要掌握一些其他的必备技能。如:

(1)学会百度很重要。

(2)学会UI设计文件PSD切图(必备技能,学会看UI设计交付给你的设计图)。

(3)学会使用谷歌或火狐浏览器的F12开发者模式,在开发过程中快速调试找到问题。

(4)学会与后台配合进行数据接口的调试,及解决一些跨域的问题(如:nginx的配置使用)。

(5)学会不同项目使用不同最佳的开发工具(sublime、editplus、hbuilder、vsCode等等)。

(6)学会使用版本控制工具(如:svn),你与团队紧

戳这里领取完整开源项目:【一线大厂前端面试题解析+核心总结学习笔记+Web真实项目实战+最新讲解视频】

密配合的好工具。

学好这些,你就可以刷一下大厂面试题,比较热门的面试题
前端270页综合面试题

BAT大厂面试题解析

紧跟潮流

大前端和全栈是以后前端的一个趋势,懂后端的前端,懂各端的前端更加具有竞争力,以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线,由于图片太大仅展示一小部分

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

图片太大仅展示一小部分

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

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

相关文章

linux系统Jenkins工具配置webhook自动部署

Jenkins工具webhook自动部署 webhook自动部署webhook的意义操作流程jenkins页面操作gitlab页面操作 webhook自动部署 webhook的意义 自动化部署:Webhook 可以在代码提交、合并请求或其他特定事件发生时自动触发 Jenkins 构建和部署任务,从而实现自动化…

CSS的标准文档流,web设计与开发

CSS篇 让一个元素水平垂直居中,到底有多少种方案?浮动布局的优点,缺点?清除浮动的方式?使用display:inline-block会产生的问题?解决方法?布局题:div垂直居中,左右10px&a…

如何关闭远程桌面连接

远程桌面连接是一种方便的技术,可以让用户通过网络远程访问其他计算机的桌面界面。有时候我们可能需要关闭这个连接。本文将向你介绍如何关闭远程桌面连接。 关闭远程桌面连接的步骤 要关闭远程桌面连接,按照以下步骤操作: 打开远程桌面连接…

机器学习-面经(part6、集成学习)

10 集成学习 定义:通过结合多个学习器(例如同种算法但是参数不同,或者不同算法),一般会获得比任意单个学习器都要好的性能,尤其是在这些学习器都是"弱学习器"的时候提升效果会很明显。 10.1 Boosting(提升法) 可以用于回归和分类 问题,它每一…

关于出国留学和考研比较----以本人双非跨考计算机为例

文章目录 中心论点国内就业现状勿让旧认知害了自己那出国留学真的一无是处了吗?1. 藤校仍旧是具有极高价值2. 时间成本低3. 研究生一定比单纯的本科找工作强!4. 很多人说出国读博好,可以无脑入,真是这样吗? 中心论点 如果在选择出国留学还是国内考研的最终核心诉求都是有更好…

Luajit 2023移动版本编译 v2.1.ROLLING

文章顶部有编好的 2.1.ROLLING 2023/08/21版本源码 Android 64 和 iOS 64 luajit 目前最新的源码tag版本为 v2.1.ROLLING on Aug 21, 2023应该是修正了很多bug, 我是出现下面问题才编的. cocos2dx-lua 游戏 黑屏 并报错: [LUA ERROR] bad light userdata pointer 编…

CSS盒模型居中方法,web小程序开发工具

面试知识点 主要内容包括html,css,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,设计模式,项目等等。 html 1.浏览器页面有哪三层构成&#xff0c…

在Vue中搭建Three.js环境(超详细、保姆级),创建场景、相机、渲染器《一》

目录 Three.js简介创建vue项目引入Three.js实际操作环节文件目录创建初始化场景、相机 Three.js简介 Three.js 是一款基于 WebGL的 JavaScript 3D 库,它封装了 WebGL API,为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了…

【C#杂谈】在 .NET Framework 中使用新的C#语言特性

前排提示:提出一个可以让 [^1] 这中语法可以在.NET Framework运行时中使用的方法 众所都周知,.NET Framework(以下简称 .NF)作为一个被微软官方确认不在继续发布新特性的运行时,它所对应的C#语言版本被(官方…

Unity使用UnityWebRequest读取音频长度不对的解决方法

在开发的过程中碰到这样一个问题,有的音频文件通过UnityWebRequest读取出来后,AudioClip的Length会不对,比如本身有7秒,读出来只有3秒。代码如下: IEnumerator TestEnumerator() {UnityWebRequest www UnityWebReque…

BERT学习【BERT的例子以及作用】

一、case 1.case1 多输入单输出。通过输入一个句子(sequence),然后输出一个句子的分类(这个句子是正向还是负向)。将句子输入BERT,然后通过softmax输出分类。 2.case2 多输入多输出。输入一个句子&…

专业的安全数据交换系统,如何进行网间数据安全交换?

网络隔离是企业网络安全管理的重要组成部分,它有助于提高网络的整体安全性,保护企业资产和客户数据,同时满足法规合规要求。很多企业为了防止内部核心数据泄露,都实施了网络隔离,比如划分成内网、外网,有的…

安装R语言,完整教程

安装R语言,完整教程 介绍特点 应用场景和用户对象安装教程下载地址安装打开软件 介绍 R语言是一种用于统计分析和数据可视化的编程语言,广泛应用于学术研究、数据科学、商业分析等领域。它由新西兰奥克兰大学的Ross Ihaka和Robert Gentleman于1995年开发…

Ps:色阶

色阶 Levels命令用于改善图像的对比度和调整亮度/暗度平衡,通过操作图像的直方图来精细调整图像的阴影、中间调和高光。 Ps菜单:图像/调整/色阶 Adjustments/Levels 快捷键:Ctrl L Ps菜单:图层/新建调整图层/色阶 New Adjustment…

Acwing 周赛145 解题报告 | 珂学家 | 贪心构造

前言 整体评价 VP了这场比赛&#xff0c;偏简单吧。T3是道贪心构造题&#xff0c;卡语言&#xff0c;因为题和数都是从CF拿来的。 A. 平均成绩 思路: 模拟 这边有个小技巧&#xff0c;就是规避浮点运算。 可以左右侧都乘以3。 #include <bits/stdc.h>using namespac…

稀碎从零算法笔记Day9-LeetCode:最后一个单词的长度

题型&#xff1a;字符串、反转字符串 链接:58. 最后一个单词的长度 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述&#xff08;红字为笔者添加&#xff09; 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔…

Linux Ubuntu 部署SVN

最近需要在ubuntu server上部署一个svn&#xff0c;记录 不需要特定版本 如果不需要特定版本&#xff0c;这样安装就是最简单的 sudo apt update然后开始安装 sudo apt install subversion等到安装完成之后执行查看版本命令&#xff0c;如果正常输出那就没问题了 svnadmin …

Rust 开发的高性能 Python 包管理工具,可替换 pip、pip-tools 和 virtualenv

最近&#xff0c;我在 Python 潮流周刊 中分享了一个超级火爆的项目&#xff0c;这还不到一个月&#xff0c;它在 Github 上已经拿下了 8K star 的亮眼成绩&#xff0c;可见其受欢迎程度极高&#xff01;国内还未见有更多消息&#xff0c;我趁着周末把一篇官方博客翻译出来了&a…

绝地求生:调整不同血雾颜色效果,显著提升抽靶击中时的反馈效果

嗨&#xff0c;我是闲游盒~ 有很多玩家在玩游戏时&#xff0c;游戏设置方面默认的偏多&#xff0c;其中就有击中敌人时&#xff0c;血雾颜色呈暗绿色&#xff0c;导致抽靶时不好判断是否击中敌人。 在补枪方面也有很大影响&#xff0c;尤其在植被茂密的地形中。 你看得出来被击…

EPSON RA8000CE (RTC模块)压电侠

RA8000CE是一个集成了32.768 kHz数字温度补偿晶体振荡器(DTCXO)的RTC模块。它包括各种功能&#xff0c;如具有闰年校正的秒到年时钟/日历&#xff0c;时间警报&#xff0c;唤醒计时器&#xff0c;时间更新中断&#xff0c;时钟输出和时间戳功能&#xff0c;可以在外部或内部事件…