最近的一個項目總結

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

本次用了半個多月，和一個後臺一塊兒作了一套頁面展現，pc配置節目單，移動端微信webapp進行動態顯示。反正描述起來，我也以爲本身作的真的垃圾，可是感受期間又學到了不少的知識點。

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

　　一、舉這麼一個栗子，我想要作一個框，裏面能夠頁面滾動，框距離瀏覽器頂部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;  
}

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

vertical-align: middle;

　　

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

 

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

　　2.一、發現沒啥能夠說的，嗯，先說一個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，而是給各位帶來幫助。這一天，不會遠！（錯誤歡迎指正哦，此次博客寫的太草率了，個人鍋）