導航:首頁 > 萬維百科 > html5網頁設計代碼

html5網頁設計代碼

 發布時間：2020-08-13 22:03:22

1、html5網頁設計期末作業，要求是一個網站（至少4個網頁）

按F12或者右鍵→檢查 可查看網頁源代碼，左上角元素下面的圖標，可讓你看具體區域的代碼，右面那一列是CSS樣式，你找幾個簡單的網頁把代碼復制過來慢慢改唄

2、html5怎麼製作一個響應式網頁？

HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。

1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。

2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。

3、HTML5怎麼製作響應式網頁

1.調整視口

代碼實例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>布局之路-移動端開發實例</title>
    <meta name="viewport" content="width=device-width,user-scalable = no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

    <style type="text/css">
        html {
            font-size: 42px;
        }
    </style>

3.浮動布局

各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。

代碼實例：

.main {
  float: left;
  width: 70%;
}
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設備載入相應樣式

有條件應用樣式：

 <style>
    @media all and(min-width:500px){ ... }
    @media (orientation){ ... }
</style>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。

有條件的載入樣式表：

<head>
    <link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" />
    <link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" />
</head>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。

第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/
.box {
    float: left;
    width: 658px;
    font-size: 72px;
    text-align: center;
    line-height: 195px;
}
/*使用百分比和rem*/
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

代碼解析：

水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。

垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

4、急求大學HTML5與CSS網頁製作作業

推薦回答網頁模板素材下載： http://sc.chinaz.com/moban/cssmoban.html www.dedecms.com/template/ 找個合適的隨便修改下就可以了。都是免費的~親

與html5網頁設計代碼相關的知識