<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one{ background-color: #9cbfcc; border-radius: 5px; padding-top: 56px; padding-left: 58px; width: 230px; height: 290px; box-sizing: border-box; color:#ffffff; margin-right: 15px; float: left; } .two{ background-color: #6bb790; border-radius: 5px; padding-top: 56px; padding-left: 58px; width: 230px; height: 290px; box-sizing: border-box; color:#ffffff; margin-right: 15px; float: left; } .three{ background-color: #f5b227; border-radius: 5px; padding-top: 56px; padding-left: 58px; width: 230px; height: 290px; box-sizing: border-box; color:#ffffff; margin-right: 15px; float: left; } </style> </head> <body> <div class="one"> <img src="img/gmail.png" width="116px;" alt="" /> <p> Efficient and useful. </p> </div> <div class="two"> <img src="img/news.png" width="116px;" alt="" /> <p> Find your favorite. </p> </div> <div class="three"> <img src="img/map.png" width="116px;" alt="" /> <p> Better than Baidu. </p> </div> </body> </html>
新学到的样式：
box-sizing：border-box 自动计算，固定总长宽
float：left 向左浮动
