第四天案例练习-banner效果

Banner设计：

　　是一种用于展示品牌、产品或服务信息的网络广告设计。 通常以横幅的形式出现在网页或移动端屏幕的顶部，也可以在社交媒体平台上使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第五人格banner效果</title>
    <style>
        div{
            background-image: url(./image/第五人格海报.jpg);
            background-repeat: no-repeat;
            background-size: 1256px,500px;
            height: 500px;
            /* background-size: 500px; */
        }
        h1{
            font-size: 36px;
            color: #333;
            line-height: 100px;
            text-align: left;
        }
        p{
            font-size: 20px;
            color: #333;
            text-align: left;
        }
        button{
            width: 125px;
            height: 40px;
            background-color: #f06b1f;
            line-height: 40px;
            color: aliceblue;
            font-size: 20px;
            border: 0;
        }
        button:hover{
            background-color: pink;
        }
        div{
            
        }
    </style>
</head>
<body>
    <div>
        <h1>让创造产生价值</h1>
    <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都把他们的才华和创意传递给每一个用户。</p>
    <form>
        <button>我要报名</button>
    </form>
    </div>
    
    
</body>
</html>

　成果：

　

 

posted @ 2024-12-19 14:01  宋苶苶  阅读(13)  评论(0)    收藏  举报