题目一：电商团购悬浮框（效果图）+题目二：用户注册页面(效果图＋代码)

肥牛咩咩

已于 2024-04-09 14:03:27 修改

阅读量441

点赞数 8

文章标签： javascript html 前端

于 2024-04-09 14:02:49 首次发布

本文链接：https://blog.csdn.net/weixin_44788552/article/details/137548774

版权

题目

题目一：电商团购悬浮框（效果图）

结构分析：

“用户登录界面”由3个表单控件构成，分别为两个单行文本输入框和一个按钮，可以以通过在<form>标签中嵌套<input>标签来定义。

样式分析：

整体控制表单，需要为<form>标签设置宽度、高度、背景图片和边距样式。
将<input/>标签转换为块元素，并设置其宽度、高度、文本颜色、背景色、边距和边框等样式。
单独控制最后一个<input/>控件，为其设置宽度、高度、背景图片、文本和边框样式。

题目二：用户注册页面(效果图＋代码)

样式分析：

如图所示，用户注册界面由上面的标题和下面的表单两部分构成。其中标题部分可以通过h1定义，表单部分则可以通过相关的表单控件进行定义。效果图如下：

实现代码

题目一：

<body>
    <form action="#" method="post" class="list">
        <input type="text" value="请输入手机号">
        <input type="text" value="请输入验证码">
        <input class="btn" type="button" value="登 录"
    </form>
</body>

        *{
            margin: 0;
            padding: 0;
        }
        .list{
            width: 500px;
            height: 280px;
            background: url(images/bg.jpg) no-repeat;
            margin:50px auto;
            padding-top: 70px;
        }
        input{
            display: block;
            width: 290px;
            height: 34px;
            background-color: #11131f;
            border: 2px solid #4f5556;
            margin: 25px auto;
            color: #fff;
            padding-left:10px;

        }
        .btn{
            width: 302px;
            height: 34px;
            background: url(images/line.png) repeat-x;
            border: none;
            color: #ccc;
            font-family: "微软雅黑";
        }

题目二：

<div id="bg">
        <h1></h1>
        <div class="content">
            <div class="content_border">
                <div class="content_1">
                    <p>注 册 新 用 户</p>
                </div>
                <form action="#" method="post" class="content_2">
                    <input class="icon_1" type="text" value="用户名">
                    <input class="icon_2" type="text" value="密码">
                    <input class="icon_2" type="text" value="确认密码">
                    <input class="icon_3" type="email" value="电子邮件">
                    <input class="btn" type="submit" value="注册新用户">
                </form>
            </div>
        </div>
    </div>

        *{
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }
        body{
            font-family: Arial, Helvetica, sans-serif,"宋体";
            font-size: 16px;
        }
        a:hover,a:visited{
            text-decoration: none;
            color: #999;
        }
        a:hover{
            color: #F30;
        }
        #bg{
            width: 1024px;
            height: 768px;
            margin: 10px auto;
            background-color: #efefef;
        }
        h1{
            width: 900px;
            height: 70px;
            margin: 0 auto;
            background: #38b593 url(images/logo.png) no-repeat center center;
        }
        .content{
            width: 880px;
            height: 480px;
            margin: 0 auto;
            background-color:#eeecec ;
            margin-top: 10px;
            border: 10px solid #fff;
        }
        .content_border{
            width: 870px;
            height: 470px;
            border: 5px solid #eeecec;
        }
        .content_1{
            width: 870px;
            height: 55px;
            background: url(images/bg.png) repeat-x;

        }
        .content_1 p{
            height: 55px;
            color: #666;
            font-size: 24px;
            line-height: 55px;
            font-family: "微软雅黑";
            background: url(images/jia.png) no-repeat left center;
            padding-left: 45px;
            margin-left:60px ;
        }
        .content_2{
            width: 404px;
            margin: 0 auto;

        }
        .icon_1,.icon_2,.icon_3{
            width: 350px;
            height: 39px;
            line-height: 39px;
            color: #999;
            font-size: 16px;
            font-weight: 600;
            background: #faf9f9 url(images/icon1.png) no-repeat 10px center;
            padding-left: 50px;
            border: 2px solid #7f9db9;
            margin-top: 30px;
        }
        .icon_2{
            background: #faf9f9 url(images/icon2.png) no-repeat 10px center;
        }
        .icon_3{
            background: #faf9f9 url(images/icon3.png) no-repeat 10px center;
        }
        .btn{
            width: 400px;
            height: 39px;
            background-color: #53c2a2;
            padding-left: 30px;
            font-size: 18px;
            color: #fff;
            border: 2px solid #7f9db9;
            margin-top: 30px;
            text-align: center;
        }