4-京东登录界面

1.京东登录界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 设置网页标题 -->
        <title>京东-欢迎登陆</title>
        <!-- 设置图标 -->
        <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
        <!-- 关闭所有标签自带对间距 -->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>  
    <!-- 第一步，先写框架，整体局面分为几大块 -->
    <!-- 第二部，创建css文件，并用link导入相对应等css文件 -->
        <!-- ===========1.顶部=========== -->
        <link rel="stylesheet" type="text/css" href="css/top.css"/>
        <div id="top">
            <div id="logo">
                <div id="">
                    <!-- 上面logo部分 -->
                    <a target="_blank" href="https://www.jd.com/"><img src="img/logo-201305-b.png" ></a>
                    <img src="img/l-icon.png" >
                </div>
                <!-- 调查问卷 -->
                <a target="_blank" href="京东登录页满意度调查.html">登陆页面，调查问卷</a>
            </div>
            <!-- 隐私政策 -->
            <div id="privacy">
                <p><img src="img/icon-tips.png" >
                依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
                </p>
            </div>
        </div>
        
        <!-- ===========2.中间内容========= -->
        <link rel="stylesheet" type="text/css" href="css/middle.css"/>
        <div id="middle">
            <div id="box">
                <div id="b1">
                    <!-- 图片后带文字，第一种 -->
                    <img src="img/icon-tips.png" >
                    <font>京东不会以任何理由要求您转账汇款，谨防诈骗。</font>
                </div>
                
                <div id="b2">
                    <button type="button">扫码登录</button>
                    <font size="" color="">|</font>
                    <button type="button">账户登录</button>
                </div>
                
                <div id="b3">
                    <div id="username-box">
                        <img src="img/pygame.png" >
                        <input placeholder="邮箱/用户名/登录手机" type="text" name="" id="" value="" />
                    </div>
                    <div id="password-box">
                        <img src="img/password_icon.png" >
                        <input placeholder="密码" type="password" name="" id="" value="" />
                    </div>
                        
                        <a href="https://passport.jd.com/uc/links?tag=safe">忘记密码</a>
                        <button type="button">登&emsp;录</button>
                </div>
        

                <!-- 第三方登录 -->
                <div id="b4">
                    <a id="qq" href="">QQ</a>
                    <font>|</font>
                    <a id="weixin" href="">微信</a>
                    <a id="register" href="https://reg.jd.com/p/regPage?ignore=1">立即注册</a>
                </div>
            </div>
        </div>
        
        <!-- ============3.底部============ -->
        <link rel="stylesheet" type="text/css" href="css/bottom.css"/>
        <br>
        <div id="bottom">
            <div>
                <a href="https://about.jd.com/">关于我们</a>&emsp;<font>|</font>&emsp;
                <a href="https://www.jd.com/contact/">联系我们</a>&emsp;<font>|</font>&emsp;
                <a href="https://zhaopin.jd.com/">人才招聘</a>&emsp;<font>|</font>&emsp;
                <a href="https://lai.jd.com/">商家入驻</a>&emsp;<font>|</font>&emsp;
                <a href="https://jzt.jd.com/">广告服务</a>&emsp;<font>|</font>&emsp;
                <a href="https://app.jd.com/">手机京东</a>&emsp;<font>|</font>&emsp;
                <a href="https://club.jd.com/links.aspx">友情链接</a>&emsp;<font>|</font>&emsp;
                <a href="https://media.jd.com/">销售联盟</a>&emsp;<font>|</font>&emsp;
                <a href="https://pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html">京东社区</a>&emsp;<font>|</font>&emsp;
                <a href="https://gongyi.jd.com/">京东公益</a>&emsp;<font>|</font>&emsp;
                <a href="https://www.joybuy.com/">English Site</a>
                
            </div>
        <br>
            <div><font>Copyright © 2004-2020  京东JD.com 版权所有</font></div>
        </div>
    </body>
</html>

2.京东登录页面满意度调查

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录页满意度调查</title>
        <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            margin-top: 15px;
            margin-left: 176px;
            margin-right: 176px;
            position: relative;
        }
        #f1{
            top: 18px;
            position: absolute;
            font-size: 22px;
            color: rgb(102,102,102);
        }
        #div2>p{
            font-size: 13px;
            color: rgb(29,45,69);
            left: 40px;
            position: absolute;
        }
        #div3{
            height: 167px;
            width: 100%;
            border: solid 1px rgb(204,232,255);
            top: 40px;
            position: relative;
        }
        #div4{
            height: 28px;
            width: 99.8%;
            margin-left: 1px;
            margin-top: 1px;
            margin-right: 1px;
            background-color: rgb(238,246,255);
        }
        #div4 font{
            line-height: 28px;
            font-size: 13px;
        }
        #div5{
            height: 176px;
            width: 100%;
            border: solid 1px rgb(204,232,255);
            top: 10px;
            position: relative;
        }
        #div6{
            height: 28px;
            width: 99.8%;
            margin-left: 1px;
            margin-top: 1px;
            margin-right: 1px;
            background-color: rgb(238,246,255);
        }
        #div6 font{
            line-height: 28px;
            font-size: 13px;
        }
        #div4-1{
            left: 43px;
            top: 10px;
            position: relative;
        }
        #div7{
            left: 50px;
            top: 36px;
            position: relative;
        }
        #div8{
            height: 140px;
            width: 100%;
            border: solid 1px rgb(204,232,255);
            top: 40px;
            position: relative;
        }
        #div9{
            height: 48px;
            width: 99.8%;
            margin-left: 1px;
            margin-top: 1px;
            margin-right: 1px;
            background-color: rgb(238,246,255);
        }
        #div9 font{
            line-height: 28px;
            font-size: 13px;
        }
        #div10{
            left: 32px;
            top: 27px;
            position: relative;
        }
        #div11{
            height: 32px;
            width: 100%;
            border: solid 1px rgb(204,232,255);
            top: 53px;
            position: relative;
        }
        #div12{
            height: 30px;
            width: 99.8%;
            margin-right: 1px;
            margin-bottom: 1px;
            margin-left: 1px;
            margin-top: 1px;
            background-color: rgb(238,246,255);
            position: relative;
        }
        #div13{
            margin-left: 45%;
            margin-right: 45%;
        }
        
    </style>
    
    <body>
        <div id="div1">
            <img src="https://s1.ax1x.com/2020/07/10/Uup4AK.png" ><font id="f1" size="" color="">&emsp;&emsp;登录页面满意度调查</font>
            <hr color="#E33B3D">
            <br>
            <br>
            <div id="div2">
                <p>尊敬用户您好：<br><br>为了给您提供更加完善的服务，我们希望收集并了解您在页面的使用情况。对您的配合和支持表示衷心的感谢！</p>
            </div><br><br>
            <div id="div3">
                <div id="div4">
                    &nbsp;&nbsp;&nbsp;<font size="" color="red"><strong>*</strong></font>&nbsp;&nbsp;<font color="#1D2D45"><strong>您对登录页整体满意度如何？</strong></font>
                </div>
                <div id="div4-1">
                        <input id="r1" name="radio" type="radio" checked><label for="r1"><font style="font-size: 14px;" color="#1D2D45">非常满意</font></label><br>
                        <input id="r2" name="radio" type="radio" checked><label for="r2"><font style="font-size: 14px;" color="#1D2D45">满意</font></label><br>
                        <input id="r3" name="radio" type="radio" checked><label for="r3"><font style="font-size: 14px;" color="#1D2D45">一般</font></label><br>
                        <input id="r4" name="radio" type="radio" checked><label for="r4"><font style="font-size: 14px;" color="#1D2D45">不满意</font></label><br>
                        <input id="r5" name="radio" type="radio" checked><label for="r5"><font style="font-size: 14px;" color="#1D2D45">非常不满意</font></label><br>
                </div>
            </div><br><br>
            <div id="div5">
                <div id="div6">
                    &nbsp;&nbsp;&nbsp;<font color=#1D2D45><strong>您对登录页有什么想法，请大声说出来吧！（例如：哪里有问题，哪些功能做得不够好等）</strong></font>
                </div>
                <div id="div7">
                    <textarea rows="5" cols="40"></textarea>
                </div>
            </div>
            <div id="div8">
                <div id="div9">
                    &nbsp;&nbsp;<font color=#1D2D45><strong>如果您对京东的使用体验有任何想法，欢迎微信搜索并关注“<font size="" color="red">京东用户体验中心</font>”公众号，参与更多用户体验活动。</strong></font>
                </div>
                <div id="div10">
                    <font style="font-size: 14px;" color="#1D2D45">姓名</font>&emsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" id="name" value="" /><br>
                    <font style="font-size: 14px;" color="#1D2D45">手机号</font>&emsp;<input type="text" name="tel" id="tel" value="" />
                </div>
                
            </div>
            <div id="div11">
                <div id="div12">
                    <div id="div13">
                        <button style="width: 55px;height: 30px;border: solid 1px rgb(174,208,234);background-color: rgb(225,240,250);" type="button"><a style="color: rgb(0,112,163);text-decoration: none;" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans"><strong>提交</strong></a></button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

top.css

#top{
    height: 120px;
}
/* logo部分 */
#logo{
    height: 80px;
    position: relative;
}

#logo>div{
    position: absolute;
    left: 180px;
    /* 垂直居中 */
    top: 50%;
    margin-top: -30px;
}
#logo>a{
    position: absolute;
    right: 140px;
    bottom: 10px;
    
    color: rgb(196,196,196);
    font-size: 12px;
    text-decoration: none;
    background: url(../img/q-icon.png) no-repeat 0 center rgba(0,0,0,0);
    padding-left: 20px;
}

#logo>a:hover{
    color: rgb(226,59,65);
    text-decoration: underline;
    /* 设置背景 */
}
/* 隐私政策 */

#privacy a{
    color: rgb(51,51,51);
    text-decoration: none;
}

#privacy a:hover{
    text-decoration: underline;
}

#privacy{
    background-color: rgb(255,248,241);
    height: 40;
}

#privacy>p{
    text-align: center;
    /* 设置垂直方向居中 */
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: rgb(153,153,153);
}

#privacy img{
    vertical-align: middle;
}

middle.css

#middle{
    /* background-color: rgb(235,210,170); */
    background: url(../img/bg1.jpg) no-repeat 290px 0 rgb(193,239,255);
    height: 475px;
    position: relative;

}
#box{
    background-color: white;
    width: 350px;
    height: 400px;
    top: 10px;
    right: 140px;
    position: absolute;
}
/* 警告 */
#b1{
    background-color: rgb(255,248,241);
    height: 40px;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 文字行高和块一样高 */
    line-height: 40px;
}

#b1>font{
    font-size: 12px;
    color: rgb(180,180,180);

}

#b1>img{
    vertical-align: middle;
}
/* 登录按钮 */
#b2{
    height: 55px;
}

#b2>button{
    width: 165px;
    height: 100%;
    border: 0;
    font-size: 19px;
    color: rgb(102,102,102);
    background-color: white
    
    
    
}

#b2>button:focus{
    color: rgb(226,59,65);
    outline: none;
}
#b2>font{
    color: rgb(244,244,2444);
    font-weight: 100;
    font-size: 18px;
}
/* 输入信息 */
#b3{
    height: 255px;
    border-top: solid 1px rgba(244,244,244,1);
    border-bottom: solid 1px rgba(244,244,244,1);
    position: relative;
}

#username-box,#password-box{
    
    width: 305px;
    height: 40px;
    margin-left: 20px;
    margin-top: 30px;
    border: solid 1px rgb(189,189,189);
}
#password-box{
    margin-top: 20px;
    }
    
#b3 img{
    height: 40px;
    height: 40px;
    border-right: solid 1px rgb(189,189,189);
}
#b3>a{
    position: absolute;
    right: 20px;
    margin-top: 20px;
    font-size: 12px;
    color: rgb(158,158,158);
    text-decoration: none;
}
#b3>a:hover{
    text-decoration: underline;
    color: rgb(102,102,127);
}
#b3 input{
    height: 100%;
    width: 250px;
    vertical-align: top;
    border: 0;
    outline: none;
    font-size: 14px;
}
#b3>button{
    width: 305px;
    height: 35px;
    border: 0;
    outline: 0;
    background-color: rgb(226,59,65);
    font-size: 20px;
    color: white;
    position: absolute;
    left: 20px;
    bottom: 30px;
}

/* 第三方登录 */
#b4{
    height: 50px;
    line-height: 50px;
    position: relative;
}
#b4>font{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 12px;
    color: rgb(204,204,204);
}
#qq{
    margin-left: 20px;
    color: rgb(120,120,120);
    background:url(../img/qq.png) no-repeat 0 center rgb(0,0,0,0);
    padding-left: 25px;
    text-decoration: none;
}
#weixin{
    font-size: 13px;
    color: rgb(120,120,120);
    background: url(../img/weixin.png) no-repeat 0 center rgb(0,0,0,0);
    padding-left: 25px;
    text-decoration: none;
}

#register{
    position: absolute;
    right: 10px;
    color: rgb(180,32,70);
    text-decoration: none;
    background: url(../img/right.png) no-repeat 0 center rgb(0,0,0,0);
    padding-left: 25px;
}
#qq:hover,#weixin:hover,#register:hover{
    color: red;
    text-decoration: underline;
}
#b4>a{
    font-size: 13px;
}

bottom.css

#bottom{
    height: 110px;
    text-align: center;
}
#bottom a,font{
        text-decoration: none;
        color: rgb(102,102,102);
        font-size: 13px;
}

3.特殊菜单的实现方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                background-color: lightblue;
                list-style: none;
                height: 40px;
                line-height: 40px;
            }
            li{
                float: left;
                margin-left: 30px;
            }
            #box{
                width: 100px;
            }
            /* 悬停在父标签的时候修改子标签样式 */
            #box:hover #box2{
                display: block;
            }
            #box1{
                width: 100px;
                text-align: center;
                height: 42px;
                z-index: 50;
            }
            #box2{
                display: none;
                border: solid 2px black;
                
            }
            #box1:hover{
                color: red;
            }
            #box:hover #box1{
                background-color: white;
                border-left: solid 1px lightgray;
                border-right: solid 1px lightgray;
            }
        </style>
        <ul>
            <li>四川</li>
            <li>你好，登录</li>
            <li>我的订单</li>
            <li id="box">
                <div id="box1" style="background-color: white;width: 100px;">我的京东</div>
                <div id="box2" style="width: 200px; height: 150px; background-color: white;">
                <div id="box2">
                    
                </div>
                    
                </div>
            </li>
            <li>京东会员</li>
        </ul>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容