day15 学一下Tailwindcss(java转ts全栈/3r教室)

目前距离全栈差得最多的是前端,而对于前端主要是CSS一直不熟悉,觉得很复杂写起来总是不上道,所以特别关注下Tailwindcss吧,其他前端框架可以先放放,多说无益直接用tailwindcss做个页面试试

  • 看下文档:Tailwind CSS - 只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

    • 看目录其实和css差不多的,看起来css里能操作的属性tailwindcss里也有
    • 不一样的地方在于,首先都是使用原子类来操作的,不用自己写css,并且对长度、颜色都有约束,并不是所有px值都有默认的原子类,这也可以理解从设计的角度来看,“像素完美” 的概念已经不再适用于现代 Web 开发。现代 Web 设计更注重响应式和灵活性,而不是固定的像素值。 tailwindcss 新手入门介绍_哔哩哔哩_bilibili
      在这里插入图片描述
  • 安装和使用:我使用了tailwind cli的方式进行了安装,然后直接写起来(本来我想着先巩固下css在学tailwind,但太慢了,况且其实内容差不多,所以直接上手tailwindcss吧,变学tailwind语法,一边复习css的概念)

    • 并且也要开始前端仿站练习,锤炼css来了,找了个游戏官网,今天先从header开始 【HTML+CSS项目】HTML5期末大作业——仿阴阳师游戏官网首页_HTML5+CSS项目实战_HTML网页制作(附源码+课件)_哔哩哔哩_bilibili
      在这里插入图片描述
  • 原生的html css

    <!-- 头部开始 --><div class="header"><div class="header-left">游戏全目录</div><img src="./images/logo_b5525b7.png" alt=""><div class="header-right">限时领取免费课程</div></div><!-- 头部结束 -->
/* 头部样式开始 */
.header {width: 100%;height: 55px;background-color: #fff;font-size: 12px;line-height: 55px;
}.header-left {float: left;width: 179px;height: 54px;background-color: #cf1132,
}.header-right {float: right;width: 138px;height: 54px;border-left: 1px solid #dadada;
}
  • tailwind写的
 <!-- 头部开始 --><div class="flex flex-row"><div class="flex w-44 h-14 items-center justify-center text-center text-white bg-red-600">游戏全目录</div><div class="flew grow items-center justify-center"><img class="block mx-auto" src="../images/logo_b5525b7.png" alt=""></div><div class="flex w-44 h-14 items-center justify-center text-center border-l-2 border-gray-200">限时领取免费课程</div></div>
<!-- 头部结束 -->

可以看到,确实代码量减少了,不用写css了,因为css原子类都提前封装好了
在这里插入图片描述

程序员提升&&转型交流群:954614622
想报名3r教室的可以找我有内部优惠

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

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

相关文章

【ARM CoreLink 系列 4.1 -- NI-700 interconnect hub 控制器详细介绍】

文章目录 NI-700 InterconnectNI-700主要特性和优势包括:NI-700 关键功能TrustZone technologyNI-700 Interfaces完成者接口(Completer Interface)请求者接口(Requester Interface)NI-700 架构概述NI-700 Functional unitsNI-700 Interconnect CoreLink NI-700是ARM推出的…

final、finally、finalize有什么区别?

引言 在Java编程语言中&#xff0c;final、finally和finalize是三个具有不同用途和语义的关键字或方法。它们在编程和面试中经常被提及&#xff0c;因此理解它们之间的区别是非常重要的。 题目 final、finally、 finalize有什么区别&#xff1f; 典型回答 final&#xff1…

第三方软件测试机构的优势

软件测试机构在软件开发和验收过程中扮演着至关重要的角色&#xff0c;其优势主要体现在以下几个方面&#xff1a; 专业性&#xff1a;软件测试机构通常拥有专业的测试团队&#xff0c;这些团队成员具备丰富的测试经验和深厚的专业知识&#xff0c;能够准确识别软件中的潜在问…

LLM大语言模型原理、发展历程、训练方法、应用场景和未来趋势

LLM&#xff0c;全称Large Language Model&#xff0c;即大型语言模型。LLM是一种强大的人工智能算法&#xff0c;它通过训练大量文本数据&#xff0c;学习语言的语法、语义和上下文信息&#xff0c;从而能够对自然语言文本进行建模。这种模型在自然语言处理&#xff08;NLP&am…

Django-admin单例模式和懒加载

Django-admin单例模式和懒加载 单例模式 class Foo:def __init__(self):self.name "张三"def __new__(cls, *args, **kwargs):empty_object super().__new__(cls)return empty_objectobj1 Foo() obj2 Foo()当我们实例化对象时&#xff0c;就会在内存开一个空间…

基于ZYNQ7020的ARM+FPGA模块化仪器

模块化仪器平台基于 FPGA控制器&#xff0c; 搭配丰富灵活的仪器模块&#xff0c;如万⽤表、⽰波器、信 号发⽣器、数据记录仪、⾳频分析仪等&#xff0c;涵盖了⾼精度信号、⾼速与射频信号测试测量与处理&#xff0c;提供了从验证到试产到量产的全过程测试测量技术与解决⽅案&…

Python来计算 1,2,3,4 能组成多少个不相同且不重复的三位数?

我们今天的例子是 有 1&#xff0c;2&#xff0c;3&#xff0c;4 四个数字&#xff0c;它们能组成多省个互不相同且无重复的三位数&#xff1f;都分别是多少&#xff1f; 话不多说&#xff0c;我们先上代码 num 0 # 我们写了三个for循环&#xff0c;表示生成的三位数 for i…

深度学习中的变形金刚——transformer

很荣幸能和这些大牛共处一个时代。网络结构名字可以是一个卡通形象——变形金刚&#xff0c;论文名字可以来源于一首歌——披头士乐队的歌曲《All You Need Is Love》。 transformer在NeurIPS2017诞生&#xff0c;用于英语-德语&#xff0c;英语-法语的翻译&#xff0c;在BLEU…

可以在手机端运行的大模型标杆:微软发布第三代Phi-3系列模型,评测结果超过同等参数规模水平,包含三个版本,最小38亿,最高140亿参数

本文原文来自DataLearnerAI官方网站&#xff1a; 可以在手机端运行的大模型标杆&#xff1a;微软发布第三代Phi-3系列模型&#xff0c;评测结果超过同等参数规模水平&#xff0c;包含三个版本&#xff0c;最小38亿&#xff0c;最高140亿参数 | 数据学习者官方网站(Datalearner…

Go语言基本语法(四)函数与变量的作用域

函数 Go语言中的函数&#xff08;Function&#xff09;是执行特定任务的代码块&#xff0c;它们是构建程序的基本单位之一。函数可以接受输入参数&#xff0c;执行一系列操作&#xff0c;并可返回结果。Go语言的函数设计简洁&#xff0c;强调代码的清晰度和模块化。下面是Go函…

消除模型“焦虑”,浪潮信息切中AI生态建设的“症结”

大模型的崛起&#xff0c;真正开启人工智能重塑千行百业的序幕。 此绝非虚言。今年初&#xff0c;《政府工作报告》明确提出深化大数据、人工智能等研发应用&#xff0c;开展“人工智能”行动。这标志着以大模型为代表的新一代人工智能技术将加速进入到垂直行业。 但“人工智…

[C++][算法基础]整数划分(统计动态规划)

一个正整数 &#x1d45b; 可以表示成若干个正整数之和&#xff0c;形如&#xff1a;&#x1d45b;&#x1d45b;1&#x1d45b;2…&#x1d45b;&#x1d458;&#xff0c;其中 &#x1d45b;1≥&#x1d45b;2≥…≥&#x1d45b;&#x1d458;,&#x1d458;≥1。 我们将这…

Java之内部类

一、内部类的概念 从语法上来说&#xff0c;一个 类 定义在另一个 类 中或者这个 类 中一个方法的内部&#xff0c;那么把这个 类 叫做内部类&#xff0c;另一个 类 叫做外部类。 public class A{ class B{ }public void C(){ class C{ } }} //A是外部类 //B、C是内部类 内部类…

Python_GUI工具包 Pyside6的简介与基础操作

Python_GUI工具包 Pyside6的简介与基础操作 本文默认读者具备以下技能&#xff1a; 熟悉python基础知识&#xff0c;vscode或其它编辑工具 具备自主扩展学习能力 一、Pyside6简介 首先需要在这里先说明一下,我之前写的文章大多是ai相关的内容&#xff0c;此时在这里引入Pyt…

【练习1】

1.字符串最后一个单词的长度 #include <iostream> #include<string> using namespace std;int main() {string a;int res,i,flag;flag1;i0;getline(cin,a);res0;while(flag1){if(a[i]! ){resres1;}else{res0;}if(ia.length()-1){flag-1;}i;}cout<<res<<…

RakSmart站群服务器租用注意事项科普

随着互联网的飞速发展&#xff0c;站群运营成为越来越多企业和个人的选择。而RakSmart作为知名的服务器提供商&#xff0c;其站群服务器租用服务备受关注。在租用RakSmart站群服务器时&#xff0c;源库建议有一些关键的注意事项需要特别留意&#xff0c;以确保服务器的稳定运行…

Blender面操作

1.细分Subdivide -选择一个面 -右键&#xff0c;细分 -微调&#xff0c;设置切割次数 2.删除 -选择一个或多个面&#xff0c;按X键 -选择要删除的是面&#xff0c;线还是点 3.挤出面Extrude -选择一个面 -Extrude工具 -拖拽手柄&#xff0c;向外挤出 -微调&#xff…

Python学习指南

Python是一门应用极为广泛的编程语言&#xff0c;目前在Web开发、爬虫、数据分析、人工智能和机器人开发等领域都有着广泛的应用。Python的语法相对简单&#xff0c;许多人选择通过自学或参加培训来掌握Python技术。针对以就业为目的的学习者&#xff0c;选择学习Python技术时&…

【酱浦菌-爬虫项目】爬取百度文库文档

1. 首先&#xff0c;定义了一个变量url&#xff0c;指向百度文库的搜索接口 ‘https://wenku.baidu.com/gsearch/rec/pcviewdocrec’。 2. 然后&#xff0c;设置了请求参数data&#xff0c;包括文档ID&#xff08;docId&#xff09;和查询关键词&#xff08;query&#xff09;。…

docker各目录含义

目录含义builder构建docker镜像的工具或过程buildkit用于构建和打包容器镜像&#xff0c;官方构建引擎&#xff0c;支持多阶段构建、缓存管理、并行化构建和多平台构建等功能containerd负责容器生命周期管理&#xff0c;能起、停、重启&#xff0c;确保容器运行。负责镜管理&am…