css超链接样式+雪碧图实现导航

最新推荐文章于 2023-05-29 14:30:14 发布

Naraseny

最新推荐文章于 2023-05-29 14:30:14 发布

阅读量5.8k

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/qq_62881798/article/details/123283686

版权

本文介绍了如何使用CSS设置超链接的四种状态样式，并展示了如何通过雪碧图实现导航条效果。内容包括CSS选择器、颜色、背景图片定位等知识点，以及如何利用浮动和内联块元素创建布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.回顾上一节内容：

2.本节笔记

3.例子试题

3.1 中间链接的样式使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       /*css设置超链接的样式（选择器）*/
       #aa{
           color: yellow;
       }
       /*未被访问的样式*/
       #aa:link{
           color: pink;
       }

       /*鼠标触碰*/
       #aa:hover{
           color: orange;
       }
       /*超链接被点击不放时所设置的样式*/
       #aa:active{
           color: green;
           background-color: red;
       }

       #aa:visited{
           background-color: black;
       }

   </style>
</head>
<body>
   <a href="http://www.4399.com">百度一下</a>

   <hr>
   <a id="aa" href="http://www.4399.com">百度一下</a>

</body>
</html>

3.2css雪碧图的使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   *{
       margin: 0px;
       padding: 0px;
   }
       #container{
           width: 960px;
           height: 800px;
       /* 显示边框*/
           border: 1px solid red;
            居中
           margin: 0 auto;
       }
       #container>.top{
           width: 960px;
           height: 180px;
           /*background-color: pink;*/
       }
       #container>.top>.nav{
           width: 960px;
           height: 30px;
           /*border: 1px solid black;*/
           /*text-align: right;*/
       }
       #container>.top>.search{
           width: 960px;
           height: 140px;
           /*border: 1px solid orange;*/

           line-height: 140px;
           居中
           text-align: center;
       }
       input{
           width: 300px;
           height: 35px;
       }
       button{
           width: 80px;
           height: 38px;
    设置字体大小
           font-size: 20px;
       }
       #container>.main{
           width: 960px;
           height: 550px;
           background-color: #666;
       }
       #container>.foot{
           width: 960px;
           height: 70px;
           /*background-color: pink;*/
       }
       #container>.top>.nav ul{
           list-style: none;
       }


       .logo{
           width: 40%;
           height: 30px;
           /*background-color: red;*/
         浮左浮动
           float: left;
       }
       .mynav{
           width: 60%;
           height: 30px;
           /*background-color: orange;*/
           float: left;
           text-align: right;
       }

       ul li{
           float: left;
       }
       ul li a{
           /*border: 1px solid red;*/
           display: inline-block;
           width: 70px;
           height: 30px;
           line-height: 30px;
           text-align: center;
           color: black;
           text-decoration: none;
       }
       .zking{
           width: 30px;
           height: 30px;
           /*border: 1px solid red;*/
           background-image: url("icon.gif");
           background-repeat: no-repeat;
       }
       .zking2{
           background-position: -26px 1px;
       }
       .zking3{
           background-position: -54px 3px;
       }
       .zking4{
           background-position: -81px 3px;
       }

       .btn{
           width: 45px;
           height: 20px;
           font-size: 12px;
          设置按钮圆角
           border-radius: 10px;
       }
   </style>
</head>
<body>
   
   <div id="container">
       <div class="top">
           
           <div class="nav">
               <div class="logo"></div>
               <div class="mynav">
                   <ul>
                       <li class="zking"></li>
                       <li><a href="">购物车</a></li>
                       <li class=" zking zking2"></li>
                       <li><a href="">帮助中心</a></li>
                       <li class="zking zking3"></li>
                       <li><a href="">加入收藏</a></li>
                       <li class="zking zking4"></li>
                       <li><a href="">设为首页</a></li>
                       <li><button class="btn">登录</button></li>
                       <li><button class="btn">注册</button></li>
                   </ul>
               </div>
           </div>
           
           <div class="search">
               <form action="">
                   <input type="text">
                   <button>搜索</button>
               </form>
           </div>
       </div>
       <div class="main"></div>
       <div class="foot"></div>

   </div>

</body>
</html>

效果图