您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue-cli怎么為單獨頁面設置背景色的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇Vue-cli怎么為單獨頁面設置背景色文章都會有所收獲,下面我們一起來看看吧。
<template> <div class="finish-wrap"> <div class="finish-header"> <div class="finish-img"> </div> </div> <div class="finish-tip"> 支付成功 </div> <div class="finish-footer"> <router-link to="/">學車所需資料</router-link> <span> <router-link to="/">學車考照流程</router-link> </span> </div> </div> </template>
1.如果直接在css中設置body的background-color,會導致其他頁面的背景色響應改變,所以不可取;
2.如上面例子如果設置.finish-wrap的背景色以及高度為100%時,會發現只是一部分的背景色發現改變,卻不能使整個屏幕背景色變化;
原因:打開app.vue,你會看到
<template> <div> <router-view></router-view> </div> </template>
原因就是這里還有一層div,所以你改變的不是最外層的div背景色,但是你有不能修改這里,所以:
解決方法:
我們要讓.finish-wrap脫離文檔流,為他添加個fixed屬性,最后結果:
.finish-wrap background-color rgb(255,255,255) height: 100% position: fixed width: 100%
Vue是一套用于構建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區別是,使用Vue可以自底向上逐層應用,其核心庫只關注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
關于“Vue-cli怎么為單獨頁面設置背景色”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“Vue-cli怎么為單獨頁面設置背景色”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。