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

時間 2019-11-29

標籤端的企業網站 test8 test 詳解欄目網站開發简体版

原文原文鏈接

今天完成的事情：（1，僞元素：before,:after的使用。2.table的使用（collapse的使用）3rgba的高級運用） html

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

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

一。實現nav導航。我本身嘗試使用僞元素：before,:after的使用，以爲好好玩。要多點使用，加深熟悉度。github

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

對於超連接，我以爲它就是一個「宅男」。怎麼我要每次都要層疊式的肯定a的位置，而後加一句bootstrap

text-decoration: none;

纔去掉它的下橫線。-_-!後端

至於實現鼠標滑過超連接變顏色。使用:hover就能夠了。ssh

.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>