CSS——background综合运用

最新推荐文章于 2022-01-14 00:32:40 发布

weixin_30750335

最新推荐文章于 2022-01-14 00:32:40 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/wuqiuxue/p/7773144.html

版权

搜索栏图标：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        input {
            width:270px;
            height:28px;           
            background: url('serch.jpg') no-repeat right center;
        }
    </style>
</head>
<body>
    <input type="text" name="name" value="" placeholder="请输入..." />
</body>
</html>

效果：

视频列表图标：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        li{
            list-style:none;
            text-indent:2em;
            background:url('li.gif') no-repeat left center;
        }
    </style>
</head>
<body>
    <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></li>
    </ul>
</body>
</html>

效果：

购物车图标：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a{
            display:inline-block;
            width:67px;
            height:32px;
            background:url('110.png');
        }
            a:hover {
                background: url('110.png') bottom;
            }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

素材：

效果：

在点击购物车图标后背景图片会立马切换到登陆：

转载于:https://www.cnblogs.com/wuqiuxue/p/7773144.html

weixin_30750335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——background综合运用

搜索栏图标：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> input { width:270px; ...
复制链接

扫一扫