【Java Web基础】一些网页设计基础（四）

news2025/10/31 6:07:13

文章目录

  • 1. 做Tab切换
  • 2. 下面的内容展示——Card样式
  • 3. 采供分类，分类用面包屑导航做
  • 4. 出名企业展示，就是普通的图片
  • 5. 用热门商品类似的panel做一个农博会展览

1. 做Tab切换

使用BootStrap提供的样式：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

一个button对应一个tab切换，这是通过data-bs-target指定的，根据需要做一下修改就可以：

<div class="col-md-12 column">
    <div class="tabbable" id="tabs-427464">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#panel-589403" type="button" role="tab" aria-controls="panel-589403" aria-selected="true">热门商品</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#panel-517358" type="button" role="tab" aria-controls="panel-517358" aria-selected="false">推荐商品</button>
            </li>
        </ul>
        <div class="tab-content">
              <div class="tab-pane active" id="panel-589403">...</div>
              <div class="tab-pane active" id="panel-517358">...2</div>
        </div>
    </div>
</div>

根据需要设置样式：

#myTab { background-color: white; justify-content: left; margin-top: 10px; font-size: 1.3rem; }
#myTab li button { color: #fff9f8; font-weight: bold; background-color: #b4d5e3;  }
#myTab .nav-item .active { background-color: #337ab7 }
#myTab li button:hover { background-color: #337ab7; }

效果如下：
在这里插入图片描述
鼠标放置在推荐商品button上：
在这里插入图片描述

鼠标点击推荐商品button后：
在这里插入图片描述

在这里插入图片描述

2. 下面的内容展示——Card样式

用一个卡片，上图片下内容就可以Bootstrap5-Card
稍微调整一下CSS就好了，代码如下：

<div class="tab-content">
    <div class="tab-pane active" id="panel-589403">
        <div class="row">
            <div class="col-md-2">
                <div class="card" style="background: #eaeaea">
                    <img alt="300x200" src="/img/productsPicture/recommend1.jpg" />
                    <div class="text-center">红色经典</div>
                </div>
            </div>
            <!-- 上面内容重复六次 -->
        </div>
    </div>
    <div class="tab-pane" id="panel-517358">
        <div class="row">
            <div class="col-md-2">
                <div class="card" style="background: #eaeaea">
                    <img alt="300x200" src="/img/productsPicture/recommend1.jpg" />
                    <div class="text-center">红色经典</div>
                </div>
            </div>
            <!-- 上面内容重复六次 -->
        </div>
    </div>
</div>

CSS设置如下：

/*热门、推荐内容*/
#panel-589403 .row, #panel-517358 .row { margin-top: -5px; }
#panel-589403 .row .col-md-2 .card, #panel-517358 .row .col-md-2 .card { background: #eaeaea; display: flex; justify-content: center; align-items: center; }
#panel-589403 .row .col-md-2 .card img, #panel-517358 .row .col-md-2 .card img{ max-width: 95%; max-height: 95% }

效果如下：
在这里插入图片描述

3. 采供分类，分类用面包屑导航做

Bootstrap5-Breadcrumb
以其中一列代码为例：

<div class="col-md-6 column">
     <h5>油料作物</h5>
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="#">大米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">小米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">杂粮</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">花生</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">油菜</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">面粉</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">大米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">小米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">杂粮</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">更多</a>
             </li>
         </ol>
     </nav>
     <h5>蔬菜作物</h5>
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="#">大米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">小米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">杂粮</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">花生</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">油菜</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">面粉</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">杂粮</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">花生</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">油菜</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">更多</a>
             </li>
         </ol>
     </nav>
     <h5>肉类</h5>
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="#">大米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">小米</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">杂粮</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">花生</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">油菜</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">面粉</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">杂粮</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">花生</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">油菜</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="#">更多</a>
             </li>
         </ol>
     </nav>
 </div>

CSS，和之前相似的代码集成了一下：

#tabs-284336 { margin-top: 15px; }
#panel-119806 { border: none; }
#panel-119806 div h5 { margin-top: 10px; }
#panel-119806 div nav {background-color: #f5f5f5; padding: 10px 0 2px 15px;}
#panel-119806 div nav ol li a { color: black }
#panel-119806 div nav ol li a { text-decoration: none; }
#panel-119806 div nav ol li a:hover { color: #56ac69; }

效果：
在这里插入图片描述

4. 出名企业展示，就是普通的图片

<!--名企优录-->
                    <div class="tabbable" id="tabs-126549" style="margin-top: 20px">
                        <ul class="nav nav-pills nav-fill title-bg">
                            <li class="nav-item">
                                <a class="nav-link " id="new-goodenterprise-title" aria-current="page">名企优录</a>
                            </li>
                        </ul>
                        <div class="tab-content" >
                            <div class="tab-pane active" id="panel-612913"  >
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="img-thumbnail" >
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand1.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand2.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"> <img height="62px" src="/img/productsPicture/brand3.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"> <img height="62px" src="/img/productsPicture/brand4.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand5.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand6.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"> <img height="62px" src="/img/productsPicture/brand7.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand8.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand9.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand10.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand11.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand12.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand13.gif" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand14.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand15.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand16.png" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand17.jpg" /></a>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="img-thumbnail">
                                            <a href="#"><img height="62px" src="/img/productsPicture/brand18.jpg" /></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

配置一些CSS属性：

/*名企优录*/
#panel-612913 div div div a img { width: 100% }
#panel-612913 div div{ margin-top: 5px }

效果：
在这里插入图片描述

5. 用热门商品类似的panel做一个农博会展览

样式什么都差不多，改了下信息而已
在这里插入图片描述

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

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

相关文章

【Linux】系统开启和关闭过程

【Linux】系统开启和关闭过程

Linux 系统启动过程 BIOS 自检&#xff1a;在计算机开机时&#xff0c;BIOS 会进行自检&#xff0c;检查硬件设备是否正常。 加载引导程序&#xff1a;BIOS 自检完成后&#xff0c;会加载引导程序&#xff0c;如 GRUB、LILO 等。引导程序会加载内核和初始化 RAM 磁盘&#xff…
阅读更多...
005——串口移植（基于鸿蒙liteos-a）

005——串口移植（基于鸿蒙liteos-a）

目录 一、 Liteos-a中串口的使用 1.1 内核里打印 1.2 APP控制台 ​编辑 1.2.1 /dev/console 1.2.2 /dev/serial 1.2.3 /dev/uartddev-0 1. 总体介绍 2. device_t 3. drvier_t 4. uartdev_fops 1.2.4 uart_ops 二、 鸿蒙串口内部的一些机制&#xff08;流水账&…
阅读更多...
实用福利网站分享

实用福利网站分享

1.http://www.w3school.com.cn w3school&#xff0c;很好的在线web学习网站&#xff0c;免费 2.https://sklearn.apachecn.org sklearn文档&#xff0c;虽然是文档&#xff0c;但能学到很多很多具体的机器学习例子和知识 3.http://www.runoob.com 菜鸟教程&#xff0c;也是…
阅读更多...
GTC大会干货：8位大佬对Transformer起源和未来发展的探讨

GTC大会干货：8位大佬对Transformer起源和未来发展的探讨

在2024年的GTC大会上&#xff0c;黄仁勋特邀Transformer机器语言模型的七位创造者&#xff0c;共同探讨Transformer模型的过去、现在与未来。他们一致认为&#xff0c;尽管Transformer已经成为现代自然语言处理领域的基石&#xff0c;但这个世界仍然需要超越Transformer的新颖架…
阅读更多...
使用远程工具连接Mysql

使用远程工具连接Mysql

&#xff08;若想要远程连接Mysql需要下面解决四个问题&#xff09; 1、目标地址 直接查询 2、端口号 3306 3、防火墙关闭 [rootlocalhost date]# systemctl stop firewalld.service 4、授权mysql数据库root用户权限&#xff08;因为mysql开始不允许其他IP访问&#xff0…
阅读更多...
Java 栈与队列

Java 栈与队列

一、栈 在Java中&#xff0c;实现栈有两个方法&#xff1a; Java本身的集合类型Stack类型。Stack集合类型继承于Vector&#xff0c;由于Vector是通过数组实现的&#xff0c;所以Stack集合类型也是通过数组来实现的。借用LinkedList来间接实现栈。LinkedList是双向链表&#x…
阅读更多...
【pcolor数据可视化】Matlab vs. Python

【pcolor数据可视化】Matlab vs. Python

1、Matlab代码及结果 代码 clear;clc load(.\nclcolormap.mat)sl [0,50,100,200,500,0]; el [50,100,200,500,1000,200];for i 1:length(sl)file [..\data\static_result\VIS_Min-,num2str(sl(i)),to,num2str(el(i)),_yearly.npy];data readNPY(file);maskreadNPY(.\mas…
阅读更多...
2024阿里云服务器99计划优惠活动_开年采购季优惠价格表

2024阿里云服务器99计划优惠活动_开年采购季优惠价格表

2024阿里云开年采购活动3月优惠&#xff0c;99计划云服务器99元一年、免费领取上云扶持优惠券&#xff0c;不只是云服务器、云数据库、存储、云电脑、域名等均有活动&#xff0c;阿里云服务器网aliyunfuwuqi.com整理阿里云开年采购上云无忧活动入口、优惠价格表和优惠券领取详细…
阅读更多...
【Linux】信号的处理{信号处理的时机/了解寄存器/内核态与用户态/信号操作函数}

【Linux】信号的处理{信号处理的时机/了解寄存器/内核态与用户态/信号操作函数}

文章目录 0.对于信号捕捉的理解1.信号处理的时机1.1 何时处理信号&#xff1f;1.2 内核态和用户态1.3 内核态和用户态的切换 2.了解寄存器3.信号捕捉的原理4.信号操作函数4.1sighandler_t signal(int signum, sighandler_t handler);4.2int sigaction(int signum, const struct…
阅读更多...
代码随想录算法训练营第三十一天 | 455. 分发饼干、376. 摆动序列、53. 最大子数组和

代码随想录算法训练营第三十一天 | 455. 分发饼干、376. 摆动序列、53. 最大子数组和

代码随想录算法训练营第三十一天 | 455. 分发饼干、376. 摆动序列、53. 最大子数组和 455. 分发饼干题目解法 376. 摆动序列题目解法 53. 最大子数组和题目解法 感悟 455. 分发饼干 题目 解法 class Solution { public:int findContentChildren(vector<int>& g, vec…
阅读更多...
大模型时代，5个最顶级的向量数据库

大模型时代，5个最顶级的向量数据库

介绍5个向量数据库。 大模型时代&#xff0c;向量数据库彻底的火了&#xff0c;今天我分享业内最频繁使用的向量数据库&#xff0c;更多实践经验&#xff0c;可以文末参加我们的技术落地的讨论&#xff0c;喜欢本文记得收藏、关注、点赞。 1 Chroma 使用ChromaDB构建LLM应用程…
阅读更多...
D咖：颠覆传统，重塑无人自助饮品机新篇章

D咖：颠覆传统，重塑无人自助饮品机新篇章

在当今的快节奏社会中&#xff0c;智能科技正在以前所未有的速度渗透到生活的各个方面&#xff0c;从智能手机到智能家居&#xff0c;它们不仅极大地提高了我们的生活效率&#xff0c;也在不断地改善和丰富我们的生活体验。而饮品行业&#xff0c;作为人们日常生活中不可或缺的…
阅读更多...
TCP协议的粘包问题解决方式

TCP协议的粘包问题解决方式

粘包问题 首先说明一点&#xff0c;TCP有粘包问题&#xff0c;UDP没有粘包问题。 发送端可以是1KB地发送数据&#xff0c;而接收端的应用程序可以2KB地提走数据&#xff0c;当然也有可能一次提走3K或6K数据&#xff0c;或者一次只提走几个字节的数据&#xff0c;也就是说&…
阅读更多...
VS Code 跳板机登录服务器（手打密码+秘钥登录）

VS Code 跳板机登录服务器（手打密码+秘钥登录）

目录 0.为什么要用跳班机登陆服务器&#xff1f; 1.VS Code插件安装及ssh安装 2.密码链接方式 1&#xff09;添加ssh设置&#xff0c;设置主机 2)设置跳板机 Tips:可以直接通过窗口连接文件管理 3.密钥连接方式&#xff08;更安全更方便&#xff09; 1&#xff09;mac版…
阅读更多...
常见优化器对比：梯度下降法、带动量的梯度下降法、Adagrad、RMSProp、Adam

常见优化器对比：梯度下降法、带动量的梯度下降法、Adagrad、RMSProp、Adam

系列文章目录 李沐《动手学深度学习》线性神经网络 线性回归 李沐《动手学深度学习》优化算法&#xff08;相关概念、梯度下降法、牛顿法&#xff09; 李沐《动手学深度学习》优化算法&#xff08;经典优化算法&#xff09; 文章目录 系列文章目录一、梯度下降法&#xff08;一…
阅读更多...
java 泛型（下）

java 泛型（下）

本篇文章主要说明的是类型通配符、可变参数、可变参数的使用等。 在学习之前&#xff0c;希望能对泛型有个大概了解&#xff0c;可参考链接 java 泛型&#xff08;上&#xff09;-CSDN博客 也希望对泛型类、泛型接口、泛型方法有个大概的认识及使用&#xff0c;可参考链接 j…
阅读更多...
Transformer学习【从零理解】

Transformer学习【从零理解】

Transformer 一、整体框架 二、Encoder 1.输入部分: &#xff08;1&#xff09;Embedding&#xff1a;将输入的词转换为对应的词向量。 &#xff08;2&#xff09;位置编码&#xff1a;因为保证输出时&#xff0c;顺序不会打乱&#xff0c;所以要加入时序信息即位置编码。 公…
阅读更多...
Linux：权限的概念与理解

Linux：权限的概念与理解

目录 1. Linux权限的概念 2. Linux权限管理 01.文件访问者的分类 02.文件类型和访问权限 03.文件权限值的表示方法 04. 文件访问权限的相关设置方法 3. 使用 sudo分配权限 4. 目录的权限 ---------- 权限 用户角色(具体的人) 文件权限属性 ---------- 1. Linux权限的…
阅读更多...
JavaScrpt学习笔记_一

JavaScrpt学习笔记_一

一、Js编写位置 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> <!-- 可以将js代码编写到外部js文件中&#xff0c;然后通过script标签引入写到外部文件中可以在不同页面中…
阅读更多...
乐得瑞科技PD协议芯片：OTG与充电并行，引领数据交互

乐得瑞科技PD协议芯片：OTG与充电并行，引领数据交互

在科技日新月异的今天&#xff0c;数据交互的方式对于我们的日常生活和工作都起到了至关重要的作用。但在OTG技术诞生之前&#xff0c;这一过程却显得相当繁琐和耗时。想象一下&#xff0c;你需要将数码相机的照片导入到笔记本电脑中&#xff0c;却不得不频繁地拔出内存卡&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023