发表于： 2019-07-11 23:35:21
2 1165
今天完成的任务：
1.按师兄的要求完成任务5
2、学习任务6相关资料
雪碧图：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>雪碧图实现原理</title>
- </head>
- <style>
- ul,h3{
- margin: 0;
- padding: 0;
- }
- h3{
- display: block;
- margin: 0;
- padding: 0;
- }
- .cat{
- position: relative;
- width: 150px;
- background-color: #f8f8f8;
- border: 1px solid #bbb;
- }
- li{
- z-index: 2;
- position: relative;
- display: block;
- height: 31px;
- line-height: 31px;
- overflow: hidden;
- margin: 1px 10px 0;
- vertical-align: bottom;
- border-bottom: 1px solid #dedede
- }
- li:hover{
- background-color:#666666;
- }
- li h3{
- font-size: 13px;
- font-weight: 400;
- }
- li i{
- display: inline;
- float:left;
- margin: 3px 10px 0 0;
- height: 24px;
- width: 30px
- }
- /* 在这里补充雪碧图的样式 */
- li>i{
- background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
- }
- .cat-2>i{
- background-position:0 -24px;
- }
- .cat-3>i{
- background-position:0 -48px;
- }
- .cat-4>i{
- background-position:0 -72px;
- }
- .cat-5>i{
- background-position:0 -96px;
- }
- .cat-6>i{
- background-position:0 -120px;
- }
- .cat-7>i{
- background-position:0 -144px;
- }
- .cat-8>i{
- background-position:0 -168px;
- }
- </style>
- <body>
- <div class="cat">
- <ul>
- <li class="cat-1"><i></i><h3>服装内衣</h3></li>
- <li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
- <li class="cat-3"><i></i><h3>运动户外</h3></li>
- <li class="cat-4"><i></i><h3>珠宝手表</h3></li>
- <li class="cat-5"><i></i><h3>手机数码</h3></li>
- <li class="cat-6"><i></i><h3>家电办公</h3></li>
- <li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
- <li class="cat-8"><i></i><h3>母婴用品</h3></li>
- </ul>
- </div>
- </body>
- </html>
2.下拉单
这个页面讲得不错，学习了
https://www.cnblogs.com/Mtime/p/5265793.html
3.了解bootstrap
推荐下面网址
二、明天的计划
完成任务6
三、遇到的问题及思考
不知道是不是有点低烧，脑瓜子有点疼，今天下午基本就是看资料划水了，而且还不咋能看进去，效率不高
晚上还是好好休息吧，养精蓄锐，明日再战。
四·收获
了解了下拉单 bootstrap 雪碧图概念
返回列表
评论