我的CSDN第一天，也是我的javaweb第一天
阿新 • • 發佈：2018-11-09
小白第一天新手報到，作圖真的很辛苦。寫了一個前端頁面。對div更深的應用
圖片效果
動態效果
-
其中body的外邊距 預設為8
-
ul{
list-style: none; /無序列表清除圓點/
margin: 0;
padding: 0
}* -
.wrap li{
position: relative;/監管絕對定位/
width: 180px;
height: 105px;
background-color: rgba(0,0,0,0.3); /0.3透明度/
float: left;/向左浮動/
margin: 30px 5px;
} -
萬能居中
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; -
.wrap img:hover{/當滑鼠放到img標籤，執行{}裡面的程式碼/
transform: rotate(360deg) scale(1.3);
} -
圖片中的545排列< li style=“margin-left: 100px” >< /li >
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>index</title> <meta name="Keywords" content="關鍵字"> <meta name="Description" content=" "> <style> body{ margin: 8; background: url("images/bodyBg.jpg"); } .wrap{ width: 950px; height: 500px; /* background-color: #E8F6FF; */ margin: 100px auto ; } ul{ list-style: none; margin: 0; padding: 0 } .wrap li{ position: relative; width: 180px; height: 105px; background-color: rgba(0,0,0,0.3); float: left; margin: 30px 5px; } .wrap li:before{/*偽元素*/ content: " "; width: 180px; height: 105px; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; transform: rotate(60deg); } .wrap li:after{ content: " ";/*content啟用偽元素的必要元素*/ width: 180px; height: 105px; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; transform: rotate(-60deg); } .wrap img{ position: absolute; z-index: 1;/*控制層級。預設為0*/ /* margin: 13px 50px; */ top: 0; left: 0; right: 0; bottom: 0; margin: auto;/*萬能居中*/ transition: 1s;/*css3動畫過渡效果*/ } .wrap img:hover{/*當滑鼠放到img標籤，執行{}裡面的程式碼*/ transform: rotate(360deg) scale(1.3); } /* .left{ width: 180px; height: 105px; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; transform: rotate(60deg);/*css3變換屬性 旋轉 角度* } */ /* .right{ width: 180px; height: 105px; background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; transform: rotate(-60deg); } */ </style> </head> <body> <div class="wrap"> <ul> <li><img src="images/1.png"></li> <li><img src="images/2.png"></li> <li><img src="images/3.png"></li> <li><img src="images/4.png"></li> <li><img src="images/5.png"></li> <li style="margin-left: 100px"><img src="images/6.png"></li> <li><img src="images/7.png"></li> <li><img src="images/8.png"></li> <li><img src="images/9.png"></li> <li><img src="images/10.png"></li> <li><img src="images/11.png"></li> <li><img src="images/12.png"></li> <li><img src="images/13.png"></li> <li><img src="images/14.png"></li> </ul> </div> </body> </html>