work5

最新推荐文章于 2022-06-20 17:46:55 发布

chuncuoji8215

最新推荐文章于 2022-06-20 17:46:55 发布

阅读量105

点赞数

原文链接：https://my.oschina.net/1824375992/blog/2244785

版权

1 实现“回到顶部”功能
参考思路：设置元素高度使得界面出现滚动条

使用固定定位在界面右下角显示回到顶部div

div里面可以使用a标签实现超链接锚点（参考锚点代码）

2. 实现带图标的输入框效果：如下图：

图标：推荐到阿里的图标库 http://www.iconfont.cn/去下载

可以将图标设置为 input框的背景图片

background：url(图标的文件名) no repeat;

然后根据图标的大小可以调整input的高度

最后设置input的 padding-left 让输入的字，向右偏移

最后 good luck！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>作业</title>
</head>
<body>
    <style type="text/css">
        .c2{
            width: 35px;
            height: 40px;
            background: #000000;
            position: fixed; 
            right : 50px; 
            bottom: 50px; 
            text-decoration: none;
            color: #ffffff;
        }
        .b1{
            background-image: url( 'user.jpg ') ;
            background-repeat: no-repeat;
            height: 48px;
            font-size: 44px;
            color: #0000ff;
            position: absolute;
            padding-left: 70px;
        }
    </style>

    <p id="p1"></p>
   
    <form align="center" style="position: absolute;">
        <input class="b1" type="text"/>
    </form>


    <table>
        <tr>
            <td height="5000px"></td>
        </tr>
    </table>

    <a href="#p1" class="c2">回到顶部</a>
</body>
</html>

转载于:https://my.oschina.net/1824375992/blog/2244785