整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS的引用

          CSS的引用

          于網站的CSS引用我們可以有以下四種方式:

          • 內聯樣式(行間樣式)

          在標簽的style屬性后添加樣式。

          // 通過html屬性style實現,寫在body標簽中
          <div style="color:green; font-size:18px;">行內式</div>
          • 嵌入式樣式表(內部樣式表)

          在style標簽內添加,加上head標簽內部。

          // 在style標簽中寫入css樣式,在body中引用
          div{ ? color: red; ? font-weight: bold;}
          
          <div>嵌入式</div>
          • 外部樣式表

          將css樣式編寫在擴展名為 .css 的文件中,再導入樣式,導入在head標簽內部。

          // 隨便命名一個style.css 文件,將樣式寫在其中
          div{ ? 
            color: blue;
          }
          // 然后在html文件中引入style.css文件
          <link href="style.css" type="text/css" rel="stylesheet" />
          
          <div>鏈接式</div>
          • @import可以用來導入其他css文件

          相當于原來的css文件中包含了被導入的css文件的樣式,兩者合并在一個文件中(不推薦使用)。

          // 創建一個index.css 文件,在里面編寫我們自身的樣式
          div{ ? 
            color: orange; ? 
            font-size: 20px; ? 
            width: 200px; ? 
            height: 40px;
          }
          // 使用@import方式導入上面的index.css 文件
          <style> 
            @import url(index.css)
          </style>
          
          <div></div>


          前三者樣式的顯示優先級:

          遵循就近原則:行內樣式 > 嵌入式樣式 > 外部樣式。

          前,在學習使用Vue2.0開發新的項目。然而目前用Vue實現的UI框架里面,尚未出現具有像bootstrap一樣統治力的框架。一番糾結后,老夫...

          那么問題來了,在Vue中如何引入jQuery和swiper呢?

          經歷半天搜索、比對、嘗試之后,得出了下面的結論,單用 webpack 時設置同理。

          引入jQuery

          這個問度娘就有很多方案,我這里選取的是將jQuery暴露到全局的方式,這樣就不用每個用到的地方都要import一次

          安裝 jQuerynpm i -S jQuery //等同于 npm install --save jQuery

          設置 webpack.config.jsvar webpack=require('webpack')

          const ProvidePlugin=new webpack.ProvidePlugin({//引入外部類庫

          $: 'jquery',

          jQuery: 'jquery',

          });

          module.exports={

          ...

          plugins: [

          ProvidePlugin,

          ],

          ...

          }

          對于web前端學習不懂的,或者不知道怎么學習的可以來我的前端群477149581,源碼已上傳群文件,不管你是小白還是大牛,小編都歡迎,群不定期分享干貨,歡迎初學和進階中的小伙伴。

          至此,可全局使用熟悉的$符號了。

          更多辦法

          使用 exports-loader

          設置 externals(詳情參考推薦答案)

          普通 import(也就是接下來要說的辦法)

          引入swiper插件

          本來設置externals后再在index.html中引用的辦法也是挺好的,但在我的項目中只有一個頁面用到,而且externals方式不知如何設置css(還望高人指點),故選擇普通import的方式。

          此法無需在index.html引用其JS或CSS,但每個用到的頁面都需要import一次,jQuery也可用此法引入。

          簡單粗暴import

          在 script 中 import 其js文件

          import Swiper from '../assets/lib/swiper-3.4.2.min.js'

          在 style 中 @import 其css文件

          @import '../assets/lib/swiper-3.4.2.min.css';

          至此,可以像往常一樣使用又愛又恨的swiper了。

          最后

          雖以上皆經過實戰檢驗,但若有錯誤歡迎指正。

          更多的炫酷企業級練習特效,學習方法和面試技巧,敬請關注本頭條號!·

          天有人反饋了一個在iframe內無法調用網站同一個站點的頁面問題并報錯,就在網站查了一些相關的資料,整理一下關于禁止網站所有頁面或某一個頁面被iframe內框架調用的方法。

          網站iframe內框架調用頁面報錯如下

          Refused to display http://xxxxxx.com in a frame because it set 'X-Frame-Options' to 'deny'.
          

          通過查到的資料可得知,此錯誤與iframe框架被調用頁面的 HTTP 標頭中 X-Frame-Options 設置有關,所以整理了如下資料

          X-Frame-Options 介紹

          X-Frame-Options是一個HTTP響應頭,用來告訴瀏覽器此頁面是否可以在其它網頁中的frame或iframe標簽中被渲染,網站可以利用此響應頭來避免被其它網站所劫持。

          X-Frame-Options有三個參數值,分別如下

          DENY:表示不能被嵌入到任何iframe或frame中。

          SAMEORIGIN:表示頁面只能被本站頁面嵌入到iframe或者frame中。

          url,指定是一個域名,表示此網頁只能被指定域名下的頁面中的框架所調用

          X-Frame-Options 使用如下

          html代碼

          以下代碼,添加到HTML頁面中的head標簽內即可

          代碼1:html頁面禁止被框架調用

          <meta http-equiv="X-Frame-Options" content="deny">
          

          代碼2:只允許頁面被本站調用

          <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
          

          代碼3:只允許頁面被指定URL嵌套調用

          <meta http-equiv="X-Frame-Options" content="http://www.feiniaomy.com">
          

          PHP代碼

          <?php
          //示例1
          header('X-Frame-Options: deny');
          //示例2
          header('X-Frame-Options: SAMEORIGIN');
          //示例3
          header('X-Frame-Options: http://www.feiniaomy.com');
          ?>
          

          PS:網站被iframe內框架調用的危害性

          攻擊者可以使用一個透明的、不可見的iframe標簽,加載目標頁面,然后通過調整iframe頁面的位置,誘導用戶進行點擊操作頁面的功能區,并劫持用戶的數據,達到劫持頁面的目的。


          主站蜘蛛池模板: 国产手机精品一区二区| 亚洲日韩国产精品第一页一区| 免费无码AV一区二区| 久久se精品一区二区国产| 一区二区三区美女视频| 日本一区二区三区在线看| 亚洲熟妇av一区| 久久亚洲综合色一区二区三区| 国产福利一区二区在线视频 | 久久精品国产一区二区三区 | 无码人妻精品一区二区三区久久 | 免费无码一区二区| 日本无码一区二区三区白峰美| 3d动漫精品啪啪一区二区中 | 精品免费久久久久国产一区 | 亚洲熟妇无码一区二区三区导航| 久久久精品人妻一区二区三区| 精品一区二区三区在线视频| 日韩精品无码一区二区三区四区| 精品国产免费一区二区三区| 爆乳熟妇一区二区三区| 中文字幕精品无码一区二区| 中文字幕人妻无码一区二区三区| 三上悠亚亚洲一区高清| 制服中文字幕一区二区| 亚洲AV综合色一区二区三区| 亚洲国产美国国产综合一区二区| 亚洲日本一区二区| 亚洲爆乳精品无码一区二区| 国产乱码精品一区二区三区香蕉| 怡红院一区二区三区| 国产成人av一区二区三区在线观看| 日韩视频一区二区在线观看| 无码人妻精品一区二区三区99不卡| 日韩一区二区精品观看| 国产精品无圣光一区二区 | 国产精品久久无码一区二区三区网| 亚洲欧美日韩一区二区三区 | 国产在线一区观看| 中文日韩字幕一区在线观看| 亚洲综合一区二区精品导航|