当前位置：首页 > article >正文

html+css（如何用css做出京东页面，静态版）

article 2025/2/23 1:00:18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/center.css">
    <link rel="stylesheet" href="./css/bottom.css">
    <link rel="stylesheet" href="./css/three.css">
</head>
<body>

                   <!-- 头部 -->
                  <div id="top">
                          <img src="./tu/logo.png" alt="">
                          <img src="./tu/l-icon.png" alt="" id="login">
                           <span id="denglu"><a href="./调查问卷.html">登录页面，改进建议</a></span>
                  </div>
                  <!-- 第二部分 -->
                  <div id="part">
                  <div id="tips">
                     <ul>
                        <li>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版 <span id="color"><a href="./隐私政策.html">《京东隐私政策》</a></span>已上线，将更有利于保护您的隐私。</li>
                     </ul>
                  </div>
               </div>
                  <!-- 第三部分 -->
                     <div id="zong">
                        <!-- 图片 -->
                           <div id="lg">
                                <!--表单-->
                               <div id="ziti">
                                   <!-- 页面上部分 -->
                                <div id="zhuang"> 京东不会以任何理由要求您转账，谨防诈骗 </div>
                                  <div id="code"></div>
                                  <span id="quite">扫码登录安全快捷</span>
                                             <div id="red">
                                              <a href="#" class="enter">密码登录</a>
                                              <a href="./短信.html" class="note">短信登录</a>
                                             </div>
                                            <div id="e-mail">
                                             <input type="text" name=""  placeholder="账户名/手机号/邮箱" class="case">
                                             <input type="password" placeholder="密码" class="case">
                                             <a href="#" class="forget">忘记密码</a>
                                             </div>
                                             <input type="submit" id="inter" value="登录">
                               <!-- QQ微信 -->
                              <div id="we">
                              <div id="qq"><a href="https://im.qq.com/index/">QQ</a></div>
                              <div id="WeChat"><a href="https://wx.qq.com/">微信</a></div><a href="#" class="login">立即注册</a>
                             
                              </div>

                              </div>
                               
                           </div>
                              
                           <!-- 第四部分 -->
                           <div id="four">
                                <a href="#">关于我们</a>|
                                <a href="#">联系我们</a>|
                                <a href="#">人才招聘</a>|
                                <a href="#">商家入住</a>|
                                <a href="#">广告服务</a>|
                                <a href="#">手机京东</a>|
                                <a href="#">友情链接</a>|
                                <a href="#">销售联盟</a>|
                                <a href="#">京东社区</a>|
                                <a href="#">京东公益</a><br><br>
                               <span id="copyright"> Copyright © 2004-2023 京东JD.com 版权所有</span>
                           </div>
                           
                     </div>
</body>
</html>

/* 顶部 */
*{
    margin: 0px auto;
    padding: 0px;
    color: grey;
    font-size: 12px;
}
body{
    background-color: rgb(255, 255, 255);
}

#top{
    width: 990px;
    background-color: rgb(255, 255, 255);
}
    margin-left: 10px;
}
#denglu a{
    margin-left: 300px;
    padding-left: 20p
#login{x;
    text-decoration: none;
    background: url(../tu/q-icon.png) no-repeat 1px;
}

/* 第二部分*/
#tips{
    width: 990px;
    background: url(../tu/icon-tips.png) no-repeat 100px;
    background-color: rgb(255, 248, 240);
    padding-top: 10px; 
    padding-bottom: 10px; 
}
#tips li{
    text-align: center;
    list-style: none;
}
#part{
    background-color:rgb(255, 248, 240);
}
#color a{
    color: black;
    text-decoration: none;
}

/* 整体 第三部分 */
#zong{
    height: 475px;
    background-color: rgb(235, 221, 210);

}
#lg{
    width: 990px;
     height: 475px;

    background-image: url(../tu/bg.jpg) ;
    
}
#zhuang{
    width: 300px;
    height: 20px;
    border-radius: 10px;
    margin-right: 1px; 
    text-align: center;
    border-radius: 15px;
     color: rgb(248, 116, 76);
    background: url(../tu/icon-tips.png) no-repeat 1px;
    background-position: 15px 0px;
    background-color: antiquewhite;
} 
#ziti{

    width: 300px;
    float: right;
    margin-top: 100px;
    border-radius: 10px;
     background-color: rgb(252, 250, 247); 
}
#code{
    width: 50px;
    height: 42px;
    background-image: url(../tu/qrcode.png);
    background-size: 50px 50px;
    float: right;
} 
#quite{
    color: rgb(249, 244, 244);
    font-size: 16px;
    padding: 2px 10px;
    background-color:rgb(158, 156, 156) ;
     margin-left: 90px; 
     border-radius: 5px;
}

#red{
    margin-top: 15px;
}
#red a{
    text-decoration: none;
    font-size: 17px;
  
}
.enter{
    color: red;
    padding-left: 20px;
}
.note{
    padding-left: 20px;
}
#e-mail{
    margin: 10px 20px;
}
.case{
    width: 250px;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    border: 1px solid rgb(151, 150, 150);

}
.forget{
     text-decoration: none;
     float: right;
     color: black;
}
#inter{
    width: 260px;
    height: 30px;
    font-size: 14px;
    color: rgb(243, 237, 237);
    margin-left: 20px;
    margin-top: 10px;
    background-color: rgb(224, 92, 92);
    border: none;
    border-radius: 5px;
}
#we{
    margin-top: 30px;
    width: 285px;
    height: 30px;
    padding-top: 20px;
    padding-left: 15px;
    border-radius: 0px 10px;

    background-color: rgb(226, 223, 221);
}
#qq{
    width: 19px;
    height: 18px;
    background: url(../tu/QQ-weixin.png) ;
    float: left;
}
#qq a{
    text-decoration: none;
    padding-left: 25px;
}
#WeChat{
    width: 19px;
    height: 18px; 
    background: url(../tu/QQ-weixin.png) ;
    background-position: 19px;
}
#WeChat a{
    text-decoration: none;
    width: 50px;
    padding-left: 25px;
    display: inline-block;
}
.login{
  text-decoration: none;
  float: right;
  margin-top: -17px;
  background-color: rgb(red, green, blue);
}

/* 第四部分 底部*/
#four{
    width: 990px;
    height: 100px;
    padding-top: 20px;

    text-align: center;
    background-color: rgb(255, 255, 255);
}
#four a{
    padding: 10px;
    color: black;
    text-decoration: none;
    text-align: center;
}
#copyright{
    color: black;
}

需图找我噢~

查看全文

http://www.kler.cn/a/322186.html