CSS spirit /css精灵

最新推荐文章于 2022-03-17 10:19:55 发布

莫里薇

最新推荐文章于 2022-03-17 10:19:55 发布

阅读量3.8k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ljxqsqmoliwei/article/details/8444666

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

利用css中的三个样式：图片、位置和重复，即background-image、background-position和background-repeat；也可以直接用background来写。

例如：background:url(nav_bg.gif) 0 0 no-repeat;　　　　background:url(nav_bg.gif) 0 －28 no-repeat; background:url(nav_bg.gif) 0 -26 no-repeat;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="sample_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #nav ul
        {
            list-style: none;
            margin: 0px auto;
            padding: 0px;
            border-bottom: 3px solid #E10001;
            height: 28px;
            width: 360px;
        }
        #nav li
        {
            float: left;
            margin-left: 2px;
        }
        #nav a
        {
            display: block;
            width: 87px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color: #000000;
            background: url(nav_bg.gif) 0 -28px no-repeat;
            text-decoration: none;
        }
        #nav a:hover
        {
            color: #f00;
            background: url(nav_bg.gif) 0 -56px no-repeat;
        }
        #nav a#current
        {
            background: url(nav_bg.gif) 0 0 no-repeat;
            font-weight: bold;
            color: #fff;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="nav">
        <ul>
            <li><a id="current" href="#">首页</a></li>
            <li><a href="#">入门教程</a></li>
            <li><a href="#">视频教程</a></li>
            <li><a href="#">常见问题</a></li>
        </ul>
    </div>
    </form>
</body>
</html>

莫里薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS spirit /css精灵

利用css中的三个样式：图片、位置和重复，即background-image、background-position和background-repeat；也可以直接用background来写。例如：background:url(nav_bg.gif) 0 0 no-repeat;　　　　background:url(nav_bg.gif) 0 －28 no-repeat;
复制链接

扫一扫