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

 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; 不正确*/

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

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

相关文章

分布式数据库(林子雨慕课课程)

文章目录 4. 分布式数据库HBase4.1 HBase简介4.2 HBase数据模型4.3 HBase的实现原理4.4 HBase运行机制4.5 HBase的应用方案4.6 HBase安装和编程实战 4. 分布式数据库HBase 4.1 HBase简介 HBase是BigTable的开源实现 对于网页搜索主要分为两个阶段 1.建立整个网页索引&#xf…

Linux SSH连接远程服务器(免密登录、scp和sftp传输文件)

1 SSH简介 SSH&#xff08;Secure Shell&#xff0c;安全外壳&#xff09;是一种网络安全协议&#xff0c;通过加密和认证机制实现安全的访问和文件传输等业务。传统远程登录和文件传输方式&#xff0c;例如Telnet、FTP&#xff0c;使用明文传输数据&#xff0c;存在很多的安全…

数据结构 | (二) List

什么是 List 在集合框架中&#xff0c; List 是一个接口&#xff0c;继承自 Collection 。 Collection 也是一个接口 &#xff0c;该接口中规范了后序容器中常用的一些方法&#xff0c;具体如下所示&#xff1a; Iterable 也是一个接口&#xff0c;表示实现该接口的类是可以逐个…

分享几个通用个人简历模板|行业通用

Home(https://cvjury.com/) 专业设计的简历模板。 在竞争激烈的就业市场中脱颖而出的有效策略。 侧重于向招聘人员传达独特的价值主张。 帮助创建引人注目的简历、求职信和LinkedIn资料。 面向毕业生和学生的个性化简历解决方案。 添加图片注释&#xff0c;不超过 140 字&…

归并排序及其非递归实现

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 归并排序递归实现 归并排序非递归实现 归并排序递归实现 图示&#xff1a; 代码&#xff1a; 先分再归并&#xff0c;像是后序一般。 //归并排序 void MergeSort(int* arr, int left, int right) {int* temp (int…

PUPANVR-UI主菜单及设置窗体框架(9)

PUPA NVR UI主菜单及设置窗体框架 在设计UI时&#xff0c;竟量把数据、控制、显示&#xff0c;分开&#xff0c;即MVC的一个模式吧&#xff01;使用MVC这样的模式思想&#xff0c;会让代码简洁不少&#xff0c;逻辑也很清析&#xff01; 具体的代码见&#xff1a; PUPANVR这个…

第三次作业

自己实现扫描全盘的函数 def scan_disk(dir): global count,dir_count if os.path.isdir(dir): files os.listdir(dir) for file in files: print(file) dir_count 1 if os.path.isdir(dir os.sep file): …

等精度频率计verilog,quartus仿真视频,原理图,代码

名称&#xff1a;等精度频率计设计verilog quartus仿真 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a; A&#xff1a;测量范围信号:方波 频率:100Hz~1MHz; B&#xff1a;测试误差:<0.1%(全量程) C&#xff1a;时钟频率:50kHz D&#xff1a;预闸…

(2021|NIPS,VQ-VAE,精度瓶颈松弛,三明治层归一化,CapLoss)CogView:通过转换器掌握文本到图像的生成

CogView: Mastering Text-to-Image Generation via Transformers 公众号&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 0. 摘要 通用领域中的文本到图像生成长期以来一直是一个悬而未决的问题&#…

十、pygame小游戏开发

目录 一、安装pygame二、pygame快速入门2.1 坐标系认识2.2 创建游戏主窗口2.3 实现图像绘制2.4 游戏循环和游戏时钟2.5 简单动画实现的实现2.6 监听事件2.7 精灵和精灵组三、游戏框架搭建3.1 实现飞机大战主游戏类3.2 完成游戏初始化部分3.3 使用常量代替固定的数值3.4 完成游戏…

2023年DDoS攻击发展趋势的分析和推断

DDoS是一种非常“古老”的网络攻击技术&#xff0c;随着近年来地缘政治冲突对数字经济格局的影响&#xff0c;DDoS攻击数量不断创下新高&#xff0c;其攻击的规模也越来越大。日前&#xff0c;安全网站Latest Hacking News根据DDoS攻击防护服务商Link11的统计数据&#xff0c;对…

Java代码hello word

一、安装java环境 开始学习java之前&#xff0c;我们的第一步就是安装java环境&#xff0c;即常说的JDK和JRE&#xff0c;此处就不在详细介绍配置环境过程&#xff0c;可以到网上搜索java开发环境配置。 二、编写第一个程序 工具&#xff1a; 常用的java编写工具有IDE、Notep…

机器学习:随机森林

集成学习 集成学习&#xff08;Ensemble Learning&#xff09;是一种机器学习方法&#xff0c;通过将多个基本学习算法的预测结果进行组合&#xff0c;以获得更好的预测性能。集成学习的基本思想是通过结合多个弱分类器或回归器的预测结果&#xff0c;来构建一个更强大的集成模…

Window Anaconda 安装pytorch 启用cuda 终究手段

1.首先你的电脑要有NVIDIA 的显卡.没有就走吧,你如果不是window &#xff0c;也走吧&#xff0c;不一定教程管用。 2.然后要明白&#xff0c;有两种CUDA版本&#xff0c;一个叫运行时api&#xff0c;一个是驱动api 2.1 运行时cuda 版本查看 &#xff08;是你跑深度学习模型或其…

Android用户登录与数据存储:从权限请求到内外部存储的完整实践【完整实践步骤、外部存储、内部存储】

步骤 1: 登录页面布局 在 MainActivity 中实现用户登录功能&#xff0c;首先创建一个布局文件 activity_main.xml 包含用户名和密码的输入字段以及登录按钮。 <!-- activity_main.xml --> <LinearLayoutxmlns:android"http://schemas.android.com/apk/res/andr…

单元测试该怎么写

单元测试对于开发人员来说很熟悉&#xff0c;各种语言都提供了单元测试的框架&#xff0c;用于自动化执行单元测试并生成测试报告。它通常提供了一组API和工具&#xff0c;使开发人员能够编写和运行测试用例&#xff0c;比较预期行为和实际行为之间的差异&#xff0c;并准确地识…

【已验证】微信小程序介绍及创建过程23.10.08

1、环境准备 开发微信⼩程序之前&#xff0c;必须要准备好相应的环境 1.1.注册账号 建议使用全新的邮箱&#xff0c;没有注册过其他小程序或者公众号的。访问注册⻚⾯&#xff0c;耐⼼完成注册即可。 1.2.获取APPID 由于登录&#xff0c;然后获取APPID 2.开发工具 下载地…

ElementUI结合Vue完成主页的CUD(增删改)表单验证

目录 一、CUD ( 1 ) CU讲述 ( 2 ) 编写 1. CU 2. 删除 二、验证 前端整合代码 : 一、CUD 以下的代码基于我博客中的代码进行续写 : 使用ElementUI结合Vue导航菜单和后台数据分页查询 ( 1 ) CU讲述 在CRUD操作中&#xff0c;CU代表创建&#xff08;Create&#xff09…

设备搭建(waf、蜜罐、ids和ips)

文章目录 防火墙waf网闸蜜罐idsips 防火墙 DMZ区域叫非军事化区减&#xff0c;DMZ有web服务或者MySQL服务&#xff0c;从互联网到dmz的流量一般不拦截&#xff08;因为需要互联网用户访问web服务&#xff09;&#xff0c;如果dmz沦陷&#xff0c;攻击者想要继续横向移动到内网…

Vue中实现自定义编辑邮件发送到指定邮箱(纯前端实现)

formspree里面注册账号 注册完成后进入后台新建项目并且新建表单 这一步完成之后你将得到一个地址 最后就是在项目中请求这个地址 关键代码如下&#xff1a; submitForm() {this.fullscreenLoading true;this.$axios({method: "post",url: "https://xxxxxxx…