前端項目微金所2
前端項目筆記2
1.搭建Bootstrap頁面骨架及項目目錄結構
├─ /weijinsuo/ ··················· 項目所在目錄 └─┬─ /css/ ······················· 咱們本身的CSS文件 ├─ /font/ ······················ 使用到的字體文件 ├─ /img/ ······················· 使用到的圖片文件 ├─ /js/ ························ 本身寫的JS腳步 ├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】 ├─ /favicon.ico ················ 站點圖標 └─ /index.html ················· 入口文件
1.1.約定編碼規範
1.1.1.HTML約定
- 在head中引入必要的CSS文件,優先引用第三方的CSS,方便咱們本身的樣式覆蓋
- 在body末尾引入必要的JS文件,優先引用第三方的JS,注意JS文件之間的依賴關係,好比bootstrap.js依賴於jQuery,那就應該先引用jQuery.js 而後引用bootstrap.js
1.1.2.CSS約定
- 除了公共級別樣式,其他樣式所有有 模塊前綴(權重儘可能寫滿)
- 儘可能使用 直接子代選擇器, 少用間接子代 避免錯殺
1.2.HTML5文檔結構
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>頁面標題</title> </head> <body> </body> </html>
1.3.Viewport設置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
html中插入視口設置,能夠經過emmet meta:vp 插入javascript
1.4.瀏覽器兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html中插入兼容模式設置,能夠經過emmet meta:compat 插入css
1.5.favicon(站點圖標)
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
html中插入圖標連接,能夠經過emmet link:favicon 插入html
1.6.引入相應的第三方文件
<link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="my.css"> ... <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="my.js"></script>
1.7.在咱們默認的樣式表中將默認字體設置爲:
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
2.完成頁面空結構
先劃分好頁面中的大容器,而後在具體看每個容器中單獨的狀況,代碼中的註釋的格式也要學習下哦前端
<body> <!-- 頭部區域 --> <header></header> <!-- /頭部區域 --> <!-- 廣告輪播 --> <section></section> <!-- /廣告輪播 --> <!-- 特點介紹 --> <section></section> <!-- /特點介紹 --> <!-- 當即預定 --> <section></section> <!-- /當即預定 --> <!-- 產品推薦 --> <section></section> <!-- /產品推薦 --> <!-- 新聞列表 --> <section></section> <!-- /新聞列表 --> <!-- 合做夥伴 --> <section></section> <!-- /合做夥伴 --> <!-- 腳註區域 --> <footer></footer> <!-- /腳註區域 --> </body>
3.構建頂部通欄
<header> <div class="topbar"></div> </header>
3.1.container類
- 用語定義一個固定寬度且居中的版心
<div class="topbar">
<div class="container">
<!--
此處的代碼會顯示在一個固定寬度且居中的容器中
該容器的寬度會跟隨屏幕的變化而變化
-->
</div>
</div>
3.2.柵格系統
- Bootstrap中定義了一套響應式的網格系統
- 其使用方式就是將一個容器劃分紅12列
- 而後經過col-xx-xx的類名控制每一列的佔比
3.2.1.row類
- 由於每一列默認有一個15px的左右外邊距
- row類的一個做用就是經過左右-15px屏蔽掉這個邊距
<div class="container"> <div class="row"></div> </div>
3.2.2.col-XX-XX類
- col-xs-[列數]: 在超小屏幕下展現幾份
- col-sm-[列數]: 在小屏幕下展現幾份
- col-md-[列數]: 在中等屏幕下展現幾份
- col-lg-[列數]: 在大屏幕下展現幾份
- xs :超小屏幕 手機 (<768px)
- sm :小屏幕 平板 (da768px)
- md :中等屏幕 桌面顯示器 (<768px)
- lg :大屏幕 大桌面顯示器 (<768px)
<div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5 text-center"></div> <div class="col-md-2 text-center"></div> <div class="col-md-3 text-center"></div> </div>
此處頂部通欄已經被劃分爲四列
text-center的做用就是讓內部內容居中顯示html5
3.2.字體圖標
@font-face {
font-family: 'weijinsuo';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('../font/MiFie-Web-Font.svg') format('svg'),
url('../font/MiFie-Web-Font.ttf') format('truetype'),
url('../font/MiFie-Web-Font.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"] {
/*注意上面選擇器中間的空格*/
/*咱們使用的名爲itcast的字體就是上面的@font-face的方式聲明的*/
font-family: weijinsuo;
font-style: normal;
}
.icon-mobilephone::before{
content: '\e908';
}
<div class="col-md-2 text-center">
<a class="mobile-link" href="#">
<i class="icon-mobile"></i>
<span>手機微金所</span>
<!-- 這裏使用的是bootstrap中的字體圖標 -->
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="..." alt="">
</a>
</div>
文字文件格式
- eot : embedded-opentype
- svg : svg
- tff : truetype
- woff : woff
3.4.hover圖片展現
.mobile-link:hover > img {
display: block;
}
3.5.按鈕樣式生成
- http://blog.koalite.com/bbg/
- 能夠經過界面生成一個新的按鈕樣式
.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
background-image: none;
}
.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast .badge {
color: #E92322;
background-color: #ffffff;
}
3.5.小屏幕隱藏
<div class="topbar hidden-xs hidden-sm"></div>
或者java
<div class="topbar visible-md visible-lg"></div>
hidden-xx : 在某種屏幕下隱藏
visible-xx : 在某種屏幕尺寸下顯示jquery
4.導航通欄
- 在使用了Bootstrap事後,大多數界面元素都是經過Bootstrap提供好的界面組件修改得來
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切換菜單</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投資</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平臺介紹</a></li>
<li><a href="#">新手專區</a></li>
<li><a href="#">最新動態</a></li>
<li><a href="#">微論壇</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">我的中心</a></li>
</ul>
</div>
</div>
</nav>
4.1.Bootstrap擴展
- 經過Bootstrap文檔對導航條樣式的設置發現,其自己是有一個相似於主題的概念
- navbar-default: 默認的外觀
- 因此咱們但願能夠經過自定義一套完成的風格
- navbar-weijinsuo
.navbar-weijinsuo{
...
}
...具體代碼參考navbar-default實現便可,根據本身的實際要求修改外觀
4.2.品牌logo
- 仍然使用字體圖標
4.3.菜單行高調整
- 默認樣式中菜單的行高爲20px,咱們能夠調整爲本身想要的高度
- 通常都是經過本身的樣式去覆蓋
5.輪播圖
5.1.Bootstrap JS插件使用
對於Bootstrap的JS插件,咱們只須要將文檔實例中的代碼粘到咱們本身的代碼中
而後作出相應的樣式調整web
5.1.1.Bootstrap中輪播圖插件叫作Carousel
5.1.2.基本的輪播圖實現
<!--
如下容器就是整個輪播圖組件的總體，
注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖
bootstrap.js會自動爲當前元素添加圖片輪播的特效
-->
<div id="輪播圖的ID" class="carousel slide" data-ride="carousel">
<!-- ol標籤是圖片輪播的控制點 -->
<ol class="carousel-indicators">
<!--
每個li就是一個單獨的控制點
data-target屬性就是指定當前控制點控制的是哪個輪播圖，其目的是若是界面上有多個輪播圖，便於區分到底控制哪個
data-slide-to屬性是指當前的li元素綁定的是第幾個輪播項
注意，默認必須給其中某個li加上active，展現的時候就是焦點項目
-->
<li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li>
<li data-target="#輪播圖的ID" data-slide-to="1"></li>
<!-- ...更多的 -->
</ol>
<!--
.carousel-inner是全部輪播項的容器盒子，
注意role="listbox"表明當前div是一個列表盒子，做用就是給當前div添加一個語義
-->
<div class="carousel-inner" role="listbox">
<!-- 每個.item就是單個輪播項目，注意默認要給第一個輪播項目加上active，表示爲焦點 -->
<div class="item active">
<!-- 輪播項目中展現的圖片 -->
<img src="example.jpg" alt="示例圖片">
<div class="carousel-caption">
<!-- 標題或說明性文字，若是不須要，直接刪除當前div.carousel-caption -->
</div>
</div>
<div class="item">
<!-- ... -->
</div>
<!-- ... -->
</div>
<!-- 圖片輪播上左右兩個控制按鈕，分別點擊能夠滾動到上一張和下一張 -->
<!-- 此處須要注意的是 該a連接的href屬性必須指向須要控制的輪播圖ID -->
<!-- 另外a連接中的data-slide="prev"表明點擊該連接會滾到上一張，若是設置爲next的話則相反 -->
<a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一張</span>
</a>
<a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一張</span>
</a>
</div>
5.1.3.因爲輪播圖片超寬形成的影響
- 美工爲了在不一樣屏幕下更好的展現將圖片兩邊作的很是寬,可是咱們大多數狀況的頁面寬度都沒法知足這樣的圖片寬度
- 並且Bootstrap的樣式中默認將圖片的max-width設置爲100%
- 形成界面圖片縮放
- 想在一個較小的屏幕下展現一個超寬的圖片,並讓圖片居中顯示
- 兩種辦法:
- 換用背景圖的方式,background-position : center center;
- 使img元素絕對定位,left:50%,margin-left: -width/2
- 兩種辦法:
5.2.background使用
- 將容器的高度固定(410px)
- 將輪播圖改成北京顯示
- 因爲可能圖片的高度不必定是410px
- 因此設置CSS3中的background-size
5.2.1.background-size 的四個取值
- length
- 如background-size: 100px 100px,將背景圖固定到多大尺寸
- percentage
- 如 background-size: 90% 90%,一百分比的形式設置背景大小
- cover
- 1.背景圖片等比例縮放
- 2.讓背景圖相對較小邊放大到目標容器大小結束
- 如: 一張100*200的背景圖放到一個300*400的盒子中,最終背景圖片的大小是300*600
- 由於背景圖的較小邊爲100,將100放大到目標容器300的寬度,放大了3倍,最終結果300*\600
- contain
- 1.背景圖片等比例縮放
- 2.讓背景圖相對較大邊放大到目標容器大小結束
- 如: 一張100*200的背景圖放到一個300*400的盒子中,最終背景圖片的大小是200*400
- 由於背景圖較大邊爲200,將200放大到目標容器400的高度,放大了2倍,最終結果200*400
圖文說明
cover
contain
5.3.圖片響應式
- 目的
- 各類終端都須要正常顯示圖片
- 移動端應該使用更小(體積)的圖片
- 實現方式
- 將元素中直接設置的圖片背景刪除,換成兩個data-屬性 (如: data-img-sm="小圖路徑",data-img-lg="大圖路徑")
- 經過JS的方式獲取屏幕的寬度;
- 判斷屏幕寬度是否小於必定的值(如: 768)
- 根據從判斷狀況決定使用具體的大圖仍是小圖
$(function() {
$(window).on("resize", resize).triggerHandler("resize");
/**
* 屏幕寬度改變觸發的方法
* @return {[type]} [description]
*/
function resize() {
// 獲取屏幕寬度
var windowW = $(window).width();
var isSmallScreen = windowW < 768;
// 遍歷輪播圖片
$("#weijinsuo_ad > .carousel-inner > .item").each(function(i, ele) {
// ele是DOM對象,因此須要轉換
var $ele = $(ele);
console.log($ele.data("img-sm"));
var imgURL = isSmallScreen ? "url(" + $ele.data("img-sm") + ")" : "url(" + $ele.data("img-lg") + ")";
// 設置背景圖片
$ele.css("backgroundImage", imgURL);
if (isSmallScreen) { // 小屏幕不用背景圖,直接用img
$ele.html('<img src="' + $ele.data("img-sm") + '" alt="">');
} else {
$ele.empty();
}
});
}
/**
* 初始化Bootstrap中的提示框效果
* @type {String}
*/
$('[data-toggle="tooltip"]').tooltip();
});
5.4.window resize事件
- 因爲上一步咱們實現的過程是指在頁面加載完成判斷一次,
- 當用戶手動調整頁面寬度事後沒有及時發生變化,
- 因此咱們能夠經過window的resize事件中從新完成以上操做來解決這個問題
function 窗口變化後執行的函數名(){
// 具體的操做
}
$(window).on('resize', 窗口變化後執行的函數名);
- 這個事件只會在窗口尺寸發生變化後執行,可是咱們須要一開始時執行一次
...
$(window).on('resize', 窗口變化後執行的函數名).triggerHandler('resize');
5.5.小圖片不須要使用背景的方式
- 小圖若是仍是使用背景圖片的方式,當屏幕特別小時,效果不好
- 因此當使用小圖,改用img的方式
// 由於咱們須要小圖時 尺寸等比例變化，因此小圖時咱們使用img方式
if (isSmallScreen) {
$item.html('<img src="' + imgSrc + '" alt="" />');
} else {
$item.empty();
}
- 按照目前的狀況,若是是小圖展現則不須要給容器加上410px的固定高度
- 因此咱們必須經過CSS媒體查詢的方式解決
#weijinsuo_ad > .carousel-inner > .item {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
}
@media screen and (min-width: 768px) {
#weijinsuo_ad > .carousel-inner > .item {
height: 410px;
}
}
#weijinsuo_ad > .carousel-inner > .item > img {
width: 100%;
}
6.網站特性
6.1.網格系統
- 該板塊當屏幕爲中等尺寸時分爲3列,較小屏幕是分爲2列
- 因此使用網絡系統劃分
<div class="col-sm-6 col-md-4"> <!-- ... --> </div> <!-- ... -->
6.2.媒體對象樣式
- 每個小塊的樣式能夠經過Bootstrap中的媒體對象樣式實現
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>銀聯支付全稱保證支付安全</p>
</div>
</div>
</a>
6.3.響應式輔助類型
- 整個板塊在超小屏幕下是隱藏起來的
- 只須要給當前板塊加上hidden-xs的class
7.預定投標
7.1.pull-left
- 左邊文字段落
7.2.pull-right
- 右邊文字段落
8.投資產品
8.1.Tab選項卡
選項卡功能能夠經過Bootstrap中提供的相應組件實現
http://v3.bootcss.com/javascript/#tabsbootstrap
<div class="container">
<!-- 全部的選項卡標籤，每一個標籤點擊分別對應面板展現出來 -->
<ul class="nav nav-tabs" role="tablist">
<!--
下面的li定義了一個選項卡的標籤，其中a標籤的href屬性指向的就是對應要展開的面板ID
aria-controls屬性是說當前a連接控制的是哪一個元素（注意此屬性和功能無關，只是語義）
注意必定要給a標籤加上data-toggle="tab"，若是不加則boostrap沒法知道這是一個選項卡標籤，也就不會有相應的效果
-->
<li role="presentation" class="active"><a href="#第一個標籤的ID" aria-controls="第一個標籤的ID" role="tab" data-toggle="tab">標籤頁1</a></li>
<li role="presentation"><a href="#第二個標籤的ID" aria-controls="第二個標籤的ID" role="tab" data-toggle="tab">標籤頁2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- .tab-pane定義當前是一個tab面板，經過id和選項卡標籤關聯起來 -->
<div role="tabpanel" class="tab-pane active" id="第一個標籤的ID">
<!-- 標籤展開後的內容 -->
</div>
<div role="tabpanel" class="tab-pane" id="第二個標籤的ID">...</div>
</div>
</div>
8.2.網格系統
- 和網站特點板塊的網格系統定義同樣
8.3.::before ::after
.panel-czbk > .panel-heading::before,
.panel-czbk > .panel-heading::after {
content: ' ';
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #f0f0f0;
position: absolute;
}
.panel-czbk > .panel-heading::before {
top: -8px;
left: -8px;
}
.panel-czbk > .panel-heading::after {
bottom: -8px;
left: -8px;
box-shadow: 0 2px 1px #ccc inset;
}
8.5.tooltip插件
- 注意，bootstrap中的tooltip插件必須經過js方式初始化
8.6.選項卡標籤橫向滾動
- 要給ul加一個容器，這個容器有橫向滾動條
- 動態設置ul的寬度，寬度是根據內容大小決定的 width= sum (li.width)
相關文章
- 1. 移動web——微金所實戰項目
- 2. 微前端 —— project2項目（VUE）
- 3. 微前端 —— portal項目
- 4. Github前端所用開源項目
- 5. webpack 構建前端項目（2）
- 6. 前端項目
- 7. 微前端在Vue項目的實踐
- 8. 微前端項目實戰及原理
- 9. cocos2d線上項目落地微前端
- 10. 項目2---十次方項目開發---前端---01
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Maven 項目模板 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 移動web——微金所實戰項目
- 2. 微前端 —— project2項目（VUE）
- 3. 微前端 —— portal項目
- 4. Github前端所用開源項目
- 5. webpack 構建前端項目（2）
- 6. 前端項目
- 7. 微前端在Vue項目的實踐
- 8. 微前端項目實戰及原理
- 9. cocos2d線上項目落地微前端
- 10. 項目2---十次方項目開發---前端---01