網頁布局和頁面美化
布局的塊級標簽分類
回應式布局和視口
媒體查詢
多列布局
布局的塊級標簽分類
1. 分類導航或選單等場合
div-ul(ol)-li
1.使用margin：0px auto； 設定div水平居中
2.使用text—aligin：center；設定內容水平居中
3.使用height和line-height設定垂直居中
2. 圖文混編場合
div-dl-dt-dd
1.dt標簽是串列標題（圖片）
2.dd標簽是串列內容（文字）
3.dd標簽有默認的左間距，margin可以清除
3.圖文布局或顯示資料場合
div-table-tr-td
1.使用border-collapse: collapse;設定細邊框的效果
4.布局表單場合
div-form-table-tr-td
1.使用<fieldset></fieldset>對表單元素進行分組，默認樣式有外邊框
2.使用<legend></legend>設定每組的內容標題，內容通常顯示在左上角
回應式布局和視口
一、主要變化
- 棄用px，改用em或%作為單位
- 可以使同一網站在不同設備上完美呈現
二、視口
1、視口基本語法
在頁面加載時，使用<meta>標簽設定游覽器視口的寬度
<meta name="viewport"
content="width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1,
user-scalable=no" />
2、視口常用屬性
| 屬性 | 說明 |
|---|---|
| width | 設定layout viewport的寬度為一個正整數或字串“device-width” |
| height | 設定layout viewport的高度為一個正整數或字串“height-width” |
| initial-scale | 設定頁面的初始縮放值，一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，一個數字，可以帶小數 |
| user-scalable | 是否允許用戶縮放，值為no 或 yes |
媒體查詢
一、概念和作用
- 概念：回應式布局的實作方式之一
- 作用：在不同條件下使用不同樣式，使頁面在不同終端下達到不同的效果
二、媒體查詢
1、媒體查詢基本語法
@media 設備名 only （選取條件）not （選取條件） and（選取條件）
{
CSS樣式規則
}
only限定某種設備，可省略，and（邏輯與）和not（排除某種設備）為邏輯關鍵字，多種設備用逗號分隔
2、媒體查詢常用屬性
可用設備名引數
| 屬性 | 說明 |
|---|---|
| all | 所有設備 |
| screen | 彩色電腦螢屏 |
| tv | 電視 |
| projection | 專案演示 比如幻燈片 |
| 檔案列印或列印預覽 |
媒體查詢屬性
| 專案 | Value |
|---|---|
| width | 輸出設備頁面可見區域的寬度 |
| height | 輸出設備頁面可見區域的高度 |
下圖補充
三、媒體查詢的兩種使用方式
1.在樣式表中內嵌@media
@media all and (min-width:1024px ) {
/*適合低解析度桌面瀏覽器和橫屏iPad*/
}
@media all and (min-width:768px ) {
/*適合很低解析度桌面瀏覽器和豎屏iPad*/
}
@media all and (min-width:480px ) {
/*適合橫屏iPhone和Andioid*/
}
@media all and (min-width:320px ) {
/*適合豎屏iPhone和Andioid*/
}
@media all and (min-width:240px ) {
/*適合低解析度移動設備*/
}
1.在link中使用@media
/*適合低解析度桌面瀏覽器和橫屏iPad*/
<link rel="stylesheet" type="text/css"
media="all and (max-width:1024px )"
href="pc.css">
/*適合很低解析度桌面瀏覽器和豎屏iPad*/
<link rel="stylesheet" type="text/css"
media="all and (max-width:780px )"
href="pc.css">
/*適合橫屏iPhone和Andioid*/
<link rel="stylesheet" type="text/css"
media="all and (max-width:480px )"
href="pc.css">
/*適合豎屏iPhone和Andioid*/
<link rel="stylesheet" type="text/css"
media="all and (max-width:380px )"
href="pc.css">
多列布局
作用：能讓網頁文本呈多列顯示，主要控制大片文章
常用屬性
| 屬性 | 說明 |
|---|---|
| column-count | 指定列數，值是數字 |
| column- gap | 指定列之間的距離 |
| column-rule | 在一條宣告中設定column-rule-*的簡寫屬性 |
| column-rule-color | 設定列之間的顏色規則，值為顏色 |
| column-rule-style | 設定列之間的樣式規則，取值和border-style的值相同 |
| column-rule-width | 設定列之間的寬度 |
| columns | 設定column-span和column-width的簡.寫屬性 |
| column-span | 指定元素橫向能跨多少列，取值none和all |
| column-width | 指定列寬 |
| column-fill | 指定內容在列與列之間的分布方式，balance：則指瀏覽器確保不同列之間的長度差異盡可能小，auto：按照順序填充列 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/248618.html
標籤：其他