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

     bannerCSS展示图：

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>banner效果title>
    8.   <style>
    9.     .banner {
    10.       height: 500px;
    11.       background-color: #f3f3f4;
    12.       background-image: url(./images/bk.png);
    13.       background-repeat: no-repeat;
    14.       background-position: left bottom;
    15.  
    16.       /* 文字控制属性，继承给子级 */
    17.       text-align: right;
    18.       color: #333;
    19.     }
    20.     /* 尽量不直接用标签选择器，可能导致样式冲突，明确继承关系不容易出错 */
    21.     .banner h2 {
    22.       font-size: 36px;
    23.       font-weight: 400;
    24.       line-height: 100px;
    25.     }
    26.  
    27.     .banner p {
    28.       font-size: 20px;
    29.     }
    30.  
    31.     .banner a {
    32.       width: 125px;
    33.       height: 40px;
    34.       background-color: #f06b1f;
    35.  
    36.       display: inline-block;
    37.       /* 转块级无法右对齐，因为块元素独占一行 */
    38.       /* display: block; */
    39.  
    40.       text-align: center;
    41.       line-height: 40px;
    42.       color: #fff;
    43.       text-decoration: none;
    44.       font-size: 20px;
    45.     }
    46.   style>
    47. head>
    48. <body>
    49.   <div class="banner">
    50.     <h2>让创造产生价值h2>
    51.     <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。p>
    52.     <a href="#">我要报名a>
    53.   div>
    54. body>
    55. html>

     

    效果展示图：

     

     tips：

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

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

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

          /* display: block; 不正确*/

  • 相关阅读:
    pytorch-Normalization
    LeetCode 刷题 [C++] 第98题.验证二叉搜索树
    JVM类加载和垃圾回收
    mybatis-plus yml配置
    怎么做好品牌营销，小红书爆款笔记怎么做？
    2022年11月PMP考试如何办理缓退考？攻略在这里！
    C++基础入门
    集成学习方法之随机森林-入门
    抖音矩阵系统。抖音矩阵系统。抖音矩阵系统。
    EFCore常规操作生成的SQL语句一览
  • 原文地址：https://blog.csdn.net/m0_63949203/article/details/133686433