京东商城原网站:
效果图:
该仿制效果与原网站效果相似度百分之九十五以上
源码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东商城左侧导航条</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
body{
background-color: rgb(243, 233, 213);
}
.list-item{
width: 190px;
height: 450px;
background-color: white;
margin:50px auto;
padding: 10px 0px;
}
.list-item li{
width: 172px;
height: 25px;
padding-left: 18px;
/* 要让一个文字在父元素中垂直居中,只需将父元素的
line-height社会为何父元素一样的高度即可 */
line-height: 25px;
}
.list-item a{
font-size: 14px;
color: #636363;
/* 去除下划线 */
text-decoration: none;
}
.list-item span{
color: #636363;
font-size: 12px;
padding: 0px 2px;
}
/* 设置鼠标移入时的效果 */
.list-item li:hover{
background-color: #d9d9d9;
}
.list-item a:hover{
color: rgb(228, 83, 57);
}
</style>
</head>
<body>
<ul class="list-item">
<li>
<a href="">家用电器</a>
</li>
<li>
<a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a>
</li>
<li>
<a href="">电脑</a><span>/</span><a href="">办公</a>
</li>
<li>
<a href="">家居</a><span>/</span><a href="">家具</a><span>/</span><a href="">家装</a><span>/</span><a href="">厨具</a>
</li>
<li>
<a href="">男装</a><span>/</span><a href="">女装</a><span>/</span><a href="">童装</a><span>/</span><a href="">内衣</a>
</li>
<li>
<a href="">美妆</a><span>/</span><a href="">个护清洁</a><span>/</span><a href="">宠物</a>
</li>
<li>
<a href="">女鞋</a><span>/</span><a href="">箱包</a><span>/</span><a href="">钟表</a><span>/</span><a href="">珠宝</a>
</li>
<li>
<a href="">男鞋</a><span>/</span><a href="">运动</a><span>/</span><a href="">户外</a>
</li>
<li>
<a href="">房产</a><span>/</span><a href="">汽车</a><span>/</span><a href="">汽车用品</a>
</li>
<li>
<a href="">母婴</a><span>/</span><a href="">玩具乐器</a>
</li>
<li>
<a href="">食品</a><span>/</span><a href="">酒类</a><span>/</span><a href="">生鲜</a><span>/</span><a href="">特产</a>
</li>
<li>
<a href="">艺术</a><span>/</span><a href="">礼品鲜花</a><span>/</span><a href="">农资绿植</a>
</li>
<li>
<a href="">医药保健</a><span>/</span><a href="">计生情趣</a>
</li>
<li>
<a href="">图书</a><span>/</span><a href="">文娱</a><span>/</span><a href="">教育</a><span>/</span><a href="">电子书</a>
</li>
<li>
<a href="">机票</a><span>/</span><a href="">酒店</a><span>/</span><a href="">旅游</a><span>/</span><a href="">生活</a>
</li>
<li>
<a href="">理财</a><span>/</span><a href="">众筹</a><span>/</span><a href="">白条</a><span>/</span><a href="">保险</a>
</li>
<li>
<a href="">安装</a><span>/</span><a href="">维修</a><span>/</span><a href="">清洗</a><span>/</span><a href="">二手</a>
</li>
<li>
<a href="">工业品</a>
</li>
</ul>
</body>
</html>
积跬步,至千里!
加油!上学人!