網(wǎng)站營銷單頁怎么做/百度seo優(yōu)化收費標準
目錄
- 一、遇到的不懂的標簽屬性詳解
- 1、meta 標簽的 http-equiv 屬性(元標簽)
- 二、遇到的 CSS 不懂的屬性詳解
- vertical-align
- 三、如何規(guī)避 HTML 自動換行 - 脫離文檔流
- 配置屬性 display: inline-block
- 理解 inline、inline-block、block
- inline
- 總結：
- 四、導航欄自動彈出子菜單 - 需點擊主菜單后才彈出子菜單
- 導航欄自動彈出子菜單 代碼演示：
- 導航需要點擊才能顯示隱藏的子菜單
- 解析 js 代碼 和 CSS 代碼
- let 關鍵字的作用 - var 定義變量的缺點
- 關于鼠標彈出菜單的方法解析
一、遇到的不懂的標簽屬性詳解
1、meta 標簽的 http-equiv 屬性(元標簽)
下面是 http-equiv 屬性的三個參數(shù)
content-type
規(guī)定文檔的字符編碼。
實例：
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style
規(guī)定要使用的預定義的樣式表。
實例：
<meta http-equiv="default-style" content="the document's preferred stylesheet">
注釋：上面
content屬性的值必須匹配同一文檔中的一個link元素上的title屬性的值，或者必須匹配同一文檔中的一個style元素上的title屬性的值。
refresh
定義文檔自動刷新的時間間隔。
實例：
<meta http-equiv="refresh" content="300">
注釋：值 “refresh” 應該慎重使用，因為它會使得頁面不受用戶控制。在 W3C’s Web 內(nèi)容可訪問性指南 中使用 “refresh” 會到導致失敗。
二、遇到的 CSS 不懂的屬性詳解
vertical-align
基線屬性
分三種參數(shù)
- top
- middle
- bottom
middle 可以將 圖片和文字居中對齊
用法：
可以在 HTML 文件內(nèi)的標簽內(nèi)定義 style="vertical-align:middle" 或者在 CSS 文件內(nèi)的類內(nèi)定義vertical-align:middle;
三、如何規(guī)避 HTML 自動換行 - 脫離文檔流
配置屬性 display: inline-block
理解 inline、inline-block、block
inline
inline
不會保存之前在 CSS 文件內(nèi)配置的 width、height ，即不會保留上下外邊距/內(nèi)邊距。
inline-block
如果設置了 display: inline-block，將保留上下外邊距/內(nèi)邊距。允許在元素上設置寬度和高度。
display: block
自動添加換行符 <br>
總結：
關鍵在于 display: inline-block 屬性
四、導航欄自動彈出子菜單 - 需點擊主菜單后才彈出子菜單
導航欄自動彈出子菜單 代碼演示：
<!DOCTYPE>
<html>
<head>
<title>菜單欄</title>
<style type="text/css">
.sub_menue{display:none; /*先將子菜單設置為隱藏*/
}
li:hover .sub_menue{display:block; /*設置鼠標滑過動作，以塊級元素的形式顯示出子菜單*/
}
</style>
</head><body>
<ul class="menue">
<li>菜單1<ul class="sub_menue"><li>子菜單1</li><li>子菜單2</li></ul>
</li><li>菜單2<ul class="sub_menue"><li>子菜單3</li><li>子菜單4</li></ul></li>
</ul>
</body>
</html>
效果圖
先說明，并沒有用鼠標點擊菜單，而是鼠標劃過去了，就會自動彈出子菜單欄。
導航需要點擊才能顯示隱藏的子菜單
index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>商品信息</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>后臺界面</header>
<main><aside id="menu"><li><strong>主菜單</strong><ul class="display"><li>子菜單</li><li>子菜單</li></ul></li><li><strong>產(chǎn)品管理</strong></li><li><strong>庫存管理</strong></li><li><strong>權限設置</strong></li><li><strong>系統(tǒng)設置</strong></li></aside>
</main><script>// 控制導航折疊let menus = document.querySelectorAll("#menu > li");let sub = document.querySelector("#menu > li > ul");menus.forEach(function (menu) {menu.firstElementChild.addEventListener('click', function (evt) {// 獲取子菜單元素ulevt.target.nextElementSibling.classList.toggle('display');})}, false);
</script>
</body>
</html>style.css
* {margin: 0;padding: 0;
}
li{list-style: none;
}
a{text-decoration: none;
}body{height: 100vh;display: flex;flex-flow: column nowrap;/*控制鼠標雙擊復制文本*/-ms-user-select: none;-moz-user-select: none;user-select: none;
}
header{display: flex;height: 70px;background-color: #464d5f;align-items: center;font-size: 1.8rem;padding-left: 24px;color: white;
}
main{flex: 1;background-color: #ccddcc;overflow: hidden;
}
main > aside {display: flex;flex-flow: column nowrap;width: 300px;height: 100%;padding-top: 10px;background-color: #4d5669;}
main > aside > li{cursor: pointer;
}main > aside > li strong{display: block;padding-left: 24px;height: 60px;line-height: 60px;color: #f2f2f2;
}
main > aside > li > ul {background-color: #464d5f;
}
/*控制子菜單隱藏*/
.display{display: none;
}main > aside > li > ul > li{padding: 5px 48px ;color: #f2f2f2;
}目錄結構：
效果圖：
解析 js 代碼 和 CSS 代碼
let 關鍵字的作用 - var 定義變量的缺點
let聲明的變量只在 let 命令所在的代碼塊內(nèi)有效。const聲明一個只讀的常量，一旦聲明，常量的值就不能改變。
其實就是定義一個局部變量，如下所示：
使用 var 定義變量
{ var x = 2;
}
// 這里可以使用 x 變量
在 ES6 之前，是沒有塊級作用域的概念的。
ES6 可以使用 let 關鍵字來實現(xiàn)塊級作用域。
let 聲明的變量只在 let 命令所在的代碼塊 {} 內(nèi)有效，在 {} 之外不能訪問。
{ let x = 2;
}
// 這里不能使用 x 變量
使用 var 關鍵字重新聲明變量可能會帶來問題。
在塊中重新聲明變量也會重新聲明塊外的變量：
var x = 10;
// 這里輸出 x 為 10
{ var x = 2;// 這里輸出 x 為 2
}
// 這里輸出 x 為 2
let 關鍵字就可以解決這個問題，因為它只在 let 命令所在的代碼塊 {} 內(nèi)有效。
var x = 10;
// 這里輸出 x 為 10
{ let x = 2;// 這里輸出 x 為 2
}
// 這里輸出 x 為 10
關于鼠標彈出菜單的方法解析
這是 html 文件內(nèi)的內(nèi)容
<ul id="menu"><li><a href="#home"><b>主頁</b></a><ul class="display"><li><a href="../test.html" title="子菜單1"><b>子菜單1</b></a></li></ul>
<script>// 控制導航折疊let menus = document.querySelectorAll("#menu");menus.forEach(function (menu) {menu.firstElementChild.addEventListener('click', function (evt) {// 獲取子菜單元素ulevt.target.nextElementSibling.classList.toggle("display");})}, false);</script>
classList.toggle
會自動對id為menu的全部元素進行查找，獲得了類似字典的類型的對象，然后添加按鈕"click"的事件，該按鈕事件被之前的 menu對象綁定了，當觸發(fā)了按鈕事件，也就是id 為menu里面的其他元素，ul標簽，在這里是 evt 變量，自動執(zhí)行了類似這種語句 let ul= document.querySelectorAll("#menu li ul"); 的操作，然后獲取了id為 menu下的 li > ul 標簽對象，然后對這個對象進行判斷，如果存在 display 類，則刪除該類，又或者沒有 display類，就會自動加上 display類