<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东单个商品页</title>
<style>
*{
margin: 0;
}
/* .a,.b,.c,.e,.d{
border: 1px solid black;
margin-top: 5px;
} */
/* 头部 搜素框 */
.a{
height: 100px;
}
.a1,.a2,.a3,.a4{
height: 100px;
display: inline-block;
/* border: 1px solid red; */
}
/* 京东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: black;
}
/* 左边导航文字 */
.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: 10px;
}
.c1>ul li:hover{
color: red;
}
.c .c11{
border: none;
background-color: black;
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;
}
/* 配送地址、配送时间 */
.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;
}
.e235{
margin-top: 10px;
font-size: 11px;
}
/* 右边推荐商品 */
.e3{
width: 28%;
/* border: 1px solid red; */
height: 590px;
position: absolute;
right: 0;
top:35%;
}
.e3>div{
margin-left: 80px;
margin-top: 20px;
}
.e3>span{
margin-top: 20px;
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" placeholder="口红">
<span> <input type="submit" class="submit1" value="搜全站">
<input type="submit" class="submit2" value="搜本店"></span>
</div>
<ul>
<li>兰蔻</li>
<li>兰蔻口红</li>
<li>唇釉</li>
<li>兰蔻312</li>
<li>兰蔻唇釉</li>
</ul>
</div>
<!-- 我的购物车下拉框 -->
<div class="a4"><input type="text" placeholder="我的购物车 >"></div>
</div>
<!-- 店名 -->
<div class="b">
< img src="https://img13.360buyimg.com/cms/jfs/t1/112143/7/26088/33799/625fd539E0496e66a/1915006515024903.jpg.avif" height="100px" width="1800px" alt="">
</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>
</select>
</li>
<li>送礼甄选</li>
<li>护肤系列</li>
<li>彩妆系列</li>
<li>香氛系列</li>
<li>青春奢宠</li>
<li>精选套餐</li>
</ul>
</div>
<span> <input type="text" class="c12" placeholder="小黑瓶">
<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>兰蔻(LANCOME)</li>
<li>></li>
<li>兰蔻清纯柔润水唇釉...</li>
</ul>
</div>
<!-- 商品样式 -->
<div class="e">
<!-- 官网下载图片 -->
<div class="e1">
<div class="e11"> < img src="https://img11.360buyimg.com/n1/jfs/t1/244628/2/6057/244416/65f2db11Fc4664562/6a91037590af74a9.jpg.avif" height="400px" width="400px" alt=""></div>
<div class="e12">
<div>< img src="https://img11.360buyimg.com/n5/jfs/t1/240390/3/11684/114472/666c625fF74208cfb/b22df5ce39bb8464.jpg.avif" height="80px" width="80px" alt=""></div>
<div>< img src="https://img11.360buyimg.com/n5/jfs/t1/233651/39/17561/80575/66609799Fd72a98b0/489f8d20997fef3f.jpg.avif" height="80px" width="80px" alt=""></div>
<div>< img src="https://img11.360buyimg.com/n5/jfs/t1/119759/4/41873/84502/65f2db10F82d69d3e/26910196fac2d8aa.jpg.avif" height="80px" width="80px" alt=""></div>
<div>< img src="https://img11.360buyimg.com/n5/jfs/t1/129602/27/38642/164725/65f2db0fF8c1a1bc7/253f4025eab9d471.jpg.avif"height="80px" width="80px" alt=""></div>
</div>
<div class="e13">
<div class="e131"><举报></div>
<div class="e132"><关注></div>
</div>
</div>
<!-- 中间的商品具体介绍 -->
<div class="e2">
<!-- 商品名称 -->
<div class="e21">兰蔻312裸唇釉裸柔桃 春夏显白柔和裸橘色口红唇膏礼盒生日礼物送女友</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>支持 59元免基础运费</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>发货,并提供售后服务,明天16:15前下单,预计06月17日(周一)送达</div>
<div class="e235">重 量 0.036kg</div>
</div>
<!--选择商品的款式(和前面方法大差不差,这里偷小懒) -->
<div class="e24">< img src="./商品样式.png" width="600px" alt=""></div>
<hr>
</div>
<!-- 右边推荐商品 -->
<div class="e3">
<span>看了又看</span>
<div>< img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/180872/32/45337/154696/666c5e04F84100f40/530b4bdd49a36ab1.jpg" width="200px" height="200px" alt=""></div>
<div>< img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/238489/4/10710/120924/666c5e04F72d9e29c/c05500b1aafac7bf.jpg" width="200px" height="200px" alt=""></div>
<div>< img src="https://img10.360buyimg.com/n1/s150x150_jfs/t1/185622/8/46139/134744/666c5e0aF45781819/34471b729c92ee1e.jpg" width="200px" height="200px" alt=""></div>
</div>
</div>
</body>
</html>
<!-- 其中出现的问题:写完e2后e3突然就以e2为对齐以及渲染标准了,好奇怪 -->
<!-- <div class="e3">
<span>看了又看</span>
<div>< img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/180872/32/45337/154696/666c5e04F84100f40/530b4bdd49a36ab1.jpg" width="200px" height="200px" alt=""></div>
<div>< img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/238489/4/10710/120924/666c5e04F72d9e29c/c05500b1aafac7bf.jpg" width="200px" height="200px" alt=""></div>
<div>< img src="https://img10.360buyimg.com/n1/s150x150_jfs/t1/185622/8/46139/134744/666c5e0aF45781819/34471b729c92ee1e.jpg" width="200px" height="200px" alt=""></div>
</div> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东界面</title>
<style>
/* div{
border: 1px solid red;
} */
*{
margin: 0;
}
/* 头部 */
.a{
height: 60px;
background-color: red;
}
/* 导航栏 */
.b{
height: 40px;
}
/* 导航栏内容渲染 */
.b ul{
display: inline-block;
}
.b>ul li{
display: inline-block;
list-style: none;
margin-left: 20px;
margin-top: 10px;
}
.b1 span,.b5 span{
color: red;
}
/* 搜索栏 */
.c{height: 100px; }
.c1,.c2,.c3{display: inline-block;}
.c1,.c3{
width: 18%;
}
.c1 img{
margin-left: 60px;
}
.c2{
width: 58%;
}
/* 搜索框 */
.c2>.box {
margin-top: 20px;
margin-left: 200px;
border: none;
}
.text{
width: 470px;
height: 25px;
border: 2px solid red;
}
.submit{
height: 27px;
background-color: red;
}
/* 搜索框下的语句 */
.c2>ul li{
display: inline-block;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
font-size:14px ;
}
/* 主体 */
.d{
height: 350px;
background-color: rgb(235, 235, 235);
}
.d1,.d2,.d3,.d4,.d5{display: inline-block;}
.d1,.d2,.d5{
width: 15%;
}
.d2>ul{
border: 1px solid rgb(195, 194, 194);
border-radius: 3%;
/* box-shadow: 2px 2px 2px; */
background-color: white;
}
.d1 img{
float: right;
}
.d3{
width: 33%;
}
.d4{
height: 338px;
width: 20%;
}
.d4>.d41,.d4>.d42,.d4>.d43,.d4>.d44{
height: 24%;
margin-top: 5px;
border: 1px solid rgb(168, 167, 167);
border-radius: 3%;
}
.d2>ul li{
list-style: none;
font-size: 12px;
padding-top: 3px;
}
/* 尾部 */
.e{
height: 400px;
}
.e>.box1{
height: 350px;
width: 1100px;
background-color: red;
position: absolute;
margin-left: 15%;
margin-top:20px;
border-radius: 2%;
}
.box1>span{
font-size: 30px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: rgb(31, 20, 7);
position: absolute;
margin-left: 25%;
margin-top: 10px;
}
.box1>input{
border: none;
height: 30px;
width: 220px;
background-color: rgb(166, 232, 12);
font-size: 18px;
position: absolute;
margin-left: 43%;
margin-top: 15px;
border-radius: 10px;
}
.box1>.box2{
height: 270px;
width: 1000px;
display: grid;
grid-template-columns: repeat(6,1fr);
grid-template-rows: repeat(2,1fr);
grid-gap: 10px;
margin-top: 5%;
margin-left: 45px;
}
.box2>div{
border: 1px solid rgb(189, 189, 189);
border-radius: 5%;
background-color: white;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="a"> < img src="./头部.png" height="60px" width="1400px" alt=""></div>
<!-- 导航栏 -->
<div class="b">
<ul>湖南</ul>
<ul>切换至企业版</ul>
<ul>
<li class="b1">你好,<span>请登录</span></li>
<li>免费注册 |</li>
<li>我的订单 |</li>
<li>我的京东 |</li>
<li class="b5"> <span>企业采购</span> |</li>
<li>商家服务 |</li>
<li>网站导航 |</li>
<li>手机京东 |</li>
<li>网站无障碍</li>
</ul>
</div>
<!-- 搜索栏 -->
<div class="c">
<div class="c1">< img src=" https://img10.360buyimg.com/img/jfs/t1/217337/13/41302/12933/6658993dF6b3349e7/19a1dab36f5e5bc9.jpg" width="144px" height="90px" alt=""></div>
<div class="c2">
<form action="" class="box">
<input type="text" class="text" placeholder="鲁花花生油" >
<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>
<div class="c3">< img src="https://img12.360buyimg.com/babel/jfs/t20270530/219934/19/40764/88939/66588936Fc62020cb/556428d80813c7aa.png.avif" width="144px" height="90px" alt=""></div>
</div>
<!-- 主体 -->
<div class="d">
<div class="d1">< img src="./页面左.png" width="199px" height="340px" alt=""></div>
<div class="d2">
<ul>
<li>家用电器</li>
<li>手机/运营商/数码</li>
<li>电脑/办公/文具用品</li>
<li>家居/家具/家装/厨具</li>
<li>男装/女装/童装/内衣</li>
<li>美妆/个人清洁/宠物</li>
<li>女鞋/箱包/钟表珠宝</li>
<li>男鞋/运动/户外</li>
<li>房产/汽车/汽车用品</li>
<li>母婴/玩具乐器</li>
<li>食品/酒类/生鲜/特产</li>
<li>艺术/礼品/鲜花/农牧园艺</li>
<li>京东/买药/计生情趣</li>
<li>图书/文娱/教育/电子书</li>
<li>机票/酒店/旅游/生活</li>
<li>支付/白条/保险/企业金融</li>
<li>安装/清洗/维修/二手</li>
<li>元器件/原材料/五金机电</li>
</ul>
</div>
<div class="d3"> < img src="./界面中间.png" height="340px" width="500px" alt=""></div>
<div class="d4">
<div class="d41"> < img src="./d41.png" height="80px" width="310px" alt=""></div>
<div class="d42">< img src="./d42.png" height="80px" width="310px" alt=""></div>
<div class="d43">< img src="./d43.png" height="80px" width="310px" alt=""></div>
<div class="d44">< img src="./d44.png" height="80px" width="310px" alt=""></div>
</div>
<div class="d5">< img src="./界面右.png"width="199px" height="340px" alt=""></div>
</div>
<!-- 尾部 -->
<div class="e">
<div class="box1">
<span>爆款低价开抢</span>
<input type="text" class="" placeholder="618周年庆 又便宜又好">
<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>商品11</div>
<div>商品12</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>
<!--
头部top
-logo标识
-字体欢迎登录部分
主体
-中间区域的主体
-居中的主体区域
-登录的白色区域(
登录
文本框input
超链接忘记密码
提交submit
)
尾部
-无序的超链接
-版权字段
-->
<style>
.top{
width: 1400px;
margin: 0;
}
.logo{
margin-left: 30px;
}
.upper{
width: 1400px;
height: 40px;
background-color: antiquewhite;
text-align: center;
font-size: 15px;
margin-top: 20px;
font-family: "微软雅黑";
padding-top: 17px;
}
.main{
width: 1400px;
height: 400px;
background-color:#e93854;
}
.login{
width: 200px;
height: 240px;
float: right;
background-color:white;
margin-top: 100xp;
border: 1px solid gray;
padding: 40px 40px 40px 40px;
border-radius: 10px;
box-shadow: 2px 2px 2px;
vertical-align: center;
margin-top: 40px;
margin-right: 270px;
}
.index{
list-style-type: none;
display: inline-block;
}
.bottom ul{
text-align: center;
margin-top: 20px;
}
/* 无序超链接渲染 */
.bottom ul li{
display: inline-block;
list-style: none;
text-align: center;
font-size: 12px;
margin-top: 10px;
}
a{
text-decoration: none;
color: #666;
text-align: center;
}
/* 京东中间图片 */
.main img{
margin-left: 20%;
}
/* 通配符 */
*{
margin: 0;
padding: 0;
}
/* QQ 微信 立即注册*/
.login ul li{
list-style: none;
display: inline-block;
font-size:14px ;
color: #666;
margin-top: 30px;
}
/* 忘记密码 */
.forg{
text-align: right;
font-size: 12px;
color: #666;
margin-top: 10px;
}
/* 表单标签 */
.input{
width: 200px;
height: 30px;
/*配合下面拥有一个自己的表单边框 */
border: 1px solid #bbddbb;
margin-top: 20px;
text-align: center;
}
/* 去掉表单的边框 */
.input input{
outline: none;
border: none;
margin-top: 10px;
text-align: left;
}
/* 提交框 */
.signin{
background-color: rgb(229, 112, 112);
width: 200px;
height: 25px;
border-radius: 5px;
margin-top: 20px;
}
/* 版权 */
p{
font-size: 12px;
text-align: center;
color: #666;
}
input:focus{
width: 180px;
height: 30px;
}
.login .r1{
color: red;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="top">
<div class="logo">< img src="./京东logo.png" width="316px" height="60px" alt=""></div>
</div>
<div class="upper">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。</div>
<!-- 主体 -->
<div class="main">
< img src="./京东中间图片.png" width="400px" height="400px" alt="">
<div class="login">
<span class="r1" >密码登录</span>
<span class="r2">短信登录</span>
<div class="input"> <input type="text" placeholder="账号名/手机号/邮箱" name="username"></div>
<div class="input"><input type="password" placeholder="密码" name="password" required></div>
<div class="forg">忘记密码</div>
<button type="submit" class="signin">登 录</button>
<ul>
<li class="qq">QQ</li>
<li class="vx">微信</li>
<li class="zhuce">立即注册</li>
</ul>
</div>
</div>
<!-- 尾部 -->
<div class="bottom">
<ul>
<li>关于我们 <span>|</span></li>
<li>联系我们 <span>|</span></li>
<li>人才招聘 <span>|</span></li>
<li>商家入驻 <span>|</span></li>
<li>广告服务 <span>|</span></li>
<li>手机京东 <span>|</span></li>
<li>友情链接 <span>|</span></li>
<li>销售联盟 <span>|</span></li>
<li>京东社区 <span>|</span></li>
<li>京东公益</li>
</ul>
<p>Copyright©2004-2024 京东JD.com 版权所有</p >
</div>
</body>
</html>