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

文章目录

  • 1. 导航栏样式进一步调整
  • 2. 入驻企业信息展示栏
    • 2.1 Title设置
    • 2.2 具体信息添加
  • 3. 轮播图
  • 4. 注册登录按钮及其他信息
  • 5. 一些五颜六色的、丰富视觉效果的中间件……

1. 导航栏样式进一步调整

在这里插入图片描述
这种导航栏，选中的时候字体变蓝色，可能还是不够美观，根据Bootstrap提供的效果再调整下：
Bootstrap5 navs-tabs
在这里插入图片描述
根据需要修改代码，调整CSS样式如下：

nav { background-color: #56ac69; justify-content: center; }
.nav li a { font-size: 1.3rem; color: white }
.nav li a:hover { color: #1b6d84; background-color: white}

结果如下：
当前active的项是“网站首页”，选中了“名企优录”
在这里插入图片描述

2. 入驻企业信息展示栏

2.1 Title设置

Bootstrap将一行均分为了12栏，我们让信息企业展示栏占3栏，则需要使用类“col-md-3”。同时这里主要使用了Bootstrap的nav-pills，如下：
在这里插入图片描述
写我们自己的
html：

<div class="col-md-3"><!--最新入驻企业--><div class="tabbable"><ul class="nav nav-pills nav-fill title-bg"><li class="nav-item"><a class="nav-link " id="new-enterprise-title" aria-current="page" href="#">最新入驻企业</a></li></ul></div>
</div>

设置一些属性：

/*最新入驻企业标题*/
.title-bg { background-color: #b4d5e3; }
#new-enterprise-title { font-size: 1.0rem; color: white; background-color: #337ab7; width: fit-content; text-align: left; }

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

2.2 具体信息添加

就用一个普通的列表就可以：

<!--最新入驻企业-->
<div class="tabbable"><ul class="nav nav-pills nav-fill title-bg"><li class="nav-item"><a class="nav-link " id="new-enterprise-title" aria-current="page" href="#">最新入驻企业</a></li></ul><div class="tab-content"><div class="tab-pane active"><ul class="info-content"><li><a href="http://www.hbzhunong.com/home/?uid=1113">莱芜市合盛农产品有限公司</a></li><li><a href="http://www.hbzhunong.com/home/?uid=1112">山东粮能有机食品公司</a></li><li><a href="#">金乡县金洲万盛冷藏有限公司 </a></li><li><a href="#">烟台黑苹商贸有限公司 </a></li><li><a href="#">海阳市海发果蔬有限公司 </a></li><li><a href="#">威海三昌食品有限公司 </a></li><li><a href="#">青岛金华粮油食品集团股份有限公司 </a></li><li><a href="#">青岛大海边食品有限公司 </a></li></ul></div></div></div>

CSS：

/*内容*/
.tab-pane { border: 1px solid rgba(0, 0, 0, 0.2); padding-top: 5px;}
.info-content li a { text-decoration: none; }

效果大概这样：
在这里插入图片描述
再加一个，照葫芦画瓢就可以：
在这里插入图片描述
右侧加一个供求信息，但去掉无序列表的点，并顶格放置，同时利用flex分成两栏，一栏放供，一栏放求：

<!--供求信息--><div class="tabbable"><ul class="nav nav-pills nav-fill title-bg"><li class="nav-item" style="width: 50%"><a class="nav-link " id="new-supply-title" aria-current="page" href="#">供求信息</a></li><li class="nav-item" style="width: 50%"><a class="nav-link " id="new-need-title" aria-current="page" href="#">求购信息</a></li></ul><div style="display: flex">
<!--                    供应信息--><div class="tab-content" style="width: 50%; float: left"><div class="tab-pane active"><ul class="info-content" style="list-style: none; padding-left: 0"><li>【供应】<a href="#">国光甜苹果</a></li><li>【供应】<a href="#">红薯</a></li><li>【供应】<a href="#">和田玉枣</a></li><li>【供应】<a href="#">意大利冰酒</a></li><li>【供应】<a href="#">草鸡蛋</a></li><li>【供应】<a href="#">鸭梨</a></li><li>【供应】<a href="#">草鸡蛋</a></li><li>【供应】<a href="#">红色经典</a></li></ul></div></div>
<!--                    求购信息--><div class="tab-content" style="width: 50%; float: right"><div class="tab-pane active"><ul class="info-content" style="list-style: none; padding-left: 0"><li>【求购】<a href="#">国光甜苹果</a></li><li>【求购】<a href="#">红薯</a></li><li>【求购】<a href="#">和田玉枣</a></li><li>【求购】<a href="#">意大利冰酒</a></li><li>【求购】<a href="#">草鸡蛋</a></li><li>【求购】<a href="#">鸭梨</a></li><li>【求购】<a href="#">草鸡蛋</a></li><li>【求购】<a href="#">红色经典</a></li></ul></div></div></div></div>

注意使用之前的标题栏样式：

#new-enterprise-title, #new-hot-title, #new-supply-title, #new-need-title { font-size: 1.0rem; color: white; background-color: #337ab7; width: fit-content; text-align: left; }

在这里插入图片描述

3. 轮播图

轮播图对应Bootstrap的Carousel部分：Bootstrap5-Carousel
这里在带前后按钮、123按钮的基础上加上了carousel-dark属性，使按钮颜色变黑色

        <!--轮播图--><div class="col-md-6 carousel carousel-dark slide" id="carouselExampleIndicators" data-bs-ride="carousel">
<!--            底部三个按钮--><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active carousel-button" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="carousel-button" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" class="carousel-button" aria-label="Slide 3"></button></div>
<!--            图片--><div class="carousel-inner"><div class="carousel-item active"><img src="/img/carousel1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="/img/carousel2.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="/img/carousel3.png" class="d-block w-100" alt="..."></div></div>
<!--            左右两个按钮--><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div>

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

4. 注册登录按钮及其他信息

右侧占3栏，使用Bootstrap中的Button来做登录注册按钮：
这里用到了Bootstrap图标库：Bootstrap Icons，以及Buttons中的一些类属性：Bootstrap5 Buttons

由于使用图标库，直接导入了它们的CSS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

HTML代码为：

<div class="col-md-3 column"><button type="button" class="btn btn-lg login"><span class="bi bi-person" onclick="javascript:toLogin()">&emsp;登&emsp;录</span></button><button type="button" class="btn btn-lg register"><span class="bi bi-person-add" onclick="javascript:toRegister()">&emsp;注&emsp;册</span></button>
</div>

自己设置一些关于按钮背景色、宽度的CSS：

.login, .register { width: 100%; color: #fff9f8; margin-bottom: 5px; }
.login { background-color: #f0ad4e; }
.register { background-color: #5cb85c; }
.login:hover { background-color: #ec971f; color: #fff9f8; }
.register:hover { background-color: #449d44; color: #fff9f8; }

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

5. 一些五颜六色的、丰富视觉效果的中间件……

使用了Bootstrap中的表格插件：Bootstrap5 tables
就是用了一些颜色表格的类，很简单：

<!--首页快捷栏-->
<div class="col-md-12" style="margin-top: 10px"><table class="table table-bordered"><tbody class="text-center"><tr class="table-success"><td><a href="#">创建商铺</a></td><td><a href="#">发布产品</a></td></tr><tr class="table-warning"><td><a href="#">发布求购信息</a></td><td><a href="#">发布供应信息</a></td></tr><tr class="table-info"><td><a href="#">登记品牌</a></td><td><a href="#">关于我们</a></td></tr></tbody></table>
</div>

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

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

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

相关文章

【项目实践】VS配置Qt

【项目实践】VS配置Qt

文章目录 前言版本使用具体步骤1&#xff09;安装Qt或者添加删除组件2&#xff09;VS安装Qt Visual Studio Tools 如何使用遇到的问题双击ui文件编辑报错 前言 最近因为一个项目&#xff0c;需要使用Qt&#xff0c;本来想使用Python的&#xff0c;但是由于另外一个第三方的库是…
阅读更多...
C 多维数组

C 多维数组

C 语言支持多维数组。多维数组声明的一般形式如下&#xff1a; type name[size1][size2]...[sizeN];例如&#xff0c;下面的声明创建了一个三维 5 . 10 . 4 整型数组&#xff1a; int threedim[5][10][4];二维数组 多维数组最简单的形式是二维数组。一个二维数组&#xff0c…
阅读更多...
Qt/C++监控推流设备推流/延迟极低/实时性极高/rtsp/rtmp推流/hls/flv/webrtc拉流/调整分辨率降低带宽

Qt/C++监控推流设备推流/延迟极低/实时性极高/rtsp/rtmp推流/hls/flv/webrtc拉流/调整分辨率降低带宽

一、前言 算下来这个推流的项目作品写了有四年多了&#xff0c;最初第一个版本只有文件点播的功能&#xff0c;用的纯QTcpSocket通信实现&#xff0c;属于比较简单的功能。由于文件点播只支持文件形式的推流&#xff0c;不支持网络流或者本地设备采集&#xff0c;所以迫切需要…
阅读更多...
2024Python计算机二级7

2024Python计算机二级7

带符号的定点数之中&#xff0c;正数的原码、补码和反码均相同&#xff0c;负数的反码是对该数的原码除符号位外各位取反&#xff0c;补码是在该数的反码的最后&#xff08;即最右边&#xff09;一位上加1&#xff1b;不管是正数还是负数&#xff0c;其补码的符号位取反即是偏移…
阅读更多...
H6603实地架构降压芯片100V耐压 80V 72V 60V 48V单片机/模块供电应用

H6603实地架构降压芯片100V耐压 80V 72V 60V 48V单片机/模块供电应用

H6603 是一款内置功率 MOSFET降压开关转换器。在宽输入范围内&#xff0c;其最大持续输出电流 0.8A&#xff0c;具有极好的负载和线性调整率。电流控制模式提供了快速瞬态响应&#xff0c;并使环路更易稳定。故障保护包括逐周期限流保护和过温保护。H6603 最大限度地减少了现有…
阅读更多...
智能驾驶域控制器行业介绍

智能驾驶域控制器行业介绍

汽车智能驾驶功能持续高速渗透&#xff0c;带来智能驾驶域控制器市场空间快速增 长。智驾域控制器是智能驾驶决策环节的重要零部件&#xff0c;主要功能为处理感知 信息、进行规划决策等。其核心部件主要为计算芯片&#xff0c;英伟达、地平线等芯 片厂商市场地位突出。随着消费…
阅读更多...
ECharts5 应用篇

ECharts5 应用篇

跨平台方案 服务端渲染 服务端 SVG 渲染 5.3.0 里新引入了零依赖的服务端 SVG 字符串渲染方案&#xff1a; // 服务端代码 const echarts require(echarts);// 在 SSR 模式下第一个参数不需要再传入 DOM 对象 let chart echarts.init(null, null, {renderer: svg, // 必须使用…
阅读更多...
(C语言) print输出函数系列介绍

(C语言) print输出函数系列介绍

(C语言) print输出函数系列介绍 文章目录 (C语言) print输出函数系列介绍前言输出系列函数&#x1f5a8;️printf&#x1f5a8;️sprintf & snprintf&#x1f5a8;️fprintf&#x1f5a8;️vprintf&#x1f5a8;️dprintf&#x1f5a8;️puts&#x1f5a8;️fputs&#x1f…
阅读更多...
Spring6--IOC反转控制 / 基于XML管理bean

Spring6--IOC反转控制 / 基于XML管理bean

1. 容器IOC 先理解概念&#xff0c;再进行实际操作。概念比较偏术语化&#xff0c;第一次看可能看不懂&#xff0c;建议多看几遍&#xff0c;再尝试自己独立复述一遍&#xff0c;效果会好些 1.1. IOC容器 1.1.1. 控制反转&#xff08;IOC&#xff09; IOC (Inversion of Con…
阅读更多...
AL379芯片和AL383芯片是一款DC-DC升压芯片IC

AL379芯片和AL383芯片是一款DC-DC升压芯片IC

首先&#xff0c;我们来了解HU6283芯片5V升压12V芯片的工作原理。这种芯片通常采用开关电源技术&#xff0c;通过高频开关控制&#xff0c;将5V的输入电压转换为12V的输出电压。开关电源技术具有高效、稳定、体积小等优点&#xff0c;因此在电子设备中得到了广泛应用。5V升压12…
阅读更多...
Python 使用requests模块 执行Web API调用 获取网站数据并可视化

Python 使用requests模块 执行Web API调用 获取网站数据并可视化

import requests#执行web api调用&#xff0c;并将响应存储在response_dict字典中 urlhttps://api.github.com/search/repositories?qlanguage:python&sortstars headers{Accept:application/vnd.github.v3json} rrequests.get(url,headersheaders) print(fStatus code:{r…
阅读更多...
软件测评中心分享：软件鉴定测试与验收测试有什么联系和区别?

软件测评中心分享：软件鉴定测试与验收测试有什么联系和区别?

1、软件鉴定测试 　　软件鉴定测试是在软件开发完成后进行的一个核心环节&#xff0c;是通过对软件进行功能性、性能、安全性等方面的综合测试&#xff0c;来验证软件是否符合规定的需求和标准。 2、软件验收测试 　　软件验收测试是软件开发工作结束后的最后一个环节&#xf…
阅读更多...
并发编程所需的底层基础

并发编程所需的底层基础

一、计算机运行的底层原理 1.多级层次的存储结构 ①:辅存 固态盘不是主要的应用对象&#xff0c;因为固态盘的使用次数是有限的&#xff0c;无法支撑高并发场景 磁盘存储的最基本原理是电生磁。 磁盘的磁道里边有很多的磁颗粒&#xff0c;磁颗粒上边有一层薄膜为了防止磁点氧…
阅读更多...
5G网络架构与组网部署03--5G网络组网部署

5G网络架构与组网部署03--5G网络组网部署

1. SA组网与NSA组网 &#xff08;1&#xff09;NSA 非独立组网&#xff1a;终端同时接入4G基站和5G基站&#xff0c;只能实现5G部分功能 &#xff08;2&#xff09;SA组网【最终目标】&#xff1a;5G基站可以单独提供服务&#xff0c;接入的是5G核心网 区别&#xff1a;同一时间…
阅读更多...
01-java面试题八股文-----java基础——20题

01-java面试题八股文-----java基础——20题

文章目录 <font color"red">1、java语言有哪些特点&#xff1a;<font color"red">2、面向对象和面向过程的区别<font color"red">3、标识符的命名规则。<font color"red">4、八种基本数据类型的大小&#xff…
阅读更多...
STM32CubeMX+freeRTOS+事件组 多任务处理LED和串口打印

STM32CubeMX+freeRTOS+事件组 多任务处理LED和串口打印

摘要：利用CubeMx配置freeeRTOS建立任务并使用事件组实现按键按下时 LED开关和打印信息到串口，上位机接收显示。 验证STM32CubeMx配置的FreeRTOS的任务和事件组使用 方案：按下Key1，绿灯亮或者灭，同时串口打印Key1被按下了到上位机；相关端口和串口配置省略。 新建三个任务…
阅读更多...
Sora底层技术原理：Stable Diffusion运行原理

Sora底层技术原理：Stable Diffusion运行原理

AIGC 热潮正猛烈地席卷开来&#xff0c;可以说 Stable Diffusion 开源发布把 AI 图像生成提高了全新高度&#xff0c;特别是 ControlNet 和 T2I-Adapter 控制模块的提出进一步提高生成可控性&#xff0c;也在逐渐改变一部分行业的生产模式。惊艳其出色表现&#xff0c;也不禁好…
阅读更多...
嵌入式开发--获取STM32产品系列的信息

嵌入式开发--获取STM32产品系列的信息

嵌入式开发–获取STM32产品系列和容量信息 获取STM32产品系列 有时候我们需要知道当前MCU是STM32的哪一个系列&#xff0c;这当然可以从外部丝印看出来&#xff0c;但是运行在内部的软件如何知道呢&#xff1f; ST为我们提供了一个接口&#xff0c;对于STM32的所有MCU&#x…
阅读更多...
xshell链接不上hadoop虚拟机

xshell链接不上hadoop虚拟机

输入ifconfig查看是否有ens33 没有的话解决方案如下&#xff1a; systemctl stop NetworkManager systemctl restart network.service service network restartsys 依次输入以上命令 如果报错或者没用的话&#xff0c;进入root重新输入一遍这三个命令 大功告成&#xff01;…
阅读更多...
LF-YOLO

LF-YOLO

LF-YOLO算法解读&#xff0c;针对x射线图像 1、EMF&#xff1a;网络结构的改变&#xff0c;enhanced multiscale feature(增强的多尺度特性)&#xff0c;多尺度融合模块。利用基于参数的方法和无参数的方法&#xff0c;可以同时结合X射线图像的局部和全局上下文&#xff0c;利用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023