web前端知识点小结 （三）

添加返回顶部的功能

1、添加可点击图片，点击即可返回到顶部

<div>
    <a href="#">
        <img src="../static/img/gotop.png" alt="返回顶部" id="gotop" title="返回顶部" style="z-index:25; position: fixed;
         right: 10px; bottom: 10px;display: none;">
    </a>
</div>

2.设置监听脚本

<script>
    $(function () {
        $(function(){
            $(window).scroll(function(){
                if($(window).scrollTop() > 100){
                    $("#gotop").fadeIn(1000);//一秒渐入动画
                }else{
                    $("#gotop").fadeOut(1000);//一秒渐隐动画
                }
            });

            $("#gotop").click(function(){
                $('body,html').animate({scrollTop:0},400);
            });
        });
    });
</script>

查看其他网页设计原理

直接网页另存为.html文件，其资源文件如.css.js.jpg等会自动保存到磁盘中，可以直接引用

常用协议和端口：

ftp（File Transfer Protocol） 协议默认端口：21 tcp
ssh（Secure Shell） 协议默认端口：22 tcp
http 协议默认端口：80 tcp
https 协议默认端口：443 tcp/udp ##

多重样式优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

元素的宽度和高度

当指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.
下面的例子中的元素的总宽度为300px：
实例

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

尝试一下 »
让我们自己算算最后元素占据总宽度：
300px (宽)

• 50px (左 + 右填充)
• 50px (左 + 右边框)
• 50px (左 + 右边距)
  = 450px