2019-10-25 seo達人
前言:平時寫頁面的時候有些樣式使用完發現沒過多久就忘記了,這篇文章主要是用來記錄開發過程中容易忘記的CSS樣式,與其總是去網上查,還不如一個一個記錄下來,雖然說之前的都沒有記錄,但是知識的累積不論什么時候開始做都不會晚的。
首先 記錄幾個好用的插件網站:
layDate日期與時間組件: https://www.layui.com/laydate/
Vant移動端插件庫: https://youzan.github.io/vant/#/zh-CN/intro
Element組件庫: https://element.eleme.cn/#/zh-CN/component/installation
Vue.js框架: https://cn.vuejs.org/v2/guide/
Bootstrap框架: https://v2.bootcss.com/index.html
菜鳥教程官網: https://www.runoob.com/
w3school官網: https://www.w3school.com.cn/
下面是遇到的一些想累積的css樣式:(內容會隨時間累積的越來越多)
1、一個 div 中的內容實現上下滑動效果(而不是超出body的高以后上下滑動):overflow:auto;
簡單的描述:body 中的一個 div 內,如果設置了固定的 height,而內容的總 height 超出了 div 的高,則超出的部分就會被覆蓋,而想實現超出的部分變成滑動的效果而不被覆蓋,則用 overflow:auto; 實現。
2、修改 前端框架封裝好的css樣式: border-radius: 20px!important;(注意使用英文的 ! 嘆號)
簡單的描述:在開發過程中經常使用一些前端框架(bootstrap,vue.js,laydate,Vant等等),在使用link導入css文件以后,發現有些css是在標簽內使用內嵌的方式實現的,優先級最高,那么我們怎么修改呢?
比如:css文件中的邊框弧度樣式為10px:border-radius: 10px;
我們想改成20px,則在后面加上 !important 即可:border-radius: 20px!important;
這篇文章主要是以后回頭復習或者忘記了的時候給我自己看的,但是如果恰好也幫助到了你,那是更加的有意義,在以后的開發過程中,該文章的內容一定會累積的越來越多
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。