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

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

news 来源：原创 2024/9/24 7:39:52

<!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;
}

需图找我噢~