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

文章目录

  • 1. 图片在盒子内部垂直居中
  • 2. 底部设计,图片或子元素居中于父盒子(水平、垂直),随着屏幕大小放大或缩小
  • 3. 使用thymeleaf的th:each会导致样式失效错乱问题

1. 图片在盒子内部垂直居中

用弹性盒子实现垂直居中及用css实现图片垂直居中
使用BootStrap的 Card布局的时候,发现图片是顶着(如下面的新闻所示)的,不太好看,想让图片垂直居中(如上面的图所示)
在这里插入图片描述
只需要用弹性盒子,在图片所在的盒子里加CSS属性

<div style="display: flex; justify-content: center; align-items: center">
</div>

2. 底部设计,图片或子元素居中于父盒子(水平、垂直),随着屏幕大小放大或缩小

先放代码:

<!--网页底部-->
<div style="height: 30px; width: 100%; background-color: rgb(86, 172, 105)"></div>
<div class="bottom-img" style="width: 100%; display: flex; justify-content: center; align-items: center"><img alt="..." src="/img/bottomPage.png" style="display: block; height: auto; width: auto; max-width: 100%; max-height: 100%">
</div>
<div style="height: 30px; width: 100%; background-color: rgb(86, 172, 105)"></div>

最核心的是首先设置父盒子宽度为100%,也就是随着屏幕大小的变化而变化
其次是设置了图片宽高是自适应变化的,但同时也设置了最大宽度和最大高度,要适应盒子的大小
为了保持图片始终居中于盒子,在父盒子上设置了flex属性,并调整垂直和水平居中
效果:
正常网页大小:
在这里插入图片描述
缩小网页后依然可以保证内容:
在这里插入图片描述

3. 使用thymeleaf的th:each会导致样式失效错乱问题

参照了这位哥提供的方法:thymeleaf模板中使用th:each会导致样式失效错乱问题
原本我的错误代码:

<ul class="info-content"  th:each="enterprise:${enterpriseNameList}"><li><a href="http://www.hbzhunong.com/home/?uid=1113" th:text="${enterprise.name}">...</a></li>
</ul>

错误的结果是:
在这里插入图片描述
注意:由于自己没有理解好th:each的用法,以为需要将th:each放在需要便利的容器的父容器中,然后子容器用其中的数据遍历,实际上th:each本身的容器就会遍历一遍,导致出现很多个同样样式的父容器,导致样式混乱。
所以正确的是:

<ul class="info-content"><li th:each="enterprise:${enterpriseNameList}"><a href="http://www.hbzhunong.com/home/?uid=1113" th:text="${enterprise.name}">...</a></li>
</ul>

正确效果:
在这里插入图片描述

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

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

相关文章

Advice学习

简介 在Spring框架的AOP&#xff08;面向切面编程&#xff09;中&#xff0c;Advice接口是定义通知行为的抽象。然而&#xff0c;在Spring的实际实现中&#xff0c;Advice接口并没有直接被使用。相反&#xff0c;我们更常见的是MethodInterceptor接口、BeforeAdvice接口、Afte…

利用GANs进行图像生成

生成对抗网络&#xff08;GANs&#xff09;是一种深度学习模型&#xff0c;由两部分组成&#xff1a;生成器&#xff08;Generator&#xff09;和判别器&#xff08;Discriminator&#xff09;。它们通过相互竞争来提高生成器生成高质量图像的能力。以下是如何利用GANs进行图像…

用 Open-Sora 高效创作视频,让创意触手可及

近年来&#xff0c;视频内容以爆炸式增长席卷了我们的生活。从短视频平台到直播带货&#xff0c;视频正成为人们获取信息和娱乐的主要方式。然而&#xff0c;传统视频制作流程往往耗时费力&#xff0c;对于普通用户来说门槛较高。 为了降低视频创作门槛&#xff0c;让更多人享…

无人机自动返航算法实现与优化

一、引言 随着无人机技术的快速发展&#xff0c;其在航拍、农业、救援等领域的应用越来越广泛。在这些应用中&#xff0c;无人机的自动返航功能显得尤为重要。一旦无人机失去控制或与遥控器失去连接&#xff0c;自动返航算法能够确保无人机安全返回起飞点&#xff0c;避免损失和…

【mybatis】MetaObject解读

MyBatis 是一款优秀的持久层框架&#xff0c;它内部封装了 JDBC&#xff0c;使数据库编程变得简单。其中&#xff0c;MetaObject 是 MyBatis 中一个非常重要的元数据对象处理类&#xff0c;它主要用于简化、优化对对象属性的访问。接下来&#xff0c;让我们深入了解 MetaObject…

windows上打开redis服务闪退问题处理

方法1&#xff1a;在windows上面打开redis服务时&#xff0c;弹窗闪退可能是6379端口占用&#xff0c;可以用以下命令查看&#xff1a; netstat -aon | findstr 6379 如果端口被占用可以用这个命令解决&#xff1a; taskkill /f /pid 进程号 方法2&#xff1a; 可以使用…

leetcode 3035

leetcode 3035 题目 例子 思路 统计字符出现的频次&#xff0c;5个a(字符可以成为回文)。 将所有字符放在一起考虑&#xff0c;因为字符是可以任意移动。[“aabb”,“a”] > [“abba”, “a”] 只要奇数个字符的种类&#xff0c;不要超过字符数组的size就可以。 代码实现…

IT部门领导的角色与责任:在挑战中塑造未来

前言 在当今快节奏的商业环境中&#xff0c;IT部门领导扮演着至关重要的角色。他们需要具备技术专长&#xff0c;同时也需要展现出卓越的领导力来有效地管理团队和应对各种挑战。 一、技术创新的引领者 1. 重要角色转变 随着信息技术的迅猛发展&#xff0c;IT部门领导已逐渐…

Android14 - Framework- Configuration的创建和更新

本文描述从启动一个新进程的Activity起&#xff0c;Framwork层Configuration的创建和传导过程。 首先&#xff0c;我们知道所有的Window容器都继承于WindowContainer&#xff0c;而WindowContainer本身是ConfigurationContainer的子类。于此同时&#xff0c;WindowProcessContr…

C语言经典例题(3) --- 汉诺塔问题、青蛙跳台阶问题

文章目录 1.汉诺塔问题2.青蛙跳台阶问题 1.汉诺塔问题 //汉诺塔问题&#xff08;递归实现&#xff09; //思路&#xff1a;1.将A中n-1个盘子放入B中&#xff0c;剩下最后一个&#xff08;第n个&#xff09;盘子放入C中。2.将B中n-1个盘子放入A中&#xff0c;剩下最后一个&…

3.21总结

D - Shufflem Up 在扑克桌上&#xff0c;扑克玩家常常会玩一种叫做“洗筹码”的游戏。洗筹码是通过将两堆扑克筹码 S1 和 S2 进行交错堆叠来完成的&#xff0c;每堆筹码包含 C 个筹码。每堆筹码可能包含多种不同颜色的筹码。 实际的洗牌操作是通过将 S1 中的一枚筹码与 S2 中的…

为什么高铁提前三分钟停止检票?

为什么高铁提前三分钟停止检票&#xff1f; 高铁&#xff0c;作为现代交通方式的代表&#xff0c;以其高速、便捷、舒适的特点受到了广大乘客的青睐。然而&#xff0c;在乘坐高铁的过程中&#xff0c;乘客们可能会遇到一个问题&#xff1a;为什么高铁会提前三分钟停止检票呢&a…

【LAMMPS学习】三、构建LAMMPS(6)在构建中包含软件包

3. 构建 LAMMPS 3.6.在构建中包含软件包 在 LAMMPS 中&#xff0c;包是一组启用一组特定功能的文件。例如&#xff0c;分子系统的力场或刚体约束都在封装中。在 src 目录中&#xff0c;每个包都是一个子目录&#xff0c;包名称为大写字母。 包文档页面上给出了包的概述。每…

jupyter notebook设置代码提示方法

在命令行运行以下代码&#xff1a; pip install jupyter_contrib_nbextensionsjupyter contrib nbextension install --userpip install jupyter_nbextensions_configuratorjupyter nbextensions_configurator enable --user &#xff08;有时安装第一行后会自动执行第二行&a…

python -u含义

python -u&#xff0c;Python运行选项 文章目录 python -u&#xff0c;Python运行选项python -u其他选项 python -u 在Python中&#xff0c;-u选项用于在输出中禁用缓冲。缓冲是一种将输出暂时存储在内存中&#xff0c;然后批量写入到文件或屏幕的技术。当Python程序的输出被重…

2024.3.18 JAVA编程的三层架构模式理解

2024.3.18 JAVA编程的三层架构模式理解 三层架构 controller&#xff1a;控制层&#xff0c;接收前端发送的请求。对请求进行处理&#xff0c;并响应数据。 service&#xff1a;业务逻辑层&#xff0c;处理具体的业务逻辑数据。 dao&#xff1a;数据访问层&#xff08;Data A…

【php基础】输出、变量、布尔类型、字符串

php基础补充 1. 输出2.和"的区别3.变量3.1变量的命名规则3.2 两个对象指向同一个值3.3 可变变量 4.变量的作用域5. 检测变量6. 布尔类型7.字符串定义与转义8.字符串常用函数9.常量 1. 输出 echo: 输出 print: 输出&#xff0c;输出成功返回1 print_r(): 输出数组 var_dum…

Vue 3中实现基于角色的权限认证实现思路

一、基于角色的权限认证主要步骤 在Vue 3中实现基于角色的权限认证通常涉及以下几个主要步骤&#xff1a; 定义角色和权限&#xff1a;首先需要在后端服务定义不同的角色和它们对应的权限。权限可以是对特定资源的访问权限&#xff0c;比如读取、写入、修改等。用户认证&#…

汽车价格的回归预测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 问题描述 汽车价格预测是一个旨在预估二手车市场中汽车售价的问题。这个问题涉及到分析各种影响汽车价格的因素&#xff0c;如品牌、车龄、性能…

3.21Code

基于二叉链表的二叉树最大宽度的计算 #include<iostream>#define MAXSIZE 1000using namespace std;int k0; int m0; //记录层数 typedef struct BiNode{char data;struct BiNode *lchild;struct BiNode *rchild; }BiNode,*BiTree;void CreateBiTree(BiTree &T){cha…