最近在學習CSS,老師布置了一道CSS測試作業,讓我感覺又有進步了!
首先,老師要求我們制作一個正方形,求解方法有很多,我選擇了使用相同的寬度和高度,再利用box-sizing屬性來控制寬度和高度包含邊框和內邊距。下面是我的代碼:
.square{ width: 100px; height: 100px; box-sizing: border-box; border: 2px solid black; }
接下來,老師要求我們使用flex布局制作一個導航欄。我按照老師的要求,先在HTML中添加一個nav元素,然后使用flex屬性來實現元素在水平方向上的排列。代碼如下:
nav{ display: flex; justify-content: space-between; }
最后,老師讓我們為某個圖片添加一個hover效果,讓圖片放大。為了實現這個效果,我使用了CSS3的過渡效果。代碼如下:
img:hover{ transform: scale(1.2); transition: all 0.3s ease-in-out; }
以上就是我的CSS測試作業的全部內容,希望我能獲得好成績!
上一篇css流式布局是什么
下一篇css瀏覽器兼容問題總結