Html5+jQuery+CSS制作相册小记录

本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。

主要功能点：

• Html5进行布局
• 调用jQuery（借用官网的一句话：The Write Less, Do More）极大的简化了Javascript编程
• CSS 样式将表现与内容分离
  

话不多说，先上效果图：

代码如下：

 
 
  ul li
 {
  list-style-type:georgian;
  text-align:left;
  }
  body
  {
  margin:10px;
  text-align:center; 
  background-color:Orange;
  }
  header
 {
  height:80px;
  border:1px solid gray;
  width:99%
 }
  .left
 {
  border:1px solid gray;
  float:left;
  width:20%;
  height:520px;
  margin:0px;
  border-top-style:none;
  border-bottom-style:none;
  
 }
 .main
 {
  width:79%;
  float:left;
  height:520px;
  
  border-right:1px solid gray;
  margin:0px;
  position:relative;
 }
  footer
 {
  clear:left;
  height:60px;
  border:1px solid gray;
  width:99%
 }
 #container
 {
  display:block;
  padding:5px;
  
  margin:5px;
  position:relative;
  }
  .small
  {
  display:block;
  border-bottom:1px solid gray;
  }
  .small img
  {
  width:150px;
  height:120px;
  margin:5px;
  border:1px solid gray;
  padding:3px;
  }
  .mm
  {
  cursor:pointer;
  border-radius:5px;
  
  }
  input[type="button"]
  {
  cursor:pointer;
  background-color:Orange;
  color:Lime;
  font-family:Arial;
  font-size:25px;
  height:50px;
  border:0px;
  width:50px;
  position:relative;
  top:150px;
  }
  #btnLeft
  {
  left:30px; 
  float:left;
  }
  #btnRight
  {
  right:30px; 
  float:right;
  }
 
 
 



Html+jQuery + CSS 相册


相册说明
 

 
准备阶段：
 
几张图片，最好大小一致，宽高比一致
  
 
jQuery库文件
 
 

 
大致思路：
 
将界面分上，中（分 左（20%） 右（80%）），下 几部分
 
实现缩略图，依次放在一个容器中，并设置样式，时间
 
实现左右切换的事件函数
 


 
 
 
 
 
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。