好烦小窝

网页设计作业 - 小米商城登录页面

实现效果：

演示站： 点我看看

一些介绍：

  1. 用了简单的map画图+超链接（整张图片分割）
  2. 纯HTML+CSS+IMG
  3. footer部分放弃了ul+li+a，做的时候居中不了，找了好久没找到原因（水平有限）
  4. 盒子布局都带有注释，全局默认宽度1600px，做了缩放自适应
  5. 各个部分内容也有相关注释
  6. 登录按钮用的a标签代替，input提交标签修改有点麻烦，放弃了

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>小米商城登录页面</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <!-- 全局盒子 -->
        <div id="box-body">
            <!-- 顶部 -->
            <div id="top-height">
                <!-- img -->
                <div class="top-img">
                    <img src="img/logo.jpg">
                </div>
                <div class="top-text">
                    <p>小米商城</p>
                    <span>让每个人都享受科技乐趣</span>
                </div>
            </div>
            <!-- 顶部结束 -->
            <!-- 中部开始 -->
            <div id="center-bj">
                <!-- form表单 -->
                <div class="center-from">
                    <div class="center-all">

                        <div class="center-text">
                            <span><a href="" style="color: coral;">账号登录</a></span>|<span><a href="">扫码登录</a></span>

                        </div>
                        <form action="" method="">
                            <input type="" name="" id="" value="" placeholder="邮箱/手机号码/小米ID" />
                            <input type="password" name="" id="" value="" placeholder="密码" />
                            <br><a href="" >
                                <div class="sub-center">
                                    <!-- <input type="submit" name="" id="" value="登录" />
                                 -->
                                    <span>登录</span>
                                </div>
                            </a>
                        </form>
                        <!-- 其他登录方式 -->
                        <div class="center-other">
                            <img src="./img/link.jpg" usemap="#otherway" width="410px" height="210px">
                            <map name="otherway">
                                <area shape="circle" coords="47,125,15,70" href="https://blog.fanl.cn" alt="支付宝" />
                                <area shape="circle" coords="100,125,15,70" href="https://www.innyun.cn" alt="微信" />
                                <area shape="circle" coords="153,125,15,70" href="http://css.134920.xyz" alt="QQ" />
                                <area shape="circle" coords="206,125,15,70" href="https://study.fanwo.top" alt="微博" />
                            </map>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中部结束 -->
            <!-- 底部开始 -->
            <div id="footer">
                <div class="footer-text-area">
                    <!-- 导航开始 -->
                    <div class="nav-footer">
                        <p>
                            <a href="">用户协议</a><span>|</span>
                            <a href="">隐私政策</a><span>|</span>
                            <a href="">帮助中心</a><span>|</span>
                            <a href="">简体</a><span>|</span>
                            <a href="">英语</a>
                        </p>
                        <br>
                    </div>
                    <!-- 导航结束 -->
                    <!-- 版权备案信息 -->
                    <p><a href="">小米公司版权所有</a>-<a href="">京ICP备10046444-京公网安备11010802020134号</a>-<a
                            href="">京ICP证110507号</a></p>
                </div>
            </div>
            <!-- 底部结束 -->
        </div>
    </body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    font-family: "黑体";
}

body {
    /* 默认屏幕分辨率width=1600px */
    /* 缩放自适应 */
    width: 1600px;
    margin: 0 auto;
}

#box-body {
    margin: 0 auto;
    width: 1600px;
}

#top-height {
    margin: 0 auto;
    width: 1600px;
    height: 80px;
}

.top-img {
    float: left;
    margin: 18px 0 0 220px;

}

.top-img img {
    width: 42px;
    height: 42px;
}

.top-text {
    float: left;
}

.top-text p {
    margin: 20px 0 0 10px;
}

.top-text span {
    margin: 0 0 0 10px;
    font-size: 8px;
}

#center-bj {
    margin: 0 auto;
    width: 1600px;
    height: 500px;
    background: url(../img/phone.jpg) no-repeat center;
}

.center-from {
    float: left;
    margin: 32px 0 0 980px;
    width: 300px;
    height: 420px;
    /* border: red 1px solid; */
    background-color: white;
}

.center-all {
    padding: 20px;
}

.center-text {
    margin: 5px 0 10px 10px;

}

.center-text span {
    font-size: 20px;
    margin: 0 20px 0 15px;
}

.center-text a {
    text-decoration: none;
    color: darkgray;
}


.center-other {
}

.center-other img {
    width: 260px;
    height: 150px;
}

.center-text form a {
    text-decoration: none;
    color: white;
}
.sub-center {
    margin: 20px 0 0 0;
    height: 40px;
    background-color: orangered;
}

.sub-center span {
    float: left;
    color: white;
    width: 260px;
    margin-top: 10px;
    text-align: center;
}

.center-all input {
    padding: 5px;
    margin: 30px 0 0 0;
    height: 30px;
    width: 246px;
}

#footer {
    margin: 0 auto;
    width: 1600px;
    /* height: 154px; */
}

.footer-text-area {
    margin: 45px auto;
    height: 60px;
    /* border: red 2px solid; */
    color: darkgray;
    text-align: center;
    font-size: 14px;
}

.nav-footer {}

/* .nav-footer ul{
    margin: 0 auto;
    list-style: none;
} */
.footer-text-area a:hover {
    color: orangered;
}

a:hover {
    color: orangered;
}

/* .nav-footer ul li{
    float: left;
    list-style: none;
    
} */
.nav-footer span {
    margin: 0 5px 0 5px;

}

.footer-text-area a {
    text-decoration: none;
    color: darkgray;
}

文件打包下载

[file url="https://wwij.lanzout.com/imnjN1j3g2wj"]蓝奏云下载[/file]

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »