html5，css3實戰

時間 2019-12-04 標籤 html5 html css3 css 實戰

預覽地址：預覽javascript

github源碼：源碼css

1. 網頁開發html

HTML5：BEM開發模式，BEM表明塊（Block），元素（Element），修飾符（Modifier）。java

CSS3：過渡動畫、幀動畫node

JS：元素獲取，事件響應處理git

2. 準備github

標註工具：像素大廚web

雪碧圖拼接：gopng數組

3. 開發函數

項目骨架：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>手機</title>
  <link rel="stylesheet" type="text/css" href="./css/base.css">
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
  <div class="box">
    <header class="header">
    <a href="#" class="header__logo">H5頁面</a>
    <nav class="header__nav">
      <a href="#" class="header__nav-item header__nav_item_status_active">外觀</a>
      <a href="#" class="header__nav-item">配置</a>
      <a href="#" class="header__nav-item">型號</a>
      <a href="#" class="header__nav-item">說明</a>
      <a href="#" class="header__nav-item">其餘產品</a>
      <a href="#" class="header__nav-item">當即購買</a>
      <div class="header__nav-item-tip"></div>
    </nav>
  </header>
  <section class="screen-1"></section>
  <section class="screen-2"></section>
  <section class="screen-3"></section>
  <section class="screen-4"></section>
  <footer class="footer">
    &copy; index.html 京ICP備13046642號
  </footer>
  </div>
</body>
</html>

底部邊框2px：（利用僞元素和絕對定位）

.header__nav_item_status_active::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: ' ';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #f01400;
}

第一屏：

1. 滾動事件

頁面指定了DTD，即指定了DOCTYPE時，使用document.documentElement。

頁面沒有DTD，即沒指定DOCTYPE時，使用document.body。

兼容性寫法：

var scroll = document.body.scrollTop || document.documentElement.scrollTop

並且對於a連接若是不進行跳轉：

<a href="javascript:;"></a>

Javascript：僞協議，能夠經過連接來調用js函數。

或者：阻止默認事件不跳轉

e.preventDefault();

2. JavaScript自定義添加類的函數

對象：可以作到不會重複添加

// 添加類名
function addClass(element, newClass) {
  var className = element.className.split(' '); //字符串轉換成數組，便於遍歷轉換成對象 
  var classNameMap = {}

  for(var i=0;i<className.length;i++){
    classNameMap[className[i]] = 1;
  }
  classNameMap[newClass] = 1;    //新類名賦值

  var className = [];
  for(i in classNameMap){
    className.push(i);
  }
  element.className = className.join(' '); //數組轉換成字符串
}