<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东登录页面</title>
<style>
.top{
padding-left: 100px;
}
.top2{
background-color:rgba(248, 198, 207, 0.747);
text-align: center;
padding-top: 18px;
width: 1400px;
height:40px;
}
.middle{
width: 1400px;
height:500px;
background-color: rgba(221, 9, 44, 0.856);
align-items: center;
}
.middle img{
margin-left: 250px;
}
.dl{
border: 0px solid ;
border-radius: 20px;
float: right;
width: 250px;
height:250px;
background-color: white;
margin-top: 50px;
padding: 40px 20px 0px 20px;
margin-right: 200px;
vertical-align: center;
}
.mmdl,.dxdl{
line-height: 50px;
}
.mmdl{
color: red;
font-size: 20px;
font-family: "微软雅黑";
}
.dxdl{
font-size: 20px;
font-family: "微软雅黑";
}
.input{
/* border:1px solid grey ; */
width: 350px;
height: 50px;
line-height: 10px;
margin-top: 10px;
margin-bottom: -25px;
}
.wjmm{
font-size: 10px;
font-family: "微软雅黑";
color: #666;
float: right;
}
.signin{
font-size: 15px;
font-family: "微软雅黑";
width: 260px;
height: 40px;
background-color: rgba(253, 129, 156, 0.5);
color: white;
}
.dlfs{
border: 1px solid rgba(226, 223, 223, 0.377);
width: 270px;
height: 300px;
/* margin-top: 30px; */
margin-bottom: 0px;
padding-bottom: 0px;
text-align: center;
background-color:rgba(226, 223, 223, 0.377);
font-size: 15px;
font-family: "微软雅黑";
color: #666;
}
.bottom ul li{
display: inline;
color: grey;
text-align: center;
font-family: "微软雅黑";
/* padding-left: 100px; */
/* float: left; */
}
.bottom ul{
text-align:center;
}
p{
/*注意:p前不用加. */
font-size: 12px;
text-align: center;
color: #666;
}
a{
color: #666;
}
</style>
</head>
<body>
<!-- 头 -->
<div class="top">
<div class="logo"><img src="./京东logo.png" alt=""></div>
</div>
<div class="top2">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。</div>
<!-- 体 -->
<div class="middle">
<img src="./京东中间.png" width="500px" height="500px">
<div class="dl">
<span class="mmdl">密码登录</span>
<span class="dxdl">短信登录</span>
<div class="input" width:350px height:50px><input type="text" placeholder="账户名/手机号/邮箱" name="userAccount"></div>
<div class="input"><input type="password" placeholder="密码" name="userPassword"></div>
<span class="wjmm">忘记密码</span>
<br>
<button type="submit" class="signin"><a href="https://www.jd.com/?cu=true&utm_source=haosou-search&utm_medium=cpc&utm_campaign=t_262767352_haosousearch&utm_term=39245174717_0_dcf09582e1b2479da7b3615be4be4e82"></a>登 录</button>
<br>
<span class="dlfs">QQ 微信 立即注册</span>
</div>
<!-- 尾部 -->
<div class="bottom">
<ul type-"disc">
<li><a href="https://www.baidu.com/" >关于我们</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >联系我们</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >人才招聘</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >商家入驻</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >广告服务</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >手机京东</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >友情链接</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >销售联盟</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >京东社区</a><span> |</span></li>
<li><a href="https://www.baidu.com/" >京东公益</a><span> |</span></li>
</ul>
<p>Copyright©2004-2024 京东JD.com 版权所有</p>
</div>
</div>
</body>
</htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<style>
.a{
height: 50px;
}
.a ul{
display: inline-block;
}
.a>ul li{
display: inline-block;
margin-left: 20px;
margin-top: 10px ;
list-style: none;
}
.a>ul a{
text-decoration: none;
color: black;
}
.top{width: 1280px}
.logo,.search,.c{
display:inline-block;
}
.logo{
width: 180px;
}
.c{
width:80px;
}
.logo{
float: left;
}
.search{
width: 880px;
}
.search>.box{
margin-left: 120px;
margin-top: 30px;
}
.search>ul li{
display: inline-block;
margin-top: 0px;
/* margin-left: 10px; */
}
.text{
border: 1px solid red;
height:30px;
width: 600px;
}
.submit{
height: 30px;
width: 50px;
background-color: red;
}
/* .c{
margin-right: 0px;
margin-top:0px;
} */
.zb{
width: 1400;
height: 200px;
background-color: white;
}
.middle_left,.middle_middle,.middle_right{
display:inline-block;
}
.middle_left,.middle_right{
width:250px;
}
.middle_left>ul{
border: 1px solid white;
background-color: white;
margin: center;
list-style-type: none;
}
.middle_left>ul a{
text-decoration: none;
color: black;
}
.middle_middle{
width:400px;
margin-left: 0px;
}
.middle_right{
/* float: right; */
margin-left: 100px;
}
/* 尾部 */
.foot>.box1 {
height: 400px;
width: 900px;
margin-left: 50px;
position: absolute;
margin-top: 200px;
}
.box1>span{
font-size: 25px;
color: grey;
margin-left: 45px;
margin-left: 400px;
margin-top: 200px;
}
.box1>.box2{
/* display: grid; */
width: 900px;
height: 200px;
display: grid;
grid-gap: 5px;
margin-top: 50px;
margin-left: 50px;
grid-template-columns:repeat(5,1fr);
grid-template-rows:repeat(2,1fr);
}
.box2>div{
border: 1px solid white;
background-color: whitesmoke;
height: 200px;
}
</style>
</head>
<body>
<div class="daohanglan">
<div class="a">
<ul>
<li><a href="#">湖南</a></li>
<li><a href="#">切换至企业版</a></li>
<li> <a href="#"> 你好,请登录</a></li>
<li> <a href="#">免费注册</a></li>
<li> <a href="#">我的订单 |</a></li>
<li> <a href="#">我的京东 |</a></li>
<li> <a href="#">企业采购 |</a></li>
<li> <a href="#">商家服务 |</a></li>
<li> <a href="#">网站导航 |</a></li>
<li> <a href="#">手机京东 |</a></li>
<li> <a href="#">网站无障碍</a></li>
</ul>
</div>
</div>
<div class="top">
<div class="logo">
<a href="" ><img src="../京东logo.png" alt=""></a>
</div>
<div class="search">
<form action="" class="box">
<input type="text" class="text" >
<input type="submit" class="submit" value="搜索" >
</form>
<!-- 搜索框底下的关键词 -->
<ul>
<li>电脑数码 </li>
<li>拍卖 </li>
<li>京东超市 </li>
<li>京东手机 </li>
<li>京东生鲜 </li>
<li>京东家电 </li>
<li>企业会员 </li>
<li>大牌奥莱 </li>
<li>进口好物 </li>
<li>京东五金城 </li>
</ul>
<!-- 搜索框右边 -->
<!-- <div class="c">
<img src="./京东搜索框右边部分.png" width="195px">
</div> -->
</div>
<!-- 中部 -->
<div class="zb">
<div class="middle_left">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a>/<a href="#">运用商</a>/<a href="#">数码</a></li>
<li><a href="#">电脑</a>/<a href="#">办公</a>
<li><a href="#">家居</a>/<a href="#">家居</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
<li><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></li>
<li><a href="#">美妆</a>/<a href="#">个护清洁</a>/<a href="#">宠物</a></li>
<li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
<li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></li>
<li><a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></li>
<li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
<li><a href="#">食品</a>/<a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a></li>
<li><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></li>
<li><a href="#">京东买药</a>/<a href="#">计生情趣</a>
<li><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书</a></li>
<li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
<li><a href="#">支付</a>/<a href="#">白条</a>/<a href="#">保险</a>/<a href="#">企业金额</a></li>
<li><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></li>
<li><a href="#">元器件</a>/<a href="#">原材料</a>/<a href="#">五金机电</a></li>
</ul>
</div>
<div class="middle_middle">
<a href="#"><img src="./京东商品页中间图.png" alt=""></a>
</div>
<div class="middle_right">
<div class="r1">
<div><a href="#"><img src="./r1.png" alt=""></a></div>
<div><a href="#"><img src="./r2.png" alt=""></a></div>
<div><a href="#"><img src="./r3.png" alt=""></a></div>
<div><a href="#"><img src="./r4.png" alt=""></a></div>
</div>
</div>
</div>
<!-- 尾部商品展示 -->
<div class="foot">
<div class="box1">
<span>为你推荐</span>
<div class="box2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东单个商品页</title>
<style>
/* 头部 */
.a{
height: 100px;
}
.a1,.a2,.a3,.a4{
height: 100px;
display: inline-block;
}
/* 京东logo */
.a1{
width: 16%;
margin-left: 150px;
}
/* 分类下拉框 */
.a2{
width: 10%;
vertical-align: middle;
}
/* 搜索框box */
.a3{
width: 38%;
vertical-align: middle;
}
/* 搜索输入框 */
.a3>.search .text{
border: none;
height: 30px;
width: 400px;
border: 2px solid brown;
margin-left: 80px;
}
/* 提交框1 */
span>.submit1{
border: none;
height: 34px;
width: 50px;
margin-top: 2px;
margin-left: -4px;
background-color: brown;
color: white;
font-family: "楷体";
}
/* 提交框2 */
span>.submit2{
border: none;
height: 34px;
width: 50px;
margin-top: 2px;
margin-left: -5px;
background-color: rgb(101, 100, 100);
color: white;
font-family: "楷体";
}
/* 搜索框下面的文字 */
.a3>ul li{
list-style: none;
display: inline-block;
margin-left: 10px;
font-size: 12px;
font-family: "微软雅黑";
position: relative;
left: 0;
}
/* 购物框 */
.a4{
width: 19%;
vertical-align: middle;
}
.a4>input{
border: none;
height: 30px;
width:120px ;
border: 1px solid rgb(174, 174, 174);
font-family: "黑体";
margin-left: 70px;
font-size: 15px;
color: rgb(251, 251, 251);
}
/* 店名 */
.b{
height: 120px;
}
/* 导航栏商品选择*/
.c{
height: 40px;
background-color: rgba(0, 0, 0, 0.308);
}
/* 左边 */
.c1{
display: inline-block;
margin-left: 200px;
}
.c1>ul li{
list-style: none;
display: inline-block;
color: white;
font-size: 16px;
margin-left: 30px;
margin-top: 0px;
}
.c1>ul li:hover{
color: red;
}
.c .c11{
border: none;
background-color: rgba(0, 0, 0, 0.205);
color: white;
font-size: 16px;
}
/* 右边导航搜索框 */
.c>span{
margin-left: 150px;
}
/* 商品导航栏介绍 */
.d{
height: 20px;
background-color: rgb(206, 201, 201);
}
.d>ul{
margin-left: 200px;
}
.d>ul>li{
list-style: none;
display: inline-block;
margin-left: 20px;
font-family: "微软雅黑";
font-size: 13px;
}
/* 商品样式 */
.e{
height: 700px;
}
.e>div{
height: 690px;
display: inline-block;
/* border: 1px solid red; */
}
.e1{
width: 28%;
vertical-align: top;
}
/* 左边商品展示 */
.e1>.e11{
margin-top: 15px;
margin-left: 120px;
}
.e1>.e12, .e1>.e13{
margin-left: 120px;
}
.e1>.e12>div,.e1>.e13>div{
margin-top: 20px;
display: inline-block;
padding-left: 15px;
}
.e13>.e132{
margin-left: 210px;
}
.e131:hover,.e132:hover{
color: red;
}
/* 中间具体商品展示 */
.e2{
width: 40%;
}
.e2>div{
margin-left: 100px;
}
/* 商品名称 */
.e21{
margin-top: 25px;
color: rgb(102, 102, 102) ;
font-size: 16px;
}
.e22>img{
height: 150px;
}
/* 配送地址、配送时间 */
.e23>.e232,.e23>.e233,.e23>.e234{
margin-left:100px ;
}
.e232>ul li,.e233>ul li{
display: inline-block;
list-style: none;
color: rgb(112, 162, 243);
margin-left: 20px;
margin-top: 10px;
font-size: 14px;
}
.e2321{
border: none;
}
.e23>.e234>div{
margin-left:100px ;
font-size: 13px;
margin-top: 10px;
}
.e234>span{
color: red;
}
.e24>img{
width: 400px;
height: 200px;
}
/* 右边推荐商品 */
.e3{
width: 28%;
height: 590px;
position: absolute;
right: 0;
top:35%;
}
.e3>div{
margin-left: 80px;
margin-top: 10px;
}
.e3>span{
margin-top: 10px;
margin-left: 140px;
font-family:"微软雅黑" ;
font-size: 20px;
color: rgb(90, 88, 88);
}
</style>
</head>
<body>
<!-- 头部 总搜索框-->
<div class="a">
<!-- 京东logo -->
<div class="a1"><img src="./京东logo.png" width="210px" height="80px" alt=""></div>
<!-- 全部分类下拉框 -->
<div class="a2">
<select name="" id="">
<option value="">全部分类</option>
<option value="">家用电器</option>
<option value="">数码</option>
<option value="">...</option>
</select>
</div>
<!-- 搜索框box -->
<div class="a3">
<div class="search">
<input type="text" class="text">
<span> <input type="submit" class="submit1" value="搜全站">
<input type="submit" class="submit2" value="搜本店"></span>
</div>
<ul>
<li>箱包皮具</li>
<li>女包</li>
<li>女士双肩包</li>
<li>三福</li>
<li></li>
</ul>
</div>
<!-- 我的购物车下拉框 -->
<div class="a4"><input type="text" placeholder="我的购物车 >"></div>
</div>
<!-- 导航栏商品选择 -->
<div class="c">
<div class="c1">
<ul>
<li>首页</li>
<li>
<select name="" class="c11" id="">
<option value="">全部分类</option>
<option value="">男装专区</option>
<option value="">鞋子专区</option>
<option value="">夹克</option>
<option value="">针织衫</option>
<option value="">会员专区</option>
</select>
</li>
<li>全部分类</li>
<li>男装专区</li>
<li>鞋子专区</li>
<li>夹克</li>
<li>针织衫</li>
<li>会员专区</li>
</ul>
</div>
<span> <input type="text" class="c12">
<input type="submit" class="c13" value="搜索"></span>
</div>
<!-- 商品导航栏介绍 -->
<div class="d">
<ul>
<li>箱包皮具</li>
<li>></li>
<li>女包</li>
<li>></li>
<li>女士双肩包</li>
<li>></li>
<li>三福</li>
</ul>
</div>
<!-- 商品样式 -->
<div class="e">
<!-- 官网下载图片 -->
<div class="e1">
<div class="e11"> <img src="./商品图.png" height="400px" width="400px" alt=""></div>
<div class="e12">
<div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/227944/29/21525/60499/667b7d8dFfbdd1128/ba7b2aa7398c7002.jpg!cc_50x66" height="80px" width="80px" alt=""></div>
<div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/218896/37/39230/60611/662a0d72Fe63cda41/044e1638fd11e16d.jpg!cc_50x66" height="80px" width="80px" alt=""></div>
<div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/123734/20/44550/42557/662a0d72Fb4c9d8b7/99ce30977da22d48.jpg!cc_50x66" height="80px" width="80px" alt=""></div>
<div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/235194/33/16585/61532/662a0d73Ffb901a11/d27532a1f6d4dbb8.jpg!cc_50x66"height="80px" width="80px" alt=""></div>
<div><img src="https://img10.360buyimg.com/n5/s50x66_jfs/t1/133949/1/41894/50364/662a0d73Fdb8889b3/e7c319a96f899cc2.jpg!cc_50x66"height="80px" width="80px" alt=""></div>
</div>
<div class="e13">
<div class="e131"><a href="#">关注</a></div>
<div class="e132"><a href="#">举报</a></div>
</div>
</div>
<!-- 中间的商品具体介绍 -->
<div class="e2">
<!-- 商品名称 -->
<div class="e21">当季新品 三福背包夏季芭蕾运动风少女感甜美蝴蝶结双口袋双肩包485632 精白 大</div>
<!-- 价格 -->
<div class="e22"><img src="./价格图.png" width="600px" height="200px" alt=""></div>
<!-- 配送地址 、配送时间 -->
<div class="e23">
<div class="e231">配 送 至
<select name="" id="">
<option value="">湖南省长沙市望城区丁字湾镇芙蓉北路</option>
</select>
<span>有货</span>
<div>
<div class="e232">
<ul>
<li>支持 晚发赔</li>
<li>|</li>
<li>可配送全球</li>
<li>|</li>
<li>店铺发货&售后</li>
<li>|</li>
<li>
<select name="" class="e2321" id="">
<option value="">七天价保</option>
<option value="">过敏无忧</option>
<option value="">免费上门退换</option>
<option value="">破损退换</option>
<option value="">闪电退款</option>
</select>
</li>
</ul>
</div>
<div class="e233">
<ul>
<li>京东物流</li>
<li>后天达</li>
<li>|</li>
<li>预约送货</li>
<li>|</li>
<li>部分发货</li>
</ul>
</div>
<div class="e234">由<span>三福官方旗舰店</span>发货,并提供售后服务, 6月22日-6月28日的订单预计在6月29日前发货,请您耐心等待,详细请联系商家客服</div>
</div>
<!--选择商品的款式 -->
<div class="e24"><img src="./商品样式.png" width="600px" alt=""></div>
<hr>
</div>
<!-- 右边推荐商品 -->
<div class="e3">
<span>看了又看</span>
<div><img src="./又看1.png" width="200px" height="200px" alt=""></div>
<div><img src="./又看2.png" width="200px" height="200px" alt=""></div>
<div><img src="./又看3.png" width="200px" height="200px" alt=""></div>
</div>
</div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
.box{
/* 盒子模型由
内容区域(可设置 内容区域的宽高)、
内间距(padding)、
边框(border)、
外边距(margin)组成 */
width: 1200px;
height: 650px;
padding: 50px;
border:10px solid red;
margin: 30px;
/* 因为外边距的不计算在内,所以盒子的的宽为1320,高为770; */
/*盒子尺寸的设计默认content-box是内容区域,
若改为border-box,则此时的1200px是盒子的总宽度的意思, 而不再是1320*/
box-sizing:border-box;
/* 常用替换元素有
<iframe/》、<img/>、<video/> */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>