京东左侧导航栏
京东的导航栏
我的实现
贴上代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东左侧导航栏title>
head>
<style>
.box1 {
width: 220px;
margin-top: 70px;
margin-left: 30px;
}
.box2 {
background-color: white;
line-height: 27px;
padding-left: 20px;
}
.box2:hover {
background-color: D9D9D9;
/*text-align: center;*/
line-height: 27px;
}
a {
text-decoration: none;
color: #333;
font-size: 14px;
}
a:hover {
color: #C81623;
}
style>
<body style="background-color: #bfa;">
<div class="box1">
<div class="box2"><a href="#">家用电器a>div>
<div class="box2"><a href="#">手机a>/<a href="#"><a href="#">运营商a>/<a href="#">数码a>div>
<div class="box2"><a href="#">电脑a>/<a href="#">办公a>div>
<div class="box2"><a href="#">家居a>/<a href="#">家具a>/<a href="#">家装a>/<a href="#">厨具a>div>
<div class="box2"><a href="#">男装a>/<a href="#">女装a>/<a href="#">童装a>/<a href="#">内衣a>div>
<div class="box2"><a href="#">美妆a>/<a href="#">个护清洁a>/<a href="#">宠物a>div>
<div class="box2"><a href="#">女鞋a>/<a href="#">箱包a>/<a href="#">a><a href="#">钟表a>/<a href="#">珠宝a>div>
<div class="box2"><a href="#">男鞋a>/<a href="#">运动a>/<a href="#">户外a>div>
<div class="box2"><a href="#">房产a>/<a href="#">汽车a>/<a href="#">a><a href="#">汽车用品a>div>
<div class="box2"><a href="#">母婴a>/<a href="#">玩具乐器a>div>
<div class="box2"><a href="#">食品a>/<a href="#">酒类a>/<a href="#">a><a href="#">生鲜a>/<a href="#">a>
特产a>
div>
<div class="box2"><a href="#">艺术a>/<a href="#">礼品鲜花a>/<a href="#">a><a href="#">农资绿植a>div>
<div class="box2"><a href="#">医药保健a>/<a href="#">计生情趣a>a>div>
<div class="box2"><a href="#">图书a>/<a href="#">文娱a>/<a href="#">教育a>/<a href="#">a><a href="#">电子书a>div>
<div class="box2"><a href="#">机票a>/<a href="#">酒店a>/<a href="#">旅游a>/<a href="#">a><a href="#">生活a>div>
<div class="box2"><a href="#">理财a>/<a href="#">众筹a>/<a href="#">白条a>/<a href="#">a><a href="#">保险a>div>
<div class="box2"><a href="#">安装a>/<a href="#">维修a>/<a href="#">清洗a>/<a href="#">a><a href="#">二手a>div>
<div class="box2" style="margin-bottom: 6px;"><a href="#">工业品a>div>
div>
body>
html>
总结
在编写前端的代码中有很多细节没有注意，实现效果与实际还是有些差距，在还没有熟悉掌握前端的技能之前能写出现在的样式也算不错了，自我感觉良好，作为业余爱好，希望自己会一直坚持下去，能尽早搭建出自己的网站。