我寫的內容，都是小地方，零碎處，而且每個點都沒有深入研究，只是，解決了我的當前問題就行了。

本次用了半個多月，和一個后臺一起做了一套頁面展示，pc配置節目單，移動端微信webapp進行動態顯示。反正描述起來，我也覺得自己做的真的垃圾，但是感覺期間又學到了很多的知識點。

　　首先從PC端的CSS開始總結吧

　　1、舉這么一個栗子，我想要做一個框，里面可以頁面滾動，框距離瀏覽器頂部50px，底部50px

　　

<div id="container"><div id="scrollContent">...</div> </div>

#container {
　　margin-left: 50px;
　　width: 300px;

　　position: absolute;
　　top: 50px;
　　bottom: 200px;

　　border: 3px solid cyan;

　　overflow-y: auto; /*剛剛發現，使用overflow: auto或者overflow-x: auto也可以，看來只要能夠影響默認的overflow就行*/
}
#scrollContent {
　　width: 100%;
　　height: 2000px;
　　background: -webkit-linear-gradient(bottom, #ccc, #000);
}

　　那么，我要做兩件事，

　　　　第一，可以滾動，嗯，給父元素container設置overflow-y: auto;

　　　　第二，由于不同尺寸屏幕瀏覽器的寬高不固定，所以不知道框的高度，無法寫出框的高度，同時沒有高度的元素無法使用overflow，所以我們使用position，并且讓top和bottom(如果橫向可以left和right)同時設定值，效果類似于給標簽設置了height(width)

　　對了，上次說了可以滾動，但是不想看到滾動條，直接 ::-webkit-scrollbar { width: 0; } ,這次說下更加詳細的設置滾動條的樣式吧（當然，僅限webkit內核，研究不深，能用就行）

　　

/*如果沒有下面的#container，直接::開始起步，則默認所有的滾動條都這么設置*/
#container::-webkit-scrollbar{width: 6px;height:5px;background-color:yellow; /* 會被下面的幾個顏色覆蓋住 */-webkit-border-radius:4px; } #container::-webkit-scrollbar-thumb {background-color: pink;-webkit-border-radius:4px; } /* 滑塊樣式*/ #container::-webkit-scrollbar-thumb:hover{background-color: #aaa;-webkit-border-radius:4px; } /*---滾動框背景樣式--*/ #container::-webkit-scrollbar-track-piece{ height: 20px;background-color:#eee; -webkit-border-radius:4px; }

　　2、行內塊元素或者行內元素（是這么稱呼吧，汗。。。）反正就是比如span放在一段文本p里面，span會跑到最頂部嘛諸如此類的亂七八糟，使用margin-top有可能影響到p中的文字的高度，嗯，給span等行內元素使用vertical-align:middle或者top，以這么作為指導方向進行調試，就能一下子ok的，具體的我還沒有去研究（畢竟是個博客都懶得寫的小白），但是粗略搜了一下，vertical-align就是行內元素或者行內塊元素有效的。請記住這個屬性，會有意想不到的幫助哦

vertical-align: middle;

　　

　　3、額，看了下pc端的js邏輯部分，沒啥好寫的，頂多主要的就是一個使用bootstrap吧，這個回頭單獨寫一下吧

?

好了，下面就是移動端了哦，依舊先說css部分

　　2.1、發現沒啥可以說的，嗯，先說一個0.5px的線吧，其實百度也是一大堆方法，我還是記錄一下其中自己喜歡的一種方法吧，畢竟記下來也比較有成就感

　　首先，當然是做一個標簽啊。。。

<p class="half_bottom"></p>

　　然后，進行這么一個設置

.half_bottom {width: 200px;height: 200px;border: 1px solid #ccc;position: relative; }

　　最后一步，給它的before（after也ok啦，畢竟這里沒有實質影響，所以下面的before和after隨便寫的，沒有特別區別）進行設置

/*這是設置底部的一條.5px的線*/ .half_bottom:after {content: '';width: 100%;position: absolute;left: 0;bottom: 0;border-bottom: 1px solid #000;transform: scaleY(.5); } /*這是設置整個邊框都是.5px*/ .half_bottom:before {content: '';width: 200%;height: 200%;position: absolute;top: 0;left: 0;border: 1px solid cyan;transform-origin: 0 0;transform: scale(.5);z-index: -1; /*這里不要忘記了z-index*/ }

　　一個元素包括可見的margin > border > padding > width/height，這就是我們都知道的盒模型，那么before和after在哪里呢？

　　　　嗯，before/after就處在padding以外，border的里面，所以，這里設定的.5px的線，不占用外部的空間，安全綠色放心

　　對于整個邊框都是.5px，after（before也一樣）會覆蓋住content，所以我們要多一個z-index: -1，防止after影響我們的事件操作

　　

2.2 多行省略號和單行省略號

/*多行文本超出隱藏*/overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;/*單行文本超出隱藏，必須要有width，至少父元素要有個width吧，這個不用在意，自己會用到的上面的多行文本同理*/ width: ***; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

　　這里有一個注意點，關于多行文本超出，不能夠有height，不然顯示過多或者不完全。而且不要用text-align: center/justify，不然會丑的，試了就知道了

2.3 對了，一個小細節，關于文本

文本是不是很亂？

　　我認為，如果UI讓我們對齊，我們第一反應就是text-align: center;變成下面的效果了

但是其實我們應該做的是，文字兩邊對齊啊，扒了半天，才發現自己基礎不扎實

看，上面的才是我們想要的效果對不對？？怎么做到？一句話，如下

text-align; justify;

　　汗，自己真的是，哎，思考不縝密，看東西不夠透徹

?嗯，最后一個，就是微信端的js的總結了，

　　2.4以前我說過我們后臺會給我靜態注入一些數據，其實原理沒去在意，結果就是多給了一個<script>標簽，里面給了些既定的內容，這樣少了一個請求。但是呢，注入的一些數據，我需要提前聲明一次，比如后臺給我注入了一個var wplay = 'human';，我必須自己也要var wplay; 這樣子才能夠正常的使用wplay這個變量（注意，自己的聲明要在window.onload外邊，也就是所謂的全局變量（每個人都自己的看法，我認為沒有全局變量，所有的內容一定都有再上一層的函數）中）

　　2.5額。。。把js文件扒出來一遍反復看，發現沒啥可說的。。。說說自己的很大的一個缺點吧，就是學習插件框架能力很差，也是，畢竟技術差，讀書少。所以這里手寫了倒計時插件，時間格式化插件等等（當然是沒有兼容性的啦，根本不算插件，還是說封裝的函數吧），所用方法在我看來極其low還低能，并且嚴重的影響了開發效率。。。

?

　　最后想說的，去年年底說的每周都寫一次博客，總結自己的能力，然后發現項目做了不少，但是太懶了，一直沒總結，越拖越多。如今公司來了波新人（比我強），還交接了新的開發團隊leader（不認識我），所以開發部僅僅我一個人閑置了好久，趁這個機會，趕緊學習，多寫寫博客用來記錄開發問題吧。至少讓自己無愧于心

ps：如果你看到了這里，謝謝你，我寫的博客的確對大家的幫助不大，可是我還是發布首頁了，而不是悄悄發布，估計進來的大家想要罵我了吧，這特么寫的什么玩意！是的，如今我是很菜，在公司五個月但是進行著最笨的jquery開發，沒啥高逼格，但是請相信，我也要相信自己，一會會有一天，發的博客不再是瑣碎的總結，讓人沒頭緒的瞎BB，而是給各位帶來幫助。這一天，不會遠！（錯誤歡迎指正哦，這次博客寫的太草率了，我的鍋）

?

?

?

　　

轉載于:https://www.cnblogs.com/wplay/p/6700708.html

總結

以上是生活随笔為你收集整理的最近的一个项目总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。