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

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

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

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

---

3.5 联系方式

1.1 整体容器

代码解释：

• 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 核心卡片区域（视觉焦点）

代码解释： 

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

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

代码解释：

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

2. 表单区域

        

          
联系我们
          

            

              
                姓名 *
              
              
            

            

              
                邮箱 *
              
              
            

            

              
                留言 *
              
              
            

            
    提交咨询
    

          
        

代码解释：

• 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. 联系信息区域

 
        

          
          

            
联系方式
            

              

                
                

                  
400-123-4567
                  
工作日 9:00-18:00 免长途费
                
              

              

                
                

                  
[email protected]
                  
24小时内回复 技术/合作专属通道
                
              
            
          

代码解释：

• 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. 关注我们区域

 

    
关注我们
  

        
        
            Facebook
            
        
        
   
 

代码解释：

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

效果展示：

3.6 页脚区域

1. 整体容器

代码解释：

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

2. 公司信息区域

            

                
                

                    为企业提供全方位的
数字化转型方案
                
                

                    
                        
                    
                    
                        
                    
                    
                        
                    
                

代码解释：

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

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

  
产品服务
  

    

                
        
        提供解决方案
    
        
  

代码解释：

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

4. 版权声明

  
© 2024 科技企业. 保留所有权利
  
联系方式: [email protected]

代码解释：

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

效果展示：

总结：

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