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

相关阅读:
在vite中使用react-router-dom-v6 路由报错 Uncaught SyntaxError: Unexpected token ‘＜‘
P7557 [USACO21OPEN] Acowdemia S
【c++百日刷题计划】 ———— DAY18，刷题百天，养成刷题好习惯
Latex & Overleaf 写作问题记录
uni-app：实现页面效果4（echarts数据可视化）
【c++】前缀和教程
开源WIFI继电器之硬件电路
【数据结构】交换排序之冒泡排序与快速排序
想问下这个选什么？感觉正确答案是错误的，但又不知道正确的是哪个
Codeforces Round 906 (Div. 2--ABC)

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