代碼塊
html頁面:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>rotate image</title></head><body><div class="polaroid rotate_left"><img src="pulpitrock.jpg" alt="" width="284" height="213"><p class="caption">The pulpit rock inLysefjorden,Norway.</p></div><div class="polaroid rotate_right"><img src="cinqueterre.jpg" alt="" width="284" height="213"><p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p></div></body></html>css樣式:<style type="text/css" media="screen">body{margin:30px;background-color: #E9E9E9;}div.polaroid{width: 294px;padding: 10px 10px 20px 10px;border:1px solid #BFBFBF;background-color: #F0F8FF;box-shadow: 4px 4px 6px #aaa;border-radius: 5px;}div.rotate_left{float: left;-ms-transform:rotate(7deg);-webkit-transform:rotate(7deg);transform:rotate(7deg);}div.rotate_right{float: left;-ms-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}</style>