1. 程式人生 > 其它 >2021.7.21今日小結

2021.7.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; 固定死避寬度免被前面的樣式影響
height:0; 固定死避高度免被前面的樣式影響 border:8pxsolidtransparent; 三角形邊框8畫素樣式是透明顏色 border-top:none; 清除邊框上面的樣式 border-bottom-color:rgb(255,255,255); 設定下面邊框的顏色 }

/* 小米商城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最小寬度固定視窗。 目前的效果圖如下了。