html5,css3實戰
預覽地址:預覽
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">
© 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(' '); //陣列轉換成字串
}
相關文章
- HTML5和CSS3提高HTMLCSSS3
- html5錄音功能實戰HTML
- html5/css3新增屬性HTMLCSSS3
- HTML5,CSS3,學習筆記HTMLCSSS3筆記
- 2018最新HTML5實戰 共33節HTML
- CSS3 和 HTML5 新特性一覽CSSS3HTML
- HTML5視訊教程,HTML5專案實戰,HTML5中文指南,HTML5使用手冊HTML
- HTML5與CSS3知識點總結HTMLCSSS3
- HTML5拍照、攝像機功能實戰HTML
- HTML5 Canvas(實戰:繪製餅圖2 Tooltip)HTMLCanvas
- web前端入門到實戰:css3 實現大轉盤Web前端CSSS3
- HTML5與CSS3權威指南筆記案例1HTMLCSSS3筆記
- 【HTML5】Web前端——第四課:CSS3新增選擇器HTMLWeb前端CSSS3
- 《HTML5移動網站與App開發實戰》簡介HTML網站APP
- HTML5與CSS3中滑鼠懸停會有下拉選單HTMLCSSS3
- HTML5和CSS3開發第七章知識點HTMLCSSS3
- 前端開發入門到實戰:HTML5進階FileReader的使用前端HTML
- 前端開發入門到實戰:html5語義化標籤前端HTML
- 阿里開源HTML5小遊戲開發框架Hilo實戰教程阿里HTML遊戲開發框架
- 尚矽谷前端HTML5視訊_微信小程式專案實戰前端HTML微信小程式
- HTML5和CSS3開發第九章知識點HTMLCSSS3
- HTML5和CSS3開發第七章課後作業HTMLCSSS3
- HTML5和CSS3開發第八章知識點HTMLCSSS3
- HTML5和CSS3開發第六章知識點HTMLCSSS3
- HTML5和CSS3開發第五章課後作業HTMLCSSS3
- 趣味CSS3效果挑戰小彙總CSSS3
- css3實現文字線性漸變,css3實現背景漸變CSSS3
- HTML5和CSS3開發第九章課後作業HTMLCSSS3
- HTML5和CSS3開發第八章課後作業HTMLCSSS3
- HTML5和CSS3開發第六章課後作業HTMLCSSS3
- 前端開發入門到實戰:HTML5新增和廢棄的標籤前端HTML
- web前端入門到實戰:css3迴圈,模擬拼多多動畫效果Web前端CSSS3動畫
- CSS3實現文字垂直排列CSSS3
- CSS3實現流星動畫CSSS3動畫
- CSS3熱身實戰–過渡與動畫(實現炫酷下拉,手風琴,無縫滾動)CSSS3動畫
- CSS3動畫實戰之多關鍵幀實現無限迴圈動效的時間間隔CSSS3動畫
- 好程式設計師HTML5培訓教程-總結30個CSS3選擇器程式設計師HTMLCSSS3
- CSS3實現多種背景效果CSSS3