发表于： 2019-12-16 23:13:09
1 972
一、今天完成的事情
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
*{ padding: 0px; margin: 0px;
} a{ text-decoration: none;
} nav { width: 180px;
} nav li{position: relative;} nav li a{ line-height: 28px; display: block; color: black; background: #FAFAFA; text-align: center; position: relative; font-size: 12px; border: 1px solid #ECECEC; margin-top: -1px;
} nav li a:before{ content: ""; background: red url(写上雪碧图的地址) no-repeat; display: block; width: 14px; height: 14px; position: absolute; top: 6px; left: 31px; border-radius: 100%;
} nav li a:hover{ background:#FFFFFF; border-right-color: #FFFFFF;
} nav li .air{ position: absolute; top: 50%; margin-top: -9px; right: 10px; display: block; background: #ED8B8A; border-radius: 10px; padding: 1px 9px; color: white; font-size: 12px;
} </style></head><body>
<nav>
<ul>
<li><a href="">用户信息</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">订阅信息</a></li>
<li><a href="">浏览历史</a></li>
<li><a href="">消息中心 </a><span class='air'>1</span></li>
</ul>
</nav></body></html>大概帮写了一下.因为截图比较模糊.如果有色差和宽度大小不一样.稍微调整一下就可以了
把所需要用到的图片整理成雪碧图
nav li a:before{ content: ""; background: red url(写上雪碧图的地址) no-repeat;
....
}这段css换成你的雪碧图地址.然后每个li标签添加个独一的class单独操作这个class 进行background-position选择图片
二、遇到的困难
对于侧边栏的理解还不够
三、明天要做的事情
任务十三
四、收获
了解侧边栏的写法
返回列表
评论