day04

这就是今天要实现的效果图(颜色提取推荐使用snipaste)

代码(仅供参考,不喜勿喷, 可以在评论区展示作品)

复制代码
<html>

<head>

    <style>

        /* Write your CSS code here */

        * {

            margin: 0px;

            padding: 0px;

        }

        body {

            background-color: rgb(242, 245, 248);

            display: flex;

        }

        .outer {

            margin: auto;

            background-color: white;

            width: 600px;

            height: 300px;

            display: flex;

            flex-direction: column;

            align-items: center;

            border-radius: 5px;

        }

        strong {

            display: inline-block;

            width: 100%;

            text-align: center;

            margin-top: 40px;

            font-size: 15px;

        }

        p {

            font-size: 10px;

            text-align: center;

            margin-top: 20px;

        }

        .email {

            margin-top: 40px;

            width: 280px;

            height: 45px;

            border-color: rgb(230, 235, 239);

            text-align: left;

            border-radius: 5px;

            margin-right: 5px;

            padding: 10px;

            box-sizing: border-box;

        }

        .email::placeholder {

            color: black;

            opacity: 0.6;

        }

        button {

            width: 150px;

            height: 45px;

            background-color: rgb(61, 159, 255);

            border-radius: 5px;

            margin-left: 5px;

            box-shadow: 0px 0px 15px rgb(157, 207, 255);

            border-color: rgb(61, 159, 255);

            color: white;

        }

        span {

            padding-top: 10px;

            display: inline-block;

            width: 230px;

            font-size: 10px;

            margin-left: 10px;

        }

        .inner2 {

            display: flex;

        }

        .checkbox {

            border-radius: 5px;

            border-color: rgb(247, 249, 250);

            opacity: 0.5;

        }

    </style>

</head>

<body>

    <div class="outer">

        <strong>Let's keep in touch</strong>

        <p>

            Subscribe to keep up with fresh news and exciting updates.

            <br>

            We promise not to spam you!

        </p>

        <div class="inner">

            <input type="email" class="email" placeholder="Enter your email address">

            <button>SEND -&gt;</button>

            <div class="inner2">

                <input class="checkbox" type="checkbox" name="protocal">

                <span>I agree to my email address being stored and used to receive monthly newsletter.</span>

            </div>

        </div>

    </div>

</body>

</html>
相关推荐
狂炫一碗大米饭1 分钟前
如何在 Git 中检出远程分支
前端·git·github
东风西巷30 分钟前
猫眼浏览器:简约安全的 Chrome 内核增强版浏览器
前端·chrome·安全·电脑·软件需求
太阳伞下的阿呆30 分钟前
npm安装下载慢问题
前端·npm·node.js
pe7er1 小时前
Tauri 应用打包与签名简易指南
前端
前端搬砖仔噜啦噜啦嘞1 小时前
Cursor AI 编辑器入门教程和实战
前端·架构
Jimmy1 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
来来走走1 小时前
Flutter dart运算符
android·前端·flutter
moddy1 小时前
新人怎么去做低代码,并且去使用?
前端
风清云淡_A1 小时前
【Flutter3.8x】flutter从入门到实战基础教程(五):Material Icons图标的使用
前端·flutter
安心不心安1 小时前
React ahooks——副作用类hooks之useThrottleEffect
前端·react.js·前端框架