京东页面京东快报建立
<!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>Document</title>
<style>
#h{
font-size: 25px;
font-weight: bold;
}
#a{font-size: 16px;
color: grey;
text-decoration: none;}
#a:hover{
color: red;
}
.ds1{
color: red;
background-color: rgb(250, 219, 219);
font-size: 16px;
text-decoration: none;
}
.ds2{
font-size: 16px;
color: grey;
text-decoration: none;
}
.ds2 div{
width: 140px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.di :hover{
color: red;
}
</style>
</head>
<body>
<span id="h">京东快报 <span><a href="#" id="a">更多 ></a>
<div class="di"><a href="#" class="ds1">热评</a><a href="#" class="ds2"> <div>解决头发干枯毛躁的,</div></a></div>
<div class="di"><a href="#" class="ds1">推荐</a><a href="#" class="ds2"> <div>有了babycare腰凳,</div></a></div>
<div class="di"><a href="#" class="ds1">最新</a><a href="#" class="ds2"> <div>从18岁以后就要开始,</div></a></div>
<div class="di"><a href="#" class="ds1">热评</a><a href="#" class="ds2"> <div>用新秀丽双肩背包,</div></a></div>
</body>
</html>