HTML模仿静态京东登陆界面

最新推荐文章于 2024-01-12 09:36:39 发布
Einstein777
最新推荐文章于 2024-01-12 09:36:39 发布
阅读量1.8k
点赞数 2
分类专栏： web前端文章标签： html css 前端
本文链接：https://blog.csdn.net/Cpythonjavamacos/article/details/127199589
版权
web前端专栏收录该内容
8 篇文章
订阅专栏
使用简单的html+css 进行京东登陆界面的简单模仿
并没有对css和html进行分开编辑
效果如图
素材元素私信获取
代码如下：
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>京东商城</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .header{ 
            /* 相对定位元素的定位是相对其正常位置 */
            position:relative;
            background-color: white;
            padding: 15px;
        }
        .image
        {
            float:left;
            margin-left:200px;
        }
        .font
        {      
            line-height: 3.5em;
            float: right;
            margin-right: 930px;
            font-size: 140%;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color:rgb(87, 84, 84);
        }
        .word
        {   
            /* 继承，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */
            position:absolute;
            line-height: 8em;
            font-size: 80%;
            margin-left: 1050px;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color:rgb(23, 21, 21);
        }
        a:link
        {
            text-decoration: none;
            color: black;
        }
        .tip
        {
            background-color: rgb(254,248,241);
            display: inline-block;
            /*盒子的样式*/
            width: 100%;
            height: 40px;
            /*超链接文本*/
            font-size: 10px;
            text-align: center;
            line-height: 40px;
            color: rgb(153,153,164);
        }






        .body
        {
            position:relative;
            float: left;
            width: 100%;
            background-color: rgb(215, 72, 88);
        }
        .images
        {
            float:left;
            margin-left: 220px;
  
        }
        .data
        {
            float: right;
            margin-top: 20px;
            margin-right: 250px;
            background-color: white;
            border: 1px ;
            width: 400px;
            height:400px;
        }
        .top{
            background-color: antiquewhite;
            width: 400px;
            height:50px;
            text-align: center;
            color: red;
            font-size:25px;
        }
        .human
        {
            float: left;
            margin-top: 20px;
            margin-left: 150px;

        }
        .in
        {
            line-height: 2em;
            margin: 130px 100px 0px 80px;
        }
        .get
        {
            float: left;
            margin-top: 30px;
            margin-left: 30px;
            width: 350px;
            height:40px;
            background-color: rgb(227, 61, 61);
            text-align: center;
            letter-spacing: 1em;
            color: white;
        }
        .out{
            float: left;
            margin-top: 45px;
            width: 400px;
            height:20px;
        }





        
        .bottom
        {
            float: left;
            width: 100%;
            text-align: center;
            font-size: 70%;
            letter-spacing: 0.1em;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color:rgb(87, 84, 84);
            margin-top: 15px;
        }
        .bottoms
        {
            float: left;
            width: 100%;
            text-align: center;
            font-size: 70%;
            letter-spacing: 0.1em;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color:rgb(87, 84, 84);
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="image">
            <a href="#"><img src="素材/图标.png"></a>   
        </div>
         <div class="font">
            <p>欢迎登录</p>
         </div>
         <div class="word">
            <a href="#"><img src="素材/7cebcb7bba3d88ee48035b24bc8f829.png">登录页面，调查问卷</a>
         </div>
    </div>

    <div class="tip">
         <P>！依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</P>
     </div>

    <div class="body">
        <div class="images">
            <img src="素材/back.png">
        </div>
        <div class="data">
            <table>
                <tr>		
                    <td>
                        <div class="top">
                            <a href="#"><p>扫码登陆&nbsp;&nbsp;|&nbsp;&nbsp;账号登陆</p></a>
                        </div>
                        <div class="human">
                            <img src="素材/id.png">
                        </div>
                        <div class="in">
                            <form>
                                账户: <input type="text" name="userName" />	
                               密码: <input type="password" name="userPsd" />
                            </form>
                        </div>
                        <div class="get">
                            <a href="#"><h2>登陆</h2></a>
                        </div>
                        <div class="out">
                                <a href="baidu.com"><img src="素材/qq.png"></a>
                                <a href="#"><img src="素材/wx.png"></a>
                                <a href="#"><img src="素材/zc.png"></a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="bottom">
        <a href="baidu.com"><p>关于我们&nbsp; &nbsp;| 联系我们&nbsp; &nbsp;| 人才招聘 &nbsp;&nbsp;| 商家入驻 &nbsp;&nbsp;| 广告服务 &nbsp;&nbsp;| 手机京东&nbsp;&nbsp; | 友情链接 &nbsp;&nbsp;| 销售联盟&nbsp; &nbsp;| 京东社区&nbsp; &nbsp;| 京东公益&nbsp; &nbsp;| English Site</p></a>  
    </div>
    <div class="bottoms">
        <p>Copyright&copy;2004-2017 京东JD.com 版权所有</p>
    </div>
</body>
</html>