css实战导航栏设计

最新推荐文章于 2023-09-01 17:58:35 发布

LMF283

最新推荐文章于 2023-09-01 17:58:35 发布

阅读量401

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/LMF283/article/details/100185626

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

问题：

遇到鼠标在上方时，区域使用蓝色作为底色，与其他未选中区域的文字的颜色保存一致，选中区域的文字变为白色。
答：实现效果图如下：
实现的代码使用的标签是：hover选择器

一个HTML代码的小技巧

先直接写ul>li*6>a[href=“#”]，完成后按tab键可直接生成无序列表，之间文字为之后填写

              <ul>
                   <li><a href="#">建材网首页</a></li>
                   <li><a href="#">我的商务室</a><s></s></li>
                   <li><a href="#">我的收藏</a><s></s></li>
                   <li><a href="#">建材服务</a><s></s></li>
                   <li><a href="#">客服中心</a></li>
                   <li><a href="#">网站导航</a><s></s></li>
               </ul>

先写div.top_pages_l在按tab键可直接生成

<div class="top_pages_l"></div>

把行内的元素居中?
答：直接设置行高：line-height: 25px;
精灵图是什么？
答：历史上网速较慢的时候，小图标的每一份传输都需要访问一次服务器，为了减少对服务器的损害，所以想到把很多的小图片整合成为一张大的图，也称作为精灵图。在精灵图中的小图片之间需要存在一些空隙，每次需要使用精灵图时，常用的语法是background：url(图片的地址) 图片需要偏移的像素；每次使用不同位置的小图片时依靠图片的偏移像素来调整精灵图要展示那一部分的小图片。
精灵图的整图如下：