CSS学习笔记之练习 2.25
生活随笔
收集整理的這篇文章主要介紹了
CSS学习笔记之练习 2.25
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
小米官網(wǎng)手機圖標盒子的仿照練習
原圖：
代碼實現(xiàn)圖：
附上代碼：
DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body{background-color: #f5f5f5;}a{color:black ;text-decoration: none;}.box{width: 300px;height: 500px;background-color: white;margin: 100px auto;}.box img{width: 100%;}.review{font-size: 24px;margin-top: 20px;padding: 0 45px;}.info{font-size: 20px;margin-top: 10px;padding: 0 55px;color: darkgrey;}.price{color: orange;margin-top: 30px;font-size: 27px;padding: 0 90px;}</style> </head><body><div class="box"><img src="images/1.webp" alt=""><p class="review"><a href="#">REDMI K50 電競版</a> </p><div class="info">全線拉滿的冷血旗艦</div><div class="price">3299元起</div></div> </body> </html>總結
以上是生活随笔為你收集整理的CSS学习笔记之练习 2.25的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用CSS写正方体，结合JS实现3D轮播
- 下一篇： 一位过来人：也谈谈体制内 • 体制外