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

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.lryc.cn/news/187686.html

相关文章:

  • 关于红包雨功能的探索
  • 【已解决】Python打包文件执行报错:ModuleNotFoundError: No module named ‘pymssql‘
  • 华为云云耀云服务器L实例评测|测试CentOS的网络配置和访问控制
  • CSP模拟51联测13 B.狗
  • GEO生信数据挖掘(七)差异基因分析
  • JAVA-SpringBoot入门Demo用IDEA建立helloworld
  • Unity布料系统Cloth
  • 漏电继电器 LLJ-630F φ100 导轨安装 分体式结构 LLJ-630H(S) AC
  • 数据结构和算法(10):B-树
  • VR会议:远程带看功能,专为沉浸式云洽谈而生
  • 实验室管理系统LIMS
  • 开源ERP和CRM套件Dolibarr
  • 视频号双11激励政策,快来看一看
  • Maven最新版本安装及配置
  • 探索ClickHouse——使用MaterializedPostgreSQL同步PostgreSQL数据库
  • 《向量数据库指南》——向量数据库 有必要走向专业化吗?
  • 你必须知道的数据查询途径!!
  • 火焰原子吸收光谱法、容量法和电感耦合等离子体发射光谱法
  • 亚马逊云科技 2023 柏林峰会主题演讲总结
  • CentOS Stream9 安装远程桌面服务 Xrdp
  • 实施运维01
  • MySQL大表直接复制文件的copy方式
  • Redis-集群
  • 使用CrawlSpider爬取全站数据。
  • 【JUC】Java并发编程从挖坑到入土全解(4-一文讲通LockSupport与线程中断->长图预警)
  • Springboot学习笔记——3
  • jupyter 切换虚拟环境
  • 如何在Apache和Resin环境中实现HTTP到HTTPS的自动跳转:一次全面的探讨与实践
  • 安全防御—密码学
  • 灯具从深圳寄国际物流到墨西哥