2019-10-25 seo達(dá)人
前言：平時(shí)寫頁面的時(shí)候有些樣式使用完發(fā)現(xiàn)沒過多久就忘記了，這篇文章主要是用來記錄開發(fā)過程中容易忘記的CSS樣式，與其總是去網(wǎng)上查，還不如一個(gè)一個(gè)記錄下來，雖然說之前的都沒有記錄，但是知識(shí)的累積不論什么時(shí)候開始做都不會(huì)晚的。
首先 記錄幾個(gè)好用的插件網(wǎng)站：
layDate日期與時(shí)間組件： https://www.layui.com/laydate/
Vant移動(dòng)端插件庫： 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
菜鳥教程官網(wǎng)： https://www.runoob.com/
w3school官網(wǎng)： https://www.w3school.com.cn/
下面是遇到的一些想累積的css樣式：（內(nèi)容會(huì)隨時(shí)間累積的越來越多）
1、一個(gè) div 中的內(nèi)容實(shí)現(xiàn)上下滑動(dòng)效果（而不是超出body的高以后上下滑動(dòng)）：overflow:auto;
簡單的描述：body 中的一個(gè) div 內(nèi)，如果設(shè)置了固定的 height，而內(nèi)容的總 height 超出了 div 的高，則超出的部分就會(huì)被覆蓋，而想實(shí)現(xiàn)超出的部分變成滑動(dòng)的效果而不被覆蓋，則用 overflow:auto; 實(shí)現(xiàn)。
2、修改 前端框架封裝好的css樣式： border-radius: 20px!important;（注意使用英文的 ! 嘆號(hào)）
簡單的描述：在開發(fā)過程中經(jīng)常使用一些前端框架（bootstrap，vue.js，laydate，Vant等等），在使用link導(dǎo)入css文件以后，發(fā)現(xiàn)有些css是在標(biāo)簽內(nèi)使用內(nèi)嵌的方式實(shí)現(xiàn)的，優(yōu)先級(jí)最高，那么我們?cè)趺葱薷哪兀?br />
比如：css文件中的邊框弧度樣式為10px：border-radius: 10px;
我們想改成20px，則在后面加上 !important 即可：border-radius: 20px!important;
這篇文章主要是以后回頭復(fù)習(xí)或者忘記了的時(shí)候給我自己看的，但是如果恰好也幫助到了你，那是更加的有意義，在以后的開發(fā)過程中，該文章的內(nèi)容一定會(huì)累積的越來越多
藍(lán)藍(lán)設(shè)計(jì)( m.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gerard.com.cn