html5，css3實戰

七塊oooo發表於2018-08-19
HTMLCSSS3

預覽地址：預覽

github原始碼：原始碼

1. 網頁開發

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

CSS3：過渡動畫、幀動畫

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

2. 準備

標註工具：畫素大廚

雪碧圖拼接：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(' '); //陣列轉換成字串
}

 

 

 

 

 

 

 

 

 

 

 

相關文章