相信大家在敲程式碼的過程中，會遇到無數的坑，不要悲傷，不要氣餒。俗話說，坑就是經驗。嗯，沒錯，俗話是我說的。閒言少敘，本文為長篇小說，致我們程式碼中的坑，以及一些常用的小方法，會逐步寫下，歡迎您的到來，下面開始正題：

1.  比如說，現在需要實現一個這樣的效果：

在首頁的右上方，有為數較多的網頁都會有這個，例如百度，活生生的例子哈

也就是一個ul ， 裡面眾多的li ， li裡面可能有a標籤啊，因為都是需要點選事件的嘛，

我們知道正常的ul是垂直排列的，那麼我們怎麼讓一個ul變成這樣實際效果呢，噹噹噹當：

給你的ul設定一個向右的浮動，然後就可以通過margin調節整個ul的具體位置，list-style：none去掉 各個li前面的小圓點，

給你的li一個向左的浮動，然後就老老實實的從垂直排列變為了水平排列，怎麼樣，聽不聽話，

再通過padding調節各個li之間的距離，是不是美美的

如果有需要，寫了a標籤的話,那麼可以通過如圖的方法去掉a標籤下文字的下劃線,還可以用color設定文字的顏色，怎麼樣，是不是很簡單

2.比如說我們要給一個span新增背景圖片，css方法background:url("圖片路徑") no-repeat;我們還需要對這個圖片進行位置的改變

那麼我們就需要給當前的span設定為行內塊元素或者塊元素（視具體情況而定），也就是display:inline-block和display:blcok，

還需要給span設定具體的寬和高，這個時候才可以.

3.底部的資訊對齊，比如這樣：

一個很常見的底部資訊，也就是多個ul的集合  ,我們可以寫一個父級的div，所有的ul都寫在一個div裡，按順序寫好，

這時,我們的div就可以看做上面第一個效果中的ul，而眾多的ul看做li，

把div向右浮動，ul向左浮動，然後就是調距離了，思路非常清晰。

好了，第一期就這樣結束了，怎麼樣，滿滿的乾貨不是,希望看過了的你也會有所收穫，謝謝光臨！