当前位置： 首页 > news >正文

HTML5+CSSday4综合案例二——banner效果

news 2025/9/14 13:30:30

 bannerCSS展示图：

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner {height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;/* 文字控制属性，继承给子级 */text-align: right;color: #333;}/* 尽量不直接用标签选择器，可能导致样式冲突，明确继承关系不容易出错 */.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}.banner p {font-size: 20px;}.banner a {width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/* 转块级无法右对齐，因为块元素独占一行 *//* display: block; */text-align: center;line-height: 40px;color: #fff;text-decoration: none;font-size: 20px;}</style>
</head>
<body><div class="banner"><h2>让创造产生价值</h2><p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p><a href="#">我要报名</a></div>
</body>
</html>

 

效果展示图：

 

 tips：

        1.在写CSS样式尽量不直接用标签选择器，可能导致样式冲突，明确继承关系不容易出          错.banner h2{}        

        2. 此题要使用display: inline-block;

      /* 转块级无法右对齐，因为块元素独占一行 */

      /* display: block; 不正确*/

相关文章：

HTML5+CSSday4综合案例二——banner效果

bannerCSS展示图&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…...

编程日记 2023/10/10 19:59:05

关于红包雨功能的探索

【高并发优化手段】基于Springboot项目 【红包雨功能的】环境部署&#xff08;弹性伸缩、负载均衡、Redis读写分离、云服务器部署&#xff09; jemeter压测【2万用户每秒5次请求在30秒内处理完请求】 【红包雨压测】提供2万用户30秒内5次请求的并发服务支持 使用工厂模式、策略…...

编程日记 2023/10/10 19:58:04

【已解决】Python打包文件执行报错：ModuleNotFoundError: No module named ‘pymssql‘

【已解决】Python打包文件执行报错&#xff1a;ModuleNotFoundError: No module named pymssql 1、问题2、原因3、解决 1、问题 今天打包一个 tkinter pymssql 的项目的时候&#xff0c;打包过程很顺利&#xff0c;但是打开软件的时候&#xff0c;报错 ModuleNotFoundError: …...

编程日记 2023/10/10 19:57:03

华为云云耀云服务器L实例评测｜测试CentOS的网络配置和访问控制

目录 引言 1 理解几个基础概念 2 配置VPC、子网以及路由表 3 配置安全组策略和访问控制规则 3.1 安全组策略和访问控制简介 3.2 配置安全组策略 3.3 安全组的最佳实践 结论 引言 在云计算时代&#xff0c;网络配置和访问控制是确保您的CentOS虚拟机在云环境中安全运行的…...

编程日记 2023/10/10 19:56:02

CSP模拟51联测13 B.狗

CSP模拟51联测13 B.狗 文章目录 CSP模拟51联测13 B.狗题目大意题目描述输入格式输出格式样例样例 1inputoutput 思路 题目大意 题目描述 小G养了很多狗。 小G一共有 n n n\times n nn 条狗&#xff0c;在一个矩阵上。小G想让狗狗交朋友&#xff0c;一条狗狗最多只能交一个…...

编程日记 2023/10/10 19:55:01

GEO生信数据挖掘（七）差异基因分析

上节&#xff0c;我们使用结核病基因数据&#xff0c;做了一个数据预处理的实操案例。例子中结核类型&#xff0c;包括结核&#xff0c;潜隐进展&#xff0c;对照和潜隐&#xff0c;四个类别。本节延续上个数据&#xff0c;进行了差异分析。 差异分析 计算差异指标step12 加载…...

编程日记 2023/10/10 19:54:00

JAVA-SpringBoot入门Demo用IDEA建立helloworld

使用编辑器IDEA做SpringBoot项目最近几年比较红红&#xff0c;作为JAVA语言翻身的技术&#xff0c;用户量激增。由于java平台原来的占有率&#xff0c;相比net core在某些方面更有优势。 我把本次我下载完成后Maven项目的过程记录下来了&#xff0c;仅供参考&#xff01; 安装J…...

编程日记 2023/10/10 19:52:59

Unity布料系统Cloth

Unity布料系统Cloth 介绍布料系统Cloth(Unity组件)组件上的一些属性布料系统的使用布料约束Select面板Paint面板Gradient Tool面板 布料碰撞布料碰撞碰撞适用 介绍 布料系统我第一次用是做人物的裙摆自然飘动&#xff0c;当时我用的是UnityChan这个unity官方自带的插件做的裙摆…...

编程日记 2023/10/10 19:51:58

漏电继电器 LLJ-630F φ100 导轨安装 分体式结构 LLJ-630H(S) AC

系列型号&#xff1a; LLJ-10F(S)漏电继电器LLJ-15F(S)漏电继电器LLJ-16F(S)漏电继电器 LLJ-25F(S)漏电继电器LLJ-30F(S)漏电继电器LLJ-32F(S)漏电继电器 LLJ-60F(S)漏电继电器LLJ-63F(S)漏电继电器LLJ-80F(S)漏电继电器 LLJ-100F(S)漏电继电器LLJ-120F(S)漏电继电器LLJ-125F(S…...

编程日记 2023/10/10 19:50:57

数据结构和算法（10）：B-树

B-树&#xff1a;大数据 现代电子计算机发展速度空前&#xff0c;就存储能力而言&#xff0c;情况似乎也是如此&#xff1a;如今容量以TB计的硬盘也不过数百元&#xff0c;内存的常规容量也已达到GB量级。 然而从实际应用的需求来看&#xff0c;问题规模的膨胀却远远快于存储能…...

编程日记 2023/10/10 19:48:55

VR会议：远程带看功能，专为沉浸式云洽谈而生

随着科技的不断发展&#xff0c;VR技术已经成为当今市场上较为热门的新型技术之一了&#xff0c;而VR会议远程带看功能&#xff0c;更是为用户提供更加真实、自然的沉浸式体验。 随着5G技术的发展&#xff0c;传统的图文、视频这种展示形式已经无法满足消费者对信息真实性的需求…...

编程日记 2023/10/10 19:46:53

实验室管理系统LIMS

在数字化浪潮中&#xff0c;越来越多的企业开始有数字化转型的意识。对于实验室而言&#xff0c;数字化转型是指运用新一代数字技术&#xff0c;促进实验室业务、生产、研发、管理、服务、供应链等方面的转型与升级&#xff0c;实现实验室业务“人、机、料、法、环”的多维度发…...

编程日记 2023/10/10 19:45:52

开源ERP和CRM套件Dolibarr

什么是 Dolibarr &#xff1f; Dolibarr ERP & CRM 是一个现代软件包&#xff0c;用于管理您组织的活动&#xff08;联系人、供应商、发票、订单、库存、议程…&#xff09;。它是开源软件&#xff08;用 PHP 编写&#xff09;&#xff0c;专为中小型企业、基金会和自由职业…...

编程日记 2023/10/10 19:44:51

视频号双11激励政策，快来看一看

双十一即将来临&#xff0c;不少平台都公布了自己的双十一政策。这篇文章&#xff0c;我们来看看视频号推出的激励政策&#xff0c;看有哪些需要准备的。...

编程日记 2023/10/10 19:43:50

Maven最新版本安装及配置

Maven是一个Java项目管理和构建工具&#xff0c;它可以定义项目结构、项目依赖&#xff0c;并使用统一的方式进行自动化构建&#xff0c;是Java项目不可缺少的工具。 本章我们详细介绍如何使用Maven。 一、Maven是什么&#xff1f; 如果每一个项目都自己搞一套配置&#xf…...

编程日记 2023/10/10 19:41:47

探索ClickHouse——使用MaterializedPostgreSQL同步PostgreSQL数据库

安装PostgreSQL sudo apt install postgresql修改配置 sudo vim /etc/postgresql/14/main/postgresql.conf 解开并修改wal_level 的配置项 wal_level logical 重启服务 /etc/init.d/postgresql restartRestarting postgresql (via systemctl): postgresql.service AUTHENTI…...

编程日记 2023/10/10 19:40:45

《向量数据库指南》——向量数据库 有必要走向专业化吗？

向量数据库 有必要走向专业化吗？ 向量数据库系统的诞生，来源于具体业务需求——想要高效处理海量的向量数据，就需要更细分、更专业的数据基础设施，为向量构建专门的数据库处理系统。 但这种路径是必须的吗？ 从产品层面讲，如果传统数据库厂商不单独研发向量数据库，那么…...

编程日记 2023/10/10 19:39:44

你必须知道的数据查询途径！！

在当今信息爆炸的时代&#xff0c;我们每天都会面临海量的数据和信息。如何在这些繁杂的信息中快速、准确地找到自己需要的内容&#xff0c;也是当代一个非常重要的技能。下面&#xff0c;我将介绍几种你必须知道的企业数据信息查找途径。 ​ 1. 搜索引擎 搜索引擎是我们日常中…...

编程日记 2023/10/10 19:38:43

火焰原子吸收光谱法、容量法和电感耦合等离子体发射光谱法

声明 本文是学习GB-T 1871.5-2022 磷矿石和磷精矿中氧化镁含量的测定 火焰原子吸收光谱法、容量法和电感耦合等离子体发射光谱法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件描述了在磷矿石和磷精矿中测定氧化镁含量的火焰原子吸收…...

编程日记 2023/10/10 19:37:41

亚马逊云科技 2023 柏林峰会主题演讲总结

欢迎来到我们的亚马逊云科技2023柏林峰会主题演讲全面总结&#xff01;在这篇文章中&#xff0c;我们将深入探讨在活动期间分享的主要公告、亮点和故事。通过这里的视频格式&#xff0c;展示了亚马逊云科技技术如何转化为商业和行业。 每年&#xff0c;亚马逊云科技峰会都会汇…...

编程日记 2023/10/10 19:36:40

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/9/14 9:31:49

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/9/14 1:15:45

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/9/13 3:49:22

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/9/13 2:29:19

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/9/13 17:39:49

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/9/12 2:31:56

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/9/7 8:49:35