前端总结之html:窗口大小改变页面

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/SchopenhauerZhang/article/details/53228949

学前端有一段时间了,想总结的一致没时间,今天开始写吧!
万事开头难,今天开始写希望能坚持!

当写页面时,我们都会遇到用户会拉伸窗口,改变窗口的大小。比如我们先写一个div,在页面代码中有注释帮助阅读。新手入门,我尽量每行都有注释,方便以后回顾。

这是第二天写的了,一天没写完。尴尬,看见还有20多人看了,哎对不起了。

1 需求;
页面或者窗口大小改变时,页面自动刷新。

2 准备工作

建项目文件(推荐开发工具webstorm我这里都有安装包)
项目文件夹包含:
css文件夹
js文件夹(包含JQ包)
img文件夹

创建html文件.<!-- 职业病,看见代码就动手敲,下面纯手敲的,可能有错,欢迎指正! -->
<!DOVTYPE html><!--告诉解析器,解析HTML文件(这是一个HTML5文件,版本也会在这里,html默认是H5) -->
<html><!-- html标签是最外围的标签,除了上面的解析的标签其他的都在它的内部 -->
<head><!-- 页面的“头”,不可或缺,页面的名称,属性,等等都在他这里。 -->
    <meta lang="en"><!-- 语言en是英语,网上有可以查到 -->
    <meta charset="UTF-8"><!-- 解析编码推荐utf-8 -->
    <title>页面自动刷新</title><!-- 页面的名称 -->
    <link rel="icon" href="页面的头像,图片"/><!-- 粘贴试一试就知道了 -->
    <link rel="stylesheet" type="text/css" href="引用的css,样式就写在这个文件里"/>
    <style>
    <!-- css样式也可以写在这里 -->
    body{
    margin:0;/* 外边距0 */
    padding:0;/* 内边距0 */
    font:12px/1.8 '微软雅黑';/*  设置页面的字体大小,行高(没记错的话),字体*/
    }
    .div{
    border:1px solid #000;/* 黑色边框 */
    min-width:1200px;//这是为适应窗口
    background-color:#fff;/* 白色背景 */
    }
    .firstDiv{
    margin:0 auto;/*  使其居中 */
    width:200px;
    max-width:1200px;
    height:200px;
    overflow:hidden;/* 溢出隐藏 */
    background-color:#000;/* 黑色背景 */
    }
    </style>
</head>
<body><!-- 页面上看到的所有东西都在这里了 -->
<div class="div">
<div class="firstDiv">
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
    $(window).resize(function(){
        location.reload();/*  页面自动刷新 */
        /* 也可以这么写  */
        // history.go(0);
        /* 自动刷新可以这么写 (以跳转的方式进行)
            <meta http-equiv="Refresh" content="5; url=http://www.baidu.com" />
            这是跳转到百度,放在<link/>标签的前面,<head>标签里面,跳转到自己也是可以的,改了url的地址就行了,5是时间。
        */
    });
    });
</script>
</body>
</html>

padding,是内边距,margin是外边距,margin有负值和auto,padding没有,然后就是外边距合并了,以后再写。

可以看到,有些网页的页面元素是居中的,比如淘宝等。就是说他的页面时有最小宽度的,当页面最小不能小于它的最小,并且页面body始终居中,并且现在基本都是1200px为最小。
在父元素中添加:
min-width:1200px;
子元素:
max-width:1200px;
margin:0 auto;//上下外边距为0,左右外边距为自动,实现居中

页面的自动刷新:
location.reload();
history.go(0);
两者有区别。网上有许多解释,没接触不乱说。一般使用reload,我感觉history.go(0) 会清除缓存,比如用户登陆了一刷新是不是又要重新登陆呢,history有风险吧!
如果有大牛知道,请留言解释一下!
谢谢!

展开阅读全文

没有更多推荐了,返回首页