zoukankan      html  css  js  c++  java
  • 滑动门的制作

    1.先获取到一张图片

    2.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            a{
                margin: 100px;
                height: 33px;
                display: inline-block;
                color: pink;
                background: url(to.png) no-repeat;  /*利用背景图片来制作*/
                /*导入图片,并且不做铺垫,且默认左开始*/
                text-decoration: none; /*去掉链接下面的下滑线*/
                line-height: 33px;  /*行高,一般与高度相同*/
                padding-left: 15px; /*这里就相当于最少要有15px的长度*/
            }
    
            span{
                display: inline-block;
                height:33px;
                background: url(to.png) no-repeat right;  
                /*导入图片,并且不做铺垫,且右开始*/
                padding-right: 15px;
            }
        </style>
    </head>
    <body>
        <a href="#">
            <span>zengsf</span>
        </a>
    </body>
    </html>

    3.最后结果

  • 相关阅读:
    JS知识点简单总结
    Js答辩总结
    JS答辩习题
    轮播
    jQuery选择器总结
    JS的魅力
    JS与JAVA数据类型的区别
    单表查询、多表查询、虚拟表连接查询
    Mysql基本语句
    Mysql数据库
  • 原文地址:https://www.cnblogs.com/zengsf/p/10259661.html
Copyright © 2011-2022 走看看