跟着B站老师学习,其中有个项目是用HTML5+CSS3做京东左侧的项目栏;用到的是盒子模型的知识。其中视频中老师用的是hav元素作为a的父元素;我用的是ul-li作为其祖先元素;总体实现的效果是差不多的;其中有两个注意点
(1)line-height
li{
line-height=25px;
height=25px;
}
该段代码设置父元素高和行高相同,使得字体呈先在正中央。
(2)去除超链接下划线
text-decoration=none;
最后是项目的总体呈现;
其中,超链接功能实现正常;但界面较丑;
其中也巩固了一个知识,超链接的伪类 :hover不只是在超链接中能用;
以下是代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="../exericse/reset.css">
<style>
body{
background-color: khaki;
}
img{
height: 150px;
width: 150px;
}
a{
color: #000;
text-decoration: none;
}
li:hover{
background-color:#d9d9d9;
}
.llist{
background-color: white;
width: 150px;
overflow-y: scroll;
}
li{
height: 35px;
line-height: 35px;
padding: 0px 5px;
}
a:link{
color: grey;
}
a:active{
color: red;
}
a:hover{
color: red;
}
a{
font-size:10px;
}
a:first-of-type{
padding-left: 3px;
}
</style>
</head>
<body>
<div>
<img src="../pho/jpp.jpg" alt="">
</div>
<ul class="llist">
<li>
<span>
<a href="https://jiadian.jd.com/"target="_blank"> 家用电器</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 手机/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 运营商/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 数码</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 电脑/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 办公</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li> <li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
<li>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家居/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank">家具/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 家装/</a>
</span>
<span>
<a href="https://shouji.jd.com/" target="_blank"> 厨具</a>
</span>
</li>
</li>
</ul>
</body>
</html>