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

(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )

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

主要功能点：

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

话不多说，先上效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
 <title>The second html page</title>
 <style type="text/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:1px solid gray;*/
  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;
  /* border:1px solid gray;*/
  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;
  }
 </style>
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-3.1.1.min.js">

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

上一篇：零基础轻松学JavaScript闭包
下一篇：Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法