JQuery.transform 旋转焦点图 布局篇

基于对慕课网教程的笔记

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/index-main.css" type="text/css"/  rel="stylesheet">
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/main-js.js"/></script>
</head>

<body>
<div class="mainbox">
   <ul>
      <li><img src="image/1.jpg"/> </li>
      <li><img src="image/2.jpg"/> </li>
      <li><img src="image/3.jpg"/> </li>
      <li><img src="image/4.jpg"/> </li>
     </ul>
  <div class="butbox">
    
    <a class="rightbut">></a>
    <a class="butleft"><</a>
    
  </div>
  
</div>

</body>
</html>
css
@charset "utf-8";
/* CSS Document */

*{margin:0;
  padding:0;
  font-family:"微软雅黑";
}
.mainbox{width:1000px;
         height:450px;
		 overflow:hidden;
		 margin:0 auto;
		 position:relative;
}
.mainbox ul li{float:left;
               list-style-type:none;
			   width:250px;
			   height:400px;
			   overflow:hidden;
			   border:30px solid #FFF;
			   margin-left:-60px;
			   position:relative;
}
.mainbox ul li img{position:absolute;}
.mianbox .butbox .butleft{position:absolute;
                          top:220;
						  left:50px;
						  color:#fff;
						  font-size:60px;
						  background-color:#300; }
.mainbox .butbox .rightbut{top:220px;right:50px;color:#fff;font-size:60px;position:absolute;}


你可能感兴趣的:(html,css,transform)