【Java Web基础】一些网页设计基础(四)

文章目录

  • 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.mzph.cn/news/762743.shtml

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

相关文章

【Redis】缓存穿透

问题发生背景&#xff1a;客户端请求的数据再缓存中和数据库中都不存在。 导致的问题&#xff1a;缓存永远不会生效&#xff0c;这些请求都会去请求数据库—导致数据库压力增大。 解决方案&#xff1a; 1.缓存空对象 在Redis中缓存空对象&#xff0c;告诉客户端数据库中没有该值…

uni-app攻略:如何对接驰腾打印机

一.引言 在当前的移动开发生态中&#xff0c;跨平台框架如uni-app因其高效、灵活的特点受到了开发者们的青睐。同时&#xff0c;随着物联网技术的飞速发展&#xff0c;智能打印设备已成为许多业务场景中不可或缺的一环。今天&#xff0c;我们就来探讨如何使用uni-app轻松对接驰…

Codeforces Round 935 (Div. 3)A~E

A. Setting up Camp 题目分析: 有三种人&#xff0c;内向、外向、综合&#xff0c;内向必须独自一个帐篷&#xff0c;外向必须3个人一个帐篷&#xff0c;综合介于1~3人一个帐篷&#xff0c;我们发现非法情况只会存在外向的人凑不成3个人一个帐篷的情况&#xff0c;因外向不够可…

软件管理rpm与yum

源代码包下载 Compare, Download & Develop Open Source & Business Software - SourceForgehttps://sourceforge.net/ rpm包下载 Welcome to the RPM repository on fr2.rpmfind.nethttp://rpmfind.net/linux/RPM/ 软件包管理 1.rpm包管理: 1)查询: 安装…

微隔离有哪些作用

当前&#xff0c;在零信任安全渐渐被大家熟知的情况下&#xff0c;很多用户在网络安全方面有了更深的认知。在网络安全领域&#xff0c;许多企业用户认为零信任对于降低网络安全风险至关重要&#xff0c;有助于在复杂的网络环境中保护自身企业资源免受未经授权的访问和潜在的网…

HDFSRPC安全认证Token篇

本文主要阐述HDFSRPC安全认证相关的实现。主要介绍Token相关的实现。 写在前面 相关blog https://blog.csdn.net/hncscwc/article/details/124722784 https://blog.csdn.net/hncscwc/article/details/124958357 Token由来 在探究完Kerberos&#xff0c;我一直在想一个问题…

python基本概念和基本数据类型

一、基本概念 1.变量 变量是编程语言中最基本的概念&#xff0c;和字面意思一样&#xff0c;指的就是他们的值可变&#xff0c;和我们以前学习的方程类似&#xff0c;变量可以代入任何值。 命名规范&#xff1a;变量一般使用&#xff1a; 英文字母、下划线 和 数字组成 2.关键…

3.21 day2 QT

自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面 要求: 1.需要使用Ui界面文件进行界面设计 2.ui界面上的组件相关设置&#xff0c;通过代码实现 3需要添加适当的动图

模拟堆(详解+例题)

一、定义 维护一个数据集合&#xff0c;堆是一个完全二叉树。 那么什么是二叉树呢&#xff1f; 如图&#xff1a; 二、关于小根堆实现 性质&#xff1a;每个根节点都小于等于左右两边&#xff0c;所以树根为最小值。 2.1、堆存储&#xff08;用一维数组来存&#xff09; 记住…

GifGun2汉化版点击渲染失败,弹窗提示“lossless不是有效的模板名称”

总算解决了&#xff0c;记录一下方法&#xff1a; 1&#xff09;在AE顶部导航&#xff0c;点击“编辑 > 模板 > 输出模块” 2&#xff09;新建一个名为GifGun的输出模块&#xff0c;为后续GifGun引用做准备。&#xff08;取名随意&#xff09; 3&#xff09;在AE顶部导航…

软件测试教程 自动化测试之Junit框架

文章目录 1. 什么是 Junit &#xff1f;2. 常见的注解2.1 Test2.2 BeforeAll&#xff0c;AfterAll2.3 BeforeEach&#xff0c;AfterEach 3. 测试用例顺序指定4. 参数化4.1 单个参数4.2 多个参数4.3 通过方法生成 5. 测试套件6. 断言6.1 断言相等6.2 断言不相等6.3 断言为空6.4 …

山东省大数据局副局长禹金涛一行莅临聚合数据走访调研

3月19日&#xff0c;山东省大数据局党组成员、副局长禹金涛莅临聚合数据展开考察调研。山东省大数据局数据应用管理与安全处处长杨峰&#xff0c;副处长都海明参加调研&#xff0c;苏州市大数据局副局长汤晶陪同。聚合数据董事长左磊等人接待来访。 调研组一行参观了聚合数据展…

软件设计师笔记

计算机 运算器组成&#xff1a;算术逻辑单元(ALU)、累加寄存器(AC)、数据缓冲寄存器(DR)、状态条件寄存器()等组成。 控制器组成&#xff1a;指令寄存器(IR)、程序计数器(PC)、地址寄存器(AR)、指令译码器(ID)。 最小数据单位&#xff1a;bit 最小存储单位: byte n进制 转 1…

蓝桥杯单片机备战——关于573问题的填坑

一、遇到的问题 还记得我前面在封装继电器外设的时候遇到的这个问题嘛&#xff0c;当时我怀疑的是138译码器在切换通道的时候会出现其他暂态导致已经锁定的573解锁。 其实不然&#xff0c;之所以会这样还是因为代码问题&#xff0c;也可以说是573反应时间太快了。下面我就分析…

麒麟系统中使用nginx发布项目

1. 安装Nginx sudo apt-get update #进行所有安装操作前都要执行这一句 sudo apt install nginx #出现询问就Yes参考具体 Nginx—在linux的ubuntu系统上的安装使用 2. 修改发布文件 将打包好的dist文件夹中的所有文件覆盖下面这个文件夹中的所有文件 如果出现没有权限替…

openEuler 22.03(华为欧拉)一键安装 Oracle 19C RAC(19.22) 数据库

前言 Oracle 一键安装脚本&#xff0c;演示 openEuler 22.03 一键安装 Oracle 19C RAC 过程&#xff08;全程无需人工干预&#xff09;&#xff1a;&#xff08;脚本包括 ORALCE PSU/OJVM 等补丁自动安装&#xff09; ⭐️ 脚本下载地址&#xff1a;Shell脚本安装Oracle数据库…

OPPO案例 | Alluxio在DataAI湖仓一体的实践

分享嘉宾&#xff1a; 付庆午-OPPO数据架构组大数据架构师 在OPPO的实际应用中&#xff0c;我们将自研的Shuttle与Alluxio完美结合&#xff0c;使得整个Shuttle Service的性能得到显著提升&#xff0c;基本上实现了性能翻倍的效果。通过这一优化&#xff0c;我们成功降低了约一…

BetterDisplay Pro:让屏幕管理更高效、更便捷

BetterDisplay Pro是一款功能强大的显示器管理软件&#xff0c;适用于Windows和Mac操作系统。其主要功能包括显示器校准、自动校准、多种预设模式、手动校准以及可视化数据等。 具体而言&#xff0c;这款软件可以根据用户的需求和环境条件调整显示器的颜色、亮度和对比度等参数…

53、简述GCN、NIR、FMIR技术在脑机BCI的发展调查[什么?你咋也叫王富贵?]

最近在搞GCN处理EEG&#xff0c;调查了十几篇文献&#xff0c;总结了一些东西&#xff0c;和学生分享一下&#xff0c;此处只分享一些较为浅显的知识。如下&#xff1a; GCN在其他领域的应用&#xff1a; 1、计算机视觉&#xff1a; 图卷积神经网络在计算机视觉中的应用包括图…

好用的客服快捷回复软件推荐

在当今快节奏的商业环境中&#xff0c;客户服务的效率和质量已经成为企业成功的关键因素之一。对于客服工作人员来说&#xff0c;面对海量的客户咨询和问题解答&#xff0c;如何快速而准确地回复&#xff0c;成为了他们日常工作中的一大挑战。选择一款好用的快捷回复工具是非常…