pc端的企業網站（IT修真院test8）詳解1-4

標籤：上傳   彈性   ext   元素   round   系統   今天   rgb   驗證   

今天完成的事情：（1，虛擬元素：before,:after的使用。2.table的使用（collapse的使用）3rgba的進階運用） 

今天我主要完成test8-3的頁面。

header和footer都是前兩個頁面用到的。直接搬過來就好。

一。實現nav導航。我自己嘗試使用虛擬元素：before,:after的使用，覺得好好玩。要多點使用，加深熟悉度。

可以看到我使用:before弄了格文字在ul盒子前面。當然我又要:after清除浮動影響。

對於超連結，我覺得它就是一個“宅男”。怎麼我要每次都要層疊式的確定a的位置，然後加一句

text-decoration: none;

才去掉它的下橫線。-_-!

 

至於實現滑鼠滑過超連結變顏色。使用:hover就可以了。

.avator-nav-1 li a:hover{
background:#29b078;
   color:white;
}

 

二。實現內容列表

 

<div class="c-row-1">   <div class="pct80 auto">       <div class=" ptb20 bdb-1sd0d">           <a href="" CLASS="co000">首頁</a><span class="si-1">&rsaquo;</span>           <a href="" class=" co20B">合作企業</a>       </div>       <ul class="ptb12 bdb-1sd0d avator-nav-1">           <li><a href="#">全部</a></li>           <li><a href="#">前端開發</a></li>           <li><a href="#">後端開發</a></li>           <li><a href="#">移動開發</a></li>           <li><a href="#">整站開發</a></li>           <li><a href="#">運營維護</a></li>       </ul>   </div></div>.ptb12{padding-top:1.2rem;padding-bottom:1.2rem;}.bdb-1sd0d{border-bottom:1px solid #d0d6d9; }/*-----指示性-----*/.si-1{padding:0 0.5rem;   font-size: 2rem;}.avator-nav-1:before{ content:"方向：";   color:#d0d6d9;   font-size:1.4rem;   float:left;   padding:8px 0;}.avator-nav-1:after{ content:"";   clear:both;}.avator-nav-1 li a{text-decoration: none;   color:black;   font-size:1.4rem;   display:inline-block;   padding:8px 20px;}.avator-nav-1 li a:hover{background:#29b078;   color:white;}

 

這一塊，本來我使用float：left實現的。但是很煩它左右外邊距沒有的設定啦。

突然有個思路就是大盒子的左右內邊距設定負值，然後每個子盒子左右外邊距抵消。

能不能實現呢？下次做test時，再試試看吧。

這是小插曲，完。

我使用的方法是flex彈性自適應盒子方法。

<ul class="df-jcsbw">   <li class="show pct30">       <table>                  </table>       <table>                 </table>       <div class="cover df-cc">       </div>   </li></ul>

 

關鍵的結構代碼如上。

.df-jcsb{display:flex;justify-content: space-between;}.df-cc{display:flex;justify-content: center;align-items: center;}

 

第一個table中，我使用了colspan來佔據一行兩列

<th colspan="2">

 

裡面的小表徵圖和文字對齊怎麼實現呢？

網上一搜，一大把方法。都沒有固定一個傻瓜式對齊的。

好像都要一步步的調資料。好吧，這有點武斷。可能是我還沒發現而已。

 

而我的方法是：父盒子設定內邊距，然後子盒子設定負上外邊距來使img對齊父盒子的文本。

 

然後下面就是cover遮蓋的方法啦。

其實都離不開:hover的實現。我使用的是visibility。我記得前一段時間看過一篇文章。這麼比喻visibility和display的，呃，忘記是不是說他們兩了。大概是，visibility是一塊沒封裝的紙幣，你偷偷的拿開了，就不在真的消失了。但是另外一個是有信封包著的紙幣，你偷偷拿走錢了，但是紅信封還留在那裡佔著位置。

跳過，好像大概是這個意思吧！反正我一直都是用visibility。

 

在做cover的時候，我使用了rgba的方法。這個屬效能很好的實現透明效果。

background-color: rgba(0,0,0,0.76);

 

直接cover，然後內面加入內容就好。

而還有另外一種方法：

background:#000;filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;

 

這種方法呢，我在test7-2的時候使用過。

這種方法層疊關係是，上面屬性對立使用一個盒子，然後下方在加入顯示的內容。同時還要用一個大盒子包含{屬性盒子，內容盒子}

.footer-bg{height:5rem;   /*只要再給一個層，然後給個跟父盒子一樣高的高度就可以實現底層透明，上層不透明*/   background:#29BDE0;   filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;   /*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;實現透明效果*/}.nav-fl,.nav-fr{margin-bottom:0.5rem;   width:45%;max-width:30rem;   padding:1rem;   top:0.5rem;   border-radius:0.5rem;border:none;   font-size:2rem;color:#fff;}.bgfb{background: #FBB435;}.bgf6{background: #F66F6F;}<div class="footer-1">   <div class="footer-bg"></div>   <button class="nav-fl bgfb">再來一局</button><button class="nav-fr bgf6">上傳分享</button></div>

 

大概就是這些內容吧。

明天計劃的事情：（1，使用響應式布局2柵格系統） 

遇到的問題：（1.小表徵圖和文字的對齊 2.他媽，怎麼我重裝了系統，設定了公用密鑰還上傳失敗啊！x_x#） 

這裡主要說一下webstrom上傳失敗問題

我檢查了公用密鑰，設定是正確的。然後上webstrom重新設定git和github，顯示的結果都是成功。

然後我上git驗證ssh key 是否成功。結果如下：

 

後來我從新建立ssh key，再重新上傳一邊也是不行。

那麼究竟是哪裡有問題呢？

終於在下方的圖片2中發現問題了。

git軟體告訴我Not a git repository，沒有項目？怎麼可能，我github上可是妥妥的有test1在呢？

但是我知道它的大局是說關聯不成功。

接著我試試從遠程github上複製項目test1.

github告訴我成功了，我開啟我的庫所在地，怎麼沒有？——這又告訴我下一步線索了

我猜是要從新確定git的可管理倉庫

接著我一步步的設定了。結果終於在我想要出現的地方出現了。

好，我copy了CSS-Task文檔，然後上webstrom清空了CSS-Task項目，目的是要重設CSS-Task項目。最後上github刪掉假CSS-Task庫。

重頭戲來了，我再在webstrom上開啟我的CSS-Task項目，在vcs裡share project on github。一秒兩秒，成功啦！……^_^ 歡喜。

還是開啟github上的CSS-Task庫，看看內容

就只有test1？？

so what?

我猜想有兩個可能：1，是選vcs時，沒選好內容？

2，是預設git可管理倉庫的路徑要設定為上一級。

擦擦手，開始作死。

等了5分鐘，終於pull完畢。

 

 

結果是滿意的。那麼怎麼訪問呢？

https://hewasdrunk.github.io/CSS-Task/test8/test8-1.html

果然是要再加/CSS-Task進入，才可以訪問。

不過結果是bootstrap的輪播圖失效了！what ‘s the full!

 

在本機上的代碼的輪播圖是沒事的，這又是哪裡出現問題啦！他媽，一個問題接一個問題的出現。

豎中指

不過我現在研究的不是這個問題

那麼改一下git的可管理目錄呢？

 

git軟體告訴我目錄下面沒有庫？

開啟目錄一看，.git在http的根目錄下了。

繼續測試

我上傳了另外一個跟CSS-Task同目錄的test8，上傳成功，但是開啟網頁失效.它說找不到.我再上傳一個項目test3-1，結果成功了。顯然設定在此目錄比較好。

 好了，花了15分鐘找到問題，清除浮動。草。我還沒吃飯的。不寫了。趕緊上傳github，然後吃飯

收穫：（1，虛擬元素：before,:after的使用。2.table的使用（collapse的使用）。3rgba的進階運用。4.小表徵圖和文字的對齊。）

pc端的企業網站（IT修真院test8）詳解1-4