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

bannerCSS展示图：


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

相关阅读:
【JavaWeb】Servlet属性设置
laravel - 查询构建器2
云计算现在前景如何？
mongo cond $add 相差8小时 ISODate 按时、日、周、天、月、季度、年对日期进行分组
javascript的深浅拷贝
点云从入门到精通技术详解100篇-三维点云属性变换编码（中）
QT在安装后添加新组件【QT基础入门环境搭建】
单链表的创建定义
深度学习+opencv+python实现车道线检测 - 自动驾驶计算机竞赛
深入篇【C++】类与对象：详解内部类+匿名对象+编译器对拷贝的优化

原文地址：https://blog.csdn.net/m0_63949203/article/details/133686433