当前位置：首页 > news >正文

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（三）

news 来源：原创 2025/5/22 20:43:55

基于前两篇内容，继续完善企业官网页面：

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（一）-CSDN博客

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（二）-CSDN博客

3.5 联系方式

1.1 整体容器

<section class="py-16 bg-gray-50"><div class="max-w-7xl mx-auto px-4 sm:px-4 lg:px-8">

代码解释：

section 标签：
- py-16：设置上下内边距为 16rem（约 256px），为内容区域提供充足的垂直空间。
- bg-gray-50：背景色为浅灰色（#f9fafb），与内部白色卡片形成对比，突出主体内容。

内部容器 div：
- max-w-7xl：限制最大宽度为 Tailwind 预设的 7xl（1440px），避免内容在大屏下过宽。
- mx-auto：水平居中容器，确保页面布局平衡。
- px-4 sm:px-4 lg:px-8：响应式内边距，小屏幕（sm）和默认情况左右边距 4rem（64px），大屏幕（lg）增加到 8rem（128px），适配不同设备。

1.2 核心卡片区域（视觉焦点）

<div class="bg-white rounded-3xl shadow-2xl p-8 sm:p-10 lg:p-10">

代码解释：

白色卡片容器：
- bg-white：白色背景（#fff），与外层浅灰色形成高对比，突出内容区域。
- rounded-3xl：圆角半径 3xl（12px），使卡片边角圆润，符合现代 UI 设计趋势。
- shadow-2xl：添加深度阴影（drop-shadow），模拟立体悬浮效果，增强视觉层次感。
- p-8 sm:p-10 lg:p-10：内边距控制内容与卡片边缘的距离，不同屏幕下微调（默认 8rem，小屏幕和大屏 10rem），确保内容不拥挤。

1.3 响应式网格布局（核心排版）

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">

网格布局核心类：
- grid：启用 CSS 网格布局，实现灵活的列排列。
- grid-cols-1：默认（小屏幕，<768px>）下为单栏布局，内容垂直堆叠，适配手机端。
- md:grid-cols-2：中等屏幕及以上（md 断点，≥768px）切换为双栏布局，左右分开展示内容（如表单和联系信息），提升大屏利用率。
- gap-12：网格列间距 12rem（192px），确保两列内容有充足的水平空间，避免拥挤。

2. 表单区域

<!-- 表单区域 --><div class="space-y-8"><h2 class="text-2xl font-bold leading-tight text-gray-800 md:text-3xl">联系我们</h2><form class="space-y-6"><div><label class="block text-sm font-medium text-gray-800 mb-3">姓名 <span class="text-red-500">*</span></label><input type="text" required class="w-full rounded-lg border border-gray-200 bg-gray-50 px-6 py-4 text-sm shadow-sm focus:outline-none focus:border-blue-600 focus:bg-white focus:shadow-lg"></div><div><label class="block text-sm font-medium text-gray-800 mb-3">邮箱 <span class="text-red-500">*</span></label><input type="email" required class="w-full rounded-lg border border-gray-200 bg-gray-50 px-6 py-4 text-sm shadow-sm focus:outline-none focus:border-blue-600 focus:bg-white focus:shadow-lg"></div><div><label class="block text-sm font-medium text-gray-800 mb-3">留言 <span class="text-red-500">*</span></label><textarea rows="5" required class="w-full rounded-lg border border-gray-200 bg-gray-50 px-6 py-4 text-sm shadow-sm resize-none focus:outline-none focus:border-blue-600 focus:bg-white focus:shadow-lg"></textarea></div><button type="submit" class="w-full bg-blue-600 text-white font-bold py-4 px-8 rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg focus:outline-none focus:shadow-xl active:bg-blue-600 transition-all duration-200 flex items-center justify-center">提交咨询<svg class="w-4 h-4 ml-2 animate-bounce" fill="currentColor" viewBox="0 0 20 20"><path d="M10.894 1.606a1 1 0 00-1.788 0l-7 14a1 1 0 001.581 1.581L10 11.08l6.125 6.124a1 1 0 001.581-1.581l-7-14z"/></svg>
</button></form></div>

代码解释：

space-y-8：容器内子元素垂直间距为 8，使标题与表单间距合理。
leading-tight：紧凑行高，减少标题垂直空间。
输入框 label：
- block：块级元素，单独占一行。
- text-sm font-medium：文字大小 sm，中等粗细。
- mb-3：底部边距 3，与输入框保持距离。
输入框 input：
- w-full：宽度占满父容器。
- rounded-lg：圆角 lg（较大圆角）。
- border border-gray-200：灰色细边框。
- px-6 py-4：内边距，水平 6，垂直 4。
- shadow-sm：小阴影，增加立体感。
- focus:outline-none focus:border-blue-600：聚焦时去除默认轮廓，边框变蓝色。
按钮 button：
- rounded-lg shadow-md：圆角，中等阴影。
- hover:bg-blue-700：悬停时背景色变深。
- flex items-center justify-center：按钮内内容水平垂直居中。
- animate-bounce：图标添加跳动动画。

3. 联系信息区域

 <!-- 联系信息区域 --><div class="flex flex-col justify-start space-y-8"><!-- 联系信息 --><div><h3 class="text-2xl font-bold text-gray-800">联系方式</h3><div class="mt-6 space-y-6"><div class="flex items-center space-x-4"><svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/></svg><div><p class="text-lg font-medium text-gray-600">400-123-4567</p><p class="text-sm text-gray-600">工作日 9:00-18:00 免长途费</p></div></div><div class="flex items-center space-x-4"><svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/></svg><div><p class="text-lg font-medium text-gray-600">contact@company.com</p><p class="text-sm text-gray-600">24小时内回复 技术/合作专属通道</p></div></div></div></div>

代码解释：

flex flex-col justify-start：垂直弹性布局，内容左对齐。
flex items-center space-x-4：图标与文字同行显示，水平间距 4。
border-t border-gray-200：顶部添加上边框，边框类型为灰色细边框，增强内容分区的视觉辨识度
pt-8：上内边距 8，与上方内容区分。
社交图标 a 标签：
- text-gray-500 hover:text-blue-600：默认文字灰色，悬停变蓝色。
- transition-transform duration-300：变换过渡效果，持续 300ms，使悬停时的缩放动画平滑自然。
- transform hover:scale-110：默认无变换，悬停时图标放大到 110%。
- sr-only：屏幕阅读器专用文本，视觉隐藏。

4. 关注我们区域

 <!-- 关注我们 -->
<div class="border-t border-gray-200 pt-8"><h3 class="text-2xl font-bold text-gray-800 mb-4">关注我们</h3><div class="flex space-x-4"><!-- 第一个社交图标，假设为Facebook --><a href="#" class="text-gray-500 hover:text-blue-600 transition-transform duration-300 transform hover:scale-110 focus:outline-none focus:text-blue-600 focus:scale-110"><span class="sr-only">Facebook</span><svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a><!-- 其他社交图标同理 --></div>
</div>

代码解释：

flex space-x-4：水平排列社交图标，间距统一（4rem），适配不同屏幕宽度，避免换行。
w-8 h-8：图标尺寸固定为 8rem，视觉整齐，小屏幕下仍易于点击。

效果展示：

3.6 页脚区域

1. 整体容器

<footer class="bg-gray-900 text-gray-300 py-12"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="grid md:grid-cols-4 gap-8">

代码解释：

md:grid-cols-4：中等屏幕及以上分为 4 列，分别展示公司信息、产品服务、关于我们、法律声明。
gap-8：列间距为 8，使各模块内容不拥挤。

2. 公司信息区域

<!-- 公司信息 --><div><img src="" alt="企业Logo" class="h-8 w-auto mb-5"><p class=" flex items-center">为企业提供全方位的<br>数字化转型方案</p><div class="flex space-x-3 mt-5"><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors"><i class="fab fa-facebook-f"></i></a><a href="#" class="text-gray-400 hover:text-red-400 transition-colors"><i class="fab fa-instagram"></i></a><a href="#" class="text-gray-400 hover:text-green-400 transition-colors"><i class="fab fa-whatsapp"></i></a></div>

代码解释：

img：展示企业 Logo，h-8 w-auto 确保尺寸适配。
社交图标：通过 flex space-x-3 水平排列，hover:text-* 实现悬停变色，fab 类引用 Font Awesome 品牌图标。

3. 导航模块（产品服务 / 关于我们 / 法律声明）

<div><h4 class="text-white font-medium mb-4">产品服务</h4><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-blue-400 transition-colors flex items-center space-x-2">        <i class="fas fa-cog"></i><span>提供解决方案</span></a></li><!-- 其他列表项同理 --></ul>
</div>

代码解释：

flex items-center space-x-2 使图标与文字同行显示，fas 类引用 Font Awesome 常规图标，hover:text-blue-400 悬停变色。

4. 版权声明

<div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm"><p>© 2024 科技企业. 保留所有权利</p><p class="mt-2">联系方式: <a href="mailto:info@example.com" class="text-blue-400 hover:underline">info@example.com</a></p>
</div>

代码解释：

mt-12 pt-8：顶部外边距和内边距，拉开与上方内容的距离。
text-blue-400 hover:underline 链接颜色与悬停下划线效果。

效果展示：

总结：

经过前三章的实战，相信你已经掌握了构建企业网站的方法，并对 tailwind css 更加的熟悉。当然，若想获取更多的网站模块可进入 Kooboo官网 查看下载哦~

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（三）

基于前两篇内容，继续完善企业官网页面： Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（一）-CSDN博客 Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（二）-CSDN博客 3.5 联系方…...

编程日记 2025/5/22 20:43:55

Opencv中图像深度（Depth）和通道数（Channels）区别

在OpenCV中，图像深度（Depth）和通道数（Channels）是两个完全不同的概念，需严格区分。以下是详细解析： 图像深度（Depth） 定义：指图像中每个像素通道的位数&#…...

编程日记 2025/5/22 19:39:55

【网络原理】从零开始深入理解HTTP的报文格式(一)

本篇博客给大家带来的是网络HTTP协议的知识点, 重点介绍HTTP的报文格式. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅&#x1f68…...

编程日记 2025/5/22 19:46:32

Go语言之路————接口、泛型

Go语言之路————接口前言接口定义实操，接口的定义和实现接口的继承空接口和Any 泛型类型集结语前言我是一名多年Java开发人员，因为工作需要现在要学习go语言，Go语言之路是一个系列，记录着我从0开始接触Go，到后…...

编程日记 2025/5/11 20:48:44

Go语言中的 `time.Tick` 函数详解

time.Tick 是 Go 标准库中用于创建周期性定时器的简便函数。函数签名 func Tick(d Duration) <-chan Time核心功能创建一个周期性的定时器通道当 d < 0 时返回 nil返回一个只读的时间通道，定期发送当前时间与 NewTicker 的关系 time.Tick 是 time.New…...

编程日记 2025/5/22 19:55:35

打印及判断回文数组、打印N阶数组、蛇形矩阵

打印回文数组 1 1 1 1 1 1 2 2 2 1 1 2 3 2 1 1 2 2 2 1 1 1 1 1 1方法1： 对角线对称左上和右下是对称的。所以先考虑左上打印， m i n ( i 1 , j 1 ) \text min(i1,j1) min(i1,j1)，打印出来： 1 1 1 1 1 2 2 2 1 2 3 3 1 2 …...

编程日记 2025/5/22 20:02:44

【图像融合】基于非负矩阵分解分解 CNMF的高光谱和多光谱数据融合附MATLAB代码

基于CNMF的高光谱与多光谱数据融合技术详解一、非负矩阵分解（NMF）与约束非负矩阵分解（CNMF）的核心原理 NMF的基本概念非负矩阵分解（NMF）是一种通过将非负矩阵分解为两个非负矩阵乘积的降维方法。给定非负…...

编程日记 2025/5/8 10:42:38

HarmonyOS NEXT 诗词元服务项目开发上架全流程实战（一、项目介绍及实现效果）

在当今数字化时代，如何让传统文化与现代科技相结合，成为了一个值得思考的问题。诗词作为中国传统文化的重要组成部分，承载着丰富的历史信息和文化内涵。为了让更多人了解和欣赏诗词的魅力，我们决定开发一款基于HarmonyOS NEXT的诗…...

编程日记 2025/5/15 17:57:49

线性代数与数据学习

The Functions of Deep Learning (essay from SIAM News, December 2018) Deep Learning and Neural Nets...

编程日记 2025/5/22 20:27:06

Linux中的计划任务

一次性任务功能介绍： 如果我们希望在将来的某个时间点去执行某件事件，这个事件执行完后任务就结束，那么我们就可以使用一性计划任务。而要实现这种功能，我们需要任务 atd 服务。我们先查询一下系统是否存在这个服务。查看是…...

编程日记 2025/5/22 20:04:28

【C++】线程池

C 线程池介绍什么是线程池？ 线程池（Thread Pool） 是一种并发编程模型，用于管理和复用多个线程，避免频繁创建/销毁线程的开销。它通过预创建一组线程，并将任务提交到队列中，由空闲线程自动执行…...

编程日记 2025/5/22 19:28:53

美团社招一面

美团社招一面做题 1、面试题 <style> .outer{width: 100px;background: red;height: 100px; }.inner {width: 50px;height: 50px;background: green; }</style> <div class"outer"><div class"inner"></div> </div>…...

编程日记 2025/5/22 19:27:08

C++:BST、AVL、红黑树

C:BST、AVL、红黑树二叉搜索树（BST）二叉平衡搜索树（AVL）红黑树（RBT）三者对比什么情况下使用？C 标准库中的使用总结二叉搜索树（BST） 二叉搜索树（Binary Sea…...

编程日记 2025/5/19 18:34:20

算法笔记.染色法判断二分图

题目：（来自AcWing） 给定一个 n 个点 m 条边的无向图，图中可能存在重边和自环。请你判断这个图是否是二分图。输入格式第一行包含两个整数 n 和 m。接下来 m 行，每行包含两个整数 u 和 v，表示点 u …...

编程日记 2025/4/29 19:26:38

在 IDEA 中写 Spark 程序：从入门到实践

在大数据处理领域，Apache Spark 凭借其出色的性能和丰富的功能受到广泛欢迎。而 IntelliJ IDEA 作为一款功能强大的 Java 集成开发环境，为编写 Spark 程序提供了极大的便利。本文将详细介绍如何在 IDEA 中搭建 Spark 开发环境并编写运行 Spark 程序&…...

编程日记 2025/4/29 19:20:05

[Spring] Sentinel详解

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…...

编程日记 2025/4/29 19:14:28

让数据优雅落地：用 serde::Deserialize 玩转结构体实体

前言想象一下，服务器突然飞来一堆 JSON 数据，就像一群无头苍蝇冲进办公室，嗡嗡作响，横冲直撞。此刻，你的任务，就是把这群“迷路数据”安置进正确的格子里，分门别类，秩序井然，不混不乱，不漏一只。好在 Rust 早就为我们备好瑞士军刀：serde::Deserialize。它不仅刀…...

编程日记 2025/5/15 13:43:23

【wpf】 WPF中实现动态加载图片浏览器（边滚动边加载）

WPF中实现动态加载图片浏览器（边滚动边加载） 在做图片浏览器程序时，遇到图片数量巨大的情况（如几百张、上千张），一次性加载所有图片会导致界面卡顿甚至程序崩溃。本文介绍一种 WPF Prism 实现动态分页加…...

编程日记 2025/5/2 7:43:02

Flow原理

fun main() {runBlocking {launch {flow4.collect{println("---collect-4")}println("---flow4")}}val flow4 flow<Boolean>{delay(5000)emit(false) } 我们分析下整个流程 1.flow为什么之后在collect之后才会发送数据 2.collect的调用流程我…...

编程日记 2025/5/4 13:39:30

业绩回暖、股价承压，三只松鼠赴港上市能否重构价值锚点？

在营收重返百亿俱乐部后，三只松鼠再度向资本市场发起冲击。 4月25日，这家坚果零食巨头正式向港交所递交上市申请书，若成功登陆港股，将成为国内首个实现“AH”双上市的零食品牌。其赴港背后的支撑力，显然来自近期披露…...

编程日记 2025/5/22 19:46:33

基于大模型的胆总管结石全流程预测与临床应用研究报告

目录一、引言 1.1 研究背景 1.2 研究目的与意义 1.3 研究方法和创新点二、大模型在胆总管结石预测中的应用原理 2.1 大模型概述 2.2 模型构建的数据来源与处理 2.3 模型训练与优化三、术前预测与准备 3.1 术前胆总管结石存在的预测 3.2 基于预测结果的术前检查方…...

编程日记 2025/5/22 20:07:40

QT—布局管理器之BoxLayout篇

1.布局管理器的概述在Qt中，使用布局管理器的主要原因是它能够自动管理组件的大小和位置，从而实现灵活且动态的界面布局。布局管理器可以自动调整组件以适应窗口大小的变化，确保界面在不同分辨率和设备上都能保持良好的显示效果。这不仅减少了…...

编程日记 2025/5/15 4:30:58

如何在 IntelliJ IDEA 中编写 Speak 程序

在当今数字化时代，语音交互技术越来越受到开发者的关注。如果你想在 IntelliJ IDEA（一个强大的集成开发环境）中编写一个语音交互（Speak）程序，那么本文将为你提供详细的步骤和指南。一、环境准备在开始编…...

编程日记 2025/5/2 16:47:25

湖北理元理律师事务所：债务优化的法律机制与民生实践

在债务纠纷日益增多的社会背景下，合法、规范的债务管理服务成为民生需求的重要环节。湖北理元理律师事务所作为经国家司法局注册登记的债事服务机构，以法律为工具，探索出一套覆盖债务咨询、规划与风险防控的服务体系。 1.法律服务的专业化框…...

编程日记 2025/5/21 3:51:10

练习普通话，说话更有节奏

玲珑塔，塔玲珑，玲珑宝塔第一层，一张高桌四条腿， 一个和尚一本经。一个铙钹一口磬，一个木鱼一盏灯。一个金玲，整四两，风儿一刮响哗愣。玲珑塔，隔过两层数三层，三张高桌十…...

编程日记 2025/5/22 20:16:46

链表相关——Python实现

一、链表的创建及数据插入示例代码： #1.定义一个结点类 class ListNode():def __init__(self,x,nextNone):self.valxself.nextnext #2.定义单链表 class LinkList():#2.1 创建一个头指针为空的链表def __init__(self,headNone):self.headNone#2.2 将数据插入链表…...

编程日记 2025/5/22 19:51:35

[OS_9] C 标准库和实现 | musl libc | offset

在你感觉有困难的时候，计算机一定有解决办法操作系统为我们提供了对象和操作它们的 API：我们学习了进程管理的 fork, execve, exit, waitpid；内存管理的 mmap；文件 (对象) 管理的 open, read, write, dup, close, pipe, …… 大…...

编程日记 2025/5/13 10:25:33

【氮化镓】质子辐照对 GaN-on-GaN PiN 二极管电导调制的影响

2025 年，中国科学技术大学的 Xuan Xie 等人采用实验研究的方法，深入探究了 10-MeV 和 50-MeV 质子辐照（ fluence 最高达 11014 cm−2）对 kV 级垂直 GaN-on-GaN PiN 二极管的导电调制影响。研究背景在于空间应用中的功率电子电路易受质子、α 粒子和重离子等影响而降级甚至失…...

编程日记 2025/5/22 19:28:26

深入浅出限流算法（一）：简单但有“坑”的固定窗口计数器

在现代分布式系统和 API 设计中，限流 (Rate Limiting) 是一个不可或缺的环节。它像一个尽职的门卫，保护着我们的服务资源，防止因突发流量或恶意攻击导致系统过载，同时也能确保资源的公平分配。实现限流的算法多种多样&#xff0…...

编程日记 2025/5/20 11:57:23

项目上线流程梳理（Linux宝塔面板）

项目部署（Linux宝塔面板） 一、准备工作 1、后端项目梳理配置添加application-prod.yml使用maven进行打包生成jar包 2、前端项目修改request.ts请求的后端端口（服务器地址）打包二、服务器 1、服务器环境安装 2、初始化数…...

编程日记 2025/5/18 8:12:59

MCP Servers快速了解一文搞懂 MCP Servers mcp server网站 https://mcpservers.orghttps://mcp.sohttps://glama.ai/mcp/servershttps://www.pulsemcp.com 一、安装&配置mcp clients mcp clients可以使用客户端（常见claude desktop，但claude需…...

编程日记 2025/5/22 1:02:49

永磁同步电机控制算法-转速环电流环SMC控制器

一、原理介绍为改进传统PI转速环电流环控制器易超调、抗干扰性能差的问题，转速环采用一阶滑模控制器，电流环采用二阶滑模控制器。二、仿真验证在MATLAB/simulink里面验证所提算法，采用和实验中一致的控制周期1e-4，电机部分计…...

编程日记 2025/5/21 11:17:31

Nginx支持HTTP2/HTTP3的并用CURL测试

对比HTTP2和HTTP3 HTTP/3 相比 HTTP/2 的主要优势： 项目HTTP/2HTTP/3传输层基于 TCP（ TLS）基于 QUIC（内置 TLS）建立连接速度慢，至少 2~3 次握手（TCP TLS）快，只需 1 次握…...

编程日记 2025/5/22 16:23:06

阅读MySQL实战45讲第11天

目录引言： 基本原理排序方式索引排序文件排序（File Sort） 优化建议一、全字段排序二、rowid 排序如果 MySQL 认为排序的单行长度太大会怎么做呢？ 1. 使用磁盘临时表 2. 分阶段排序 3. 产生警告或错误三、全字段排序 VS ro…...

编程日记 2025/5/21 10:59:44

linux 使用nginx部署vue、react项目

前言本文基于：操作系统 CentOS Stream 8 使用工具：Xshell8、Xftp8 1.安装依赖安装gcc、gcc-c yum install gcc gcc-c -y安装pcre、pcre-devel yum install pcre pcre-devel -y安装zlib、zlib-devel yum install zlib zlib-devel -y安装openssl、…...

编程日记 2025/4/29 17:15:03

逆向设计——CWDM_splitter

一、创建结构 switchtolayout; selectall; delete;## SIM PARAMS num_wg = 4; wg_width = 0.5e-6; out_wg_dist = 1e-6; mode_width = 3*wg_width; total_wg_h = num_wg*wg_width + (num_wg-1)*out_wg_dist;opt_size_x=6e-6; opt_size_y=6e-6;size_x=opt_size_x+1e-6; size_y=o…...

编程日记 2025/4/29 17:13:57

基于前两篇内容，继续完善企业官网页面：

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（一）-CSDN博客

Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（二）-CSDN博客

3.5 联系方式

1.1 整体容器

代码解释：

1.2 核心卡片区域（视觉焦点）

代码解释：

1.3 响应式网格布局（核心排版）

2. 表单区域

代码解释：

3. 联系信息区域

代码解释：

4. 关注我们区域

代码解释：

效果展示：

3.6 页脚区域

1. 整体容器

代码解释：

2. 公司信息区域

代码解释：

3. 导航模块（产品服务 / 关于我们 / 法律声明）

代码解释：

4. 版权声明

代码解释：

效果展示：

总结：

相关文章：