CSS是一门需要单独学习的技术吗？

　　CSS (Cascading Style Sheets) ，做前端开发的人都很清楚，因为这是他们的一项必不可少的技能。我以前也是知道CSS，但从来没有单独学习过，认为就它只是用来渲染网页的表现层效果，定制页面和内元素的布局、颜色和字体等，需要的时候看一下相关知识就可以使用，并且我们大部分的应用都有很好的借助，比如以前的Ease UI、LayUI、Bootstrap，现在的ElementUI、Tailwind CSS等，这些CSS框架已经封装好了样式，还可以跨端，使我们能快速、简单地定制响应式的网页，所以根本不需要花单独的时间去学习。

　　其实，这样的认识是有问题的，CSS也需要单独学习、深入领会和掌握。

　　CSS现在有了很多以前不能有的视觉表现，这些得益于浏览器技术的进步，比如以前的一些网页动画或者特效，我们都使用JavaScript来实现，现在不必这样了。CSS可以很轻松地实现。CSS动画由现在的浏览器技术实现，浏览器在解读CSS 时，使用渲染引擎来解释和处理这些代码，渲染引擎将 CSS 动画的效果应用于网页元素，这样就在浏览器中实现了动画效果。

　　下面的网页代码就实现了渐变背景和动态按钮效果：

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>视野主页--CSS</title><style>body {width: 200px;height: 200px;background-color: #ff0000;animation: colorChange 3s infinite alternate;}@keyframes colorChange {0% {background-color: #333;}50% {background-color: #666;}100% {background-color: #999;}}.button {display: inline-block;padding: 10px 20px;background-color: #ccc;border: none;border-radius: 10px;transition: box-shadow 0.3s;}.button:hover {box-shadow: 0 0 3px 3px rgba(255, 0, 0, 0.5);}.button:active {transform: translateY(2px);}        </style></head><body><button class="button">按钮</button></body>
</html>

　　昨天同事让我做一个页面，类似B站首页的样式，最重要的是图片（DIV）的排列。我觉得通过DIV的浮动来解决应该挺快就解决，DIV解决了，剩下的DIV内部内容显示就简单了。

　　一、使用DIV的浮动
　　网页代码：

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>视野主页--DIV的浮动方法</title><style>body {margin: 0 auto;text-align: center;}.maindiv {width: 1600px;display: inline-block;}.container0 {width: 630px;height: 440px;display: inline-block;float: left;border:solid  #333 1px;}.container1 {width: 951px;display: inline-block;float: left;}.box1,.box2 {width: 314px;height: 220px;display: block;float: left;border: solid #34d657 1px;}.row1{float: left;display: block;}.row2{float: left;display: block;}
</style></head><body><div class="maindiv"><div class="row1"><div class="container0">主画面</div>        <div class="container1"><div class="box1">div--A1</div><div class="box1">div--A2</div><div class="box1">div--A3</div><div class="box1">div--B1</div><div class="box1">div--B2</div><div class="box1">div--B3</div></div></div><div  class="row2"><div class="box2">div--C1</div><div class="box2">div--C2</div><div class="box2">div--C3</div><div class="box2">div--C4</div><div class="box2">div--C5</div><div class="box2">div--D1</div><div class="box2">div--D2</div><div class="box2">div--D3</div><div class="box2">div--D4</div><div class="box2">div--D5</div></div>            </div></body>
</html>

　　效果如下：

　　上面就是将内容分两行显示，第二行设置为块的浮动就可以，主要是第一行，分左右两块来显示，右边的也是按块浮动。

　　使用浮动可能是以前的做法，现在流行flex，弹性布局。
　　二、使用flex
　　网页内容：

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>视野主页--flex方法</title><style>body {margin: 0 auto;text-align: center;}.maindiv {margin: 0 auto;width: 1600px;}.container0 {width: 630px;height: 440px;display: flex;border:solid  #24a324 1px;}.container1 {width: 970px;display: flex;flex-wrap: wrap;}.box1,.box2 {width: 315px;height: 220px;display: flex;border: solid #34d657 1px;}.row1 {display: flex;}.row2{display: flex;flex-wrap: wrap;}
</style></head><body><div class="maindiv"><div class="row1"><div class="container0">主画面</div>        <div class="container1"><div class="box1">div--A1</div><div class="box1">div--A2</div><div class="box1">div--A3</div><div class="box1">div--B1</div><div class="box1">div--B2</div><div class="box1">div--B3</div></div></div><div  class="row2"><div class="box2">div--C1</div><div class="box2">div--C2</div><div class="box2">div--C3</div><div class="box2">div--C4</div><div class="box2">div--C5</div><div class="box2">div--D1</div><div class="box2">div--D2</div><div class="box2">div--D3</div><div class="box2">div--D4</div><div class="box2">div--D5</div></div>            </div></body>
</html>

　　效果如下：


　　但是感觉没有体现flex的优势，去掉外面的DIV包裹。

　　改动网页：

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>视野主页--flex方法</title><style>body {margin: 0 auto;text-align: center;}.maindiv {display: flex;margin: 0 auto;width: 1600px;flex-wrap: wrap;}.container0 {width: 635px;height: 442px;border:solid  #24a324 1px;}.container1 {width: 960px;display: flex;flex-wrap: wrap;}.box{width: 315px;height: 220px;/* display: flex; */border: solid #34d657 1px;}.div-B{top: 222px;}
</style></head><body><div class="maindiv"><div class="container0">主画面</div><div class="container1"><div class="box">div--A1</div><div class="box">div--A2</div><div class="box">div--A3</div><div class="box div-B">div--B1</div><div class="box div-B">div--B2</div><div class="box div-B">div--B3</div>    </div>        <div class="box">div--C1</div><div class="box">div--C2</div><div class="box">div--C3</div><div class="box">div--C4</div><div class="box">div--C5</div><div class="box">div--D1</div><div class="box">div--D2</div><div class="box">div--D3</div><div class="box">div--D4</div><div class="box">div--D5</div></div></body>
</html>

　　效果显示：

　　感觉还不利索，使用grid来实现就很简单明了。
　　三、使用grid

　　网页代码：
 

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>视野主页--gird方法</title><style>body {margin: 0 auto;text-align: center;}.maindiv {width: 1600px;margin: 0 auto;display: grid;grid-template-columns: repeat(5, 315px);grid-template-rows:  repeat(4, 220px);}.container0 {width: 630px;height: 440px;          grid-row: span 2;grid-column: span 2;border: solid #20ae67 1px;}.box, .div-B {width: 315px;height: 220px;border: solid #18c756 1px;grid-column: span 1;}
</style></head><body><div class="maindiv"><div class="container0">主画面</div>        <div class="box">div--A1</div><div class="box">div--A2</div><div class="box">div--A3</div><div class="box">div--B1</div><div class="box">div--B2</div><div class="box">div--B3</div><div class="box">div--C1</div><div class="box">div--C2</div><div class="box">div--C3</div><div class="box">div--C4</div><div class="box">div--C5</div><div class="box">div--D1</div><div class="box">div--D2</div><div class="box">div--D3</div><div class="box">div--D4</div><div class="box">div--D5</div></div></body>
</html>

　　显示效果：

　　这样的效果使用以前的表格布局很简单，网页的内容如下：
　　四、使用表格

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>视野主页--表格方法</title><style>body {margin: 0 auto; }         div:before {content: '';display: inline-block;vertical-align: middle;height: 100%;width: 0;}        div {width: 310px;height: 215px;border: solid #34d657 2px;text-align: center;}td {vertical-align: top;}</style></head><body><table align="center"><tr><td rowspan="2" colspan="2"><div style="width: 630px;height: 442px;">主画面</div></td><td><div>div--A1</div></td><td><div>div--A2</div></td><td><div>div--A3</div></td></tr><tr><td><div>div--B1</div></td><td><div>div--B2</div></td><td><div>div--B3</div></td></tr><tr><td><div>div--C1</div></td><td><div>div--C2</div></td><td><div>div--C3</div></td><td><div>div--C4</div></td><td><div>div--C5</div></td></tr><tr><td><div>div--D1</div></td><td><div>div--D2</div></td><td><div>div--D3</div></td><td><div>div--D4</div></td><td><div>div--D5</div></td></tr></table></body>
</html>

　　效果如下：


　　因为CSS的不熟，上面的4个简单的页面也折腾了一下午，还有其他的方法没有试，并且还可以直接使用框架来做。
　　CSS技术是一门技术吗？
　　说它是，可以很少看到有人专门去学习，大多是针对项目去临时学习；说它不是，看看前端的一些CSS的封装包，做得那么好，肯定有相当得技术含量。
　　CSS技术是一门技术，这个可能做前端开发时受虐了才有深刻体会。
　　掌握了CSS，不但可以轻松实现很多以前需要使用JavaScript才能实现的特效，在设计前端页面时更加的省时省力，而且在读懂一些前端框架包的CSS设定的基础上可以有目的修改，就像掌握了Javascript就可以更好地使用react、vue等开发框架一样。

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

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

相关文章

QT 应用中集成 Sentry

QT 应用中集成 Sentry

QT 应用中集成 Sentry QT应用中集成 SentrySentry SDK for C/C注册 Sentry 账号QT 应用中集成 Sentry触发 Crash 上报 QT应用中集成 Sentry Sentry 是一个开源的错误监控和日志记录平台&#xff0c;旨在帮助开发团队实时捕获、跟踪和解决软件应用程序中的错误和异常。它提供了…
阅读更多...
【ADI 知识库】 AN-1354：集成式ZIF、RF至比特、LTE、广域接收机分析和测试结果

【ADI 知识库】 AN-1354：集成式ZIF、RF至比特、LTE、广域接收机分析和测试结果

官方链接&#xff1a; https://www.analog.com/cn/resources/app-notes/an-1354.html 简介 本应用笔记参考了3GPP TS 36系列文件和ADI公司的多种数据手册、特性标定报告和实验室测试结果。本文重点关注基于集成式零中频(ZIF)、RF至比特、IC (AD9371)的多载波广域LTE接收机的性…
阅读更多...
ICA：独立成分分析

ICA：独立成分分析

1.意义 两个假设&#xff1a;一个是假设源信号是相互统计独立的,另一个是假设己知源信号的统计分布特征。 另一个假设是信号的非高斯性,现实世界的许多信号,诸如绝大多数的语音信号和图像信号即是服从非高斯分布的这个假设的可应用性,带来了独立成分分析的重要特征,即实际信号的…
阅读更多...
关于在Tkinter + Pillow图片叠加中出现的问题

关于在Tkinter + Pillow图片叠加中出现的问题

这段时间我一直在尝试对多图层图片进行一个叠加的操作&#xff0c;想用tkinter实现出来&#xff0c;先看错误 这里我其实已经选择了图片&#xff0c;但是发现是ValueError&#xff0c;我尝试断点检测但是也无动于衷&#xff0c;因为设置变量检测的时候发现变量并没有错误&…
阅读更多...
【周总结】Programmer‘s weekend routine---First week of February

【周总结】Programmer‘s weekend routine---First week of February

总结 工作&#xff1a; 参加项目重构方案讨论会议、个人任务计划分期以及工期安排、项目初步重构开发 日常&#xff1a;参加年会&#xff08;阳光普照奖都莫得&#xff09; 2024.2.3 阴 不冷 连着一周的雨&#xff0c;我那袜子挂两三天了还能挤出水。。离谱、莆…
阅读更多...
linux 文件查看 head 、 cat 、 less 、tail 、grep

linux 文件查看 head 、 cat 、 less 、tail 、grep

查看文件详细信息 stat 文件 cat 》》适合显示小文件【行数比较少】&#xff0c;如果行数较多&#xff0c;屏幕显示不完整&#xff08;如果虚拟操作&#xff0c;是无法上下键的&#xff0c;或者滚动鼠标的&#xff0c;第三方 xsheel&#xff0c;crt 可以方向键查看&#xf…
阅读更多...
ep-bg-purple-dark element-plus 不生效

ep-bg-purple-dark element-plus 不生效

element-plus 官网里面的 Layout 布局中的示例&#xff0c;官方文档中添加类名 class"grid-content ep-bg-purple-dark" 有相应的样式 import element-plus/theme-chalk/index.css //默认css样式 英文 import element-plus/dist/index.css 两…
阅读更多...
在Flutter中调用Android的代码

在Flutter中调用Android的代码

参考 【Flutter 混合开发】嵌入原生View-Android 默认使用Android studio 和 Kotlin 基本配置 创建flutter项目 在终端执行 flutter create batterylevel添加 Android 平台的实现 打开项目下的android/app/src/main/kotlin 下的 MainActivity.kt 文件。 我这里编辑器有…
阅读更多...
人工智能深度学习发展历程-纪年录

人工智能深度学习发展历程-纪年录

前言 为了理解模型之间的改进关系、明确深度学习的发展目标、提高自身对模型的深度理解、贯彻爱与和平的理念。总之&#xff0c;我做了如下表格。 时间 重大突破 模型改进 详细信息 1847 SGD 随机梯度下降 1995 SVM 支持向量机 1982 RNN 循环神经网络&#xff0c;…
阅读更多...
烽火传递

烽火传递

看似很简单的单调队列优化DP 但是如果状态是表示前\(i\)个烽火台被处理完的最小代价(即不知道最后一个烽火台在哪里)就无法降低复杂度 因为假设你在区间\([i-m1,i]\)中枚举最后一个烽火台(设为\(k\))&#xff0c;你前面的状态并不是\(f[k-1]\)&#xff0c;因为此时\(k\)已经可以…
阅读更多...
C++之std::tuple(一) : 使用

C++之std::tuple(一) : 使用

相关系列文章 C之std::tuple(一) : 使用 C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二)&#xff1a;深入剖析 目录 1.简介 2.创建元组 2.1.直接初始化方式 2.2.使用花括号初始化列表方式&#xff08;C11及以上版本&#xff09; 2.3.make_tuple方式 2.4.使…
阅读更多...
Log4j2-27-log4j2 与 springboot 整合例子

Log4j2-27-log4j2 与 springboot 整合例子

1.去除默认的依赖并导入log4j2、lombok依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><exclusions><!-- 引入log4j日志时需去掉默认的logback --><exclusion>&…
阅读更多...
【类和对象】4

【类和对象】4

日期类的拓展 c语言中的printf函数只能打印内置类型&#xff0c;为了弥补这一不足&#xff0c;c利用运算符重载可以打印自定义类型。 void operator<<(ostream&out);//声明在date.h中void Date::operator<<(ostream& out)//定义在date.cpp中 {out<<…
阅读更多...
IBOS靶场搭建流程（超详细）

IBOS靶场搭建流程（超详细）

IBOS 1.下载并安装IBOS 点击然后一直下一步进行安装IBOS 显示出这个时证明安装成功 然后进行数据库的搭建&#xff0c;这里需要说明的是这里运行的服务是nginx和mysql而不是apache和mysql所以说这里的数据库名默认是root且密码也默认是root点击立即安装 安装后出现 这个页面时…
阅读更多...
Unity_颜色空间GammaLinear

Unity_颜色空间GammaLinear

Unity_颜色空间Gamma&Linear 1： Unity颜色空间的选择对于效果的影响具体有多大？ 在ProjectSetting -> Player -> OtherSetting -> Rendering设置下的颜色空间选项卡选择颜色空间进行设置： 太深奥的解释一时半会看不懂，找见一个粗浅的对比，当然本人未做验…
阅读更多...
GPGPU面临的工程困境闲聊

GPGPU面临的工程困境闲聊

作者&#xff1a;蒋志强 本人同意他人对我的文章引用&#xff0c;但请在引用时注明出处&#xff0c;谢谢&#xff0e;作者&#xff1a;蒋志强 0.前言 2007年作为GPGPU的工程界元年至今&#xff0c;已经发展了接近小二十年了。这个领域是如此的重要&#xff0c;几乎影响了工业…
阅读更多...
Canal 结合 SpringBoot 源码梳理

Canal 结合 SpringBoot 源码梳理

1、canal是什么&#xff0c;可以用来作什么 canal是阿里开源的一个用于监听数据库binlog&#xff0c;从而实现数据同步的工具。 2、安装 我使用的是1.1.5版本&#xff0c;太高的版本需要的jdk版本和mysql的驱动版本会更高&#xff0c;可以根据自己的环境选择。 如果是自己玩的话…
阅读更多...
如何保证MySQL和Redis中的数据一致性？

如何保证MySQL和Redis中的数据一致性？

文章目录 前言一、缓存案例1.1 缓存常见用法1.2 缓存不一致产生的原因 二、解决方案2.1 先删除缓存&#xff0c;再更新数据库2.2 先更新数据库&#xff0c;删除缓存2.3 只更新缓存&#xff0c;由缓存自己同步更新数据库2.4 只更新缓存&#xff0c;由缓存自己异步更新数据库2.5 …
阅读更多...
MySQL-----DDL基础操作

MySQL-----DDL基础操作

SQL通用语法 1.SQL语句可以单行或多行书写&#xff0c;以分号结尾。 2. SQL语句可以使用空格/缩进来增强语句的可读性。 3. MySQL数据库的SQL语句不区分大小写&#xff0c;关键字建议使用大写。 4&#xff0e;注释: 单行注释:--注释内容或#注释内容(MySQL特有) 多行注释:/*注释…
阅读更多...
【Iot】什么是串口？什么是串口通信？串口通信(串口通讯)原理，常见的串口通信方式有哪些？

【Iot】什么是串口？什么是串口通信？串口通信(串口通讯)原理，常见的串口通信方式有哪些？

串口通信原理 1. 串口2. 串口通信4. 波特率与比特率5. 帧格式3. 串口通讯的通讯协议3.1. RS2323.2. RS485 总结 1. 串口 串行接口简称串口&#xff0c;也称串行通信接口或串行通讯接口&#xff08;通常指COM接口&#xff09;&#xff0c;是采用串行通信方式的扩展接口。 串口可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023