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>
相关推荐
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh8 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v8 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
roamingcode10 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程12 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng13 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源