2021.7.21今日小結
阿新 • • 發佈:2021-07-21
今天完成了這個網頁的後續。主要是一下css樣式的基本。
然後在做小米商城的主頁,目前做了這些,新學到的內容是利用hover滑鼠觸碰彈出視窗,和隱藏。
.app{ position:relative; 給彈出視窗的父類設定相對定位,為了後面彈出視窗的絕對定位的物件。 } li:hover>.app::after{ 給.app就是一個a標籤新增一個偽元素,為了給彈出框上面新增一個三角形 content:''; position:absolute; 絕對定位修改它位置 bottom:0px; left:0; right:0; margin:auto; width:0; 固定死避寬度免被前面的樣式影響
/* 小米商城APP彈出窗 */ .app .qrc{ display: none; /*先隱藏視窗,為了後面給這個元素新增滑鼠偽類*/ position: absolute; left: -38px; width: 134px; height: 148px; line-height: 10px; text-align: center; font-size: 14px; background-color: #fff; box-shadow:0 0 10px rgba(0,0,0,.3); 邊框陰影 } li:hover>.app .qrc{ display: block; 新增滑鼠偽類修改元素的顯示 }
還了解了一個border邊框的用法,製作出一個三角形
border:10pxsolidtransparent; 先設定一個四邊框的,顏色都是透明色。 border-top:none; 如果想要的三角形反向是那邊的就清除邊框那一個方向的樣式。我這裡清除的是上面的。 border-bottom-color:rgb(255,255,255); 然後給對應的一邊新增樣式,三角形就出來了。 我覺得挺實用的。還有一個如果不想讓視窗變小時,裡面的樣式會到處跑,就利用min-width最小寬度固定視窗。 目前的效果圖如下了。