前端總結之html：視窗大小改變頁面

阿新 • • 發佈：2018-12-23

學前端有一段時間了，想總結的一致沒時間，今天開始寫吧！
萬事開頭難，今天開始寫希望能堅持！

當寫頁面時，我們都會遇到使用者會拉伸視窗，改變視窗的大小。比如我們先寫一個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有風險吧！
如果有大牛知道，請留言解釋一下！
謝謝！

前端總結之html：視窗大小改變頁面

前端總結之html：視窗大小改變頁面

前端基礎之html：day01

前端基礎之html：day02

前端基礎總結之html系列

Web前端H5之HTML標籤總結（一）

拖拽改變層大小例如：瀏覽器的視窗大小改變

前端開發面試題總結之——HTML

前端基礎之html

我的IT夢——web前端開發之HTML,CSS（一）

Lucene學習總結之二：Lucene的總體架構

前端基礎之 html

重修課程day47（前端二之html二和css一）

前端技術之--HTML

前端基礎之html-Day12

前端系列之HTML基礎知識概述

前端知識之HTML內容

前端知識之HTML部分

高效Web前端開發之路：YUI 3.15 PDF掃描版

Web前端開發之HTML+CSS基礎入門(框架)

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

前端總結之html：視窗大小改變頁面

相關推薦