杰晶网络

Html5+jQuery+CSS制作相册小记录
网络编程 2024/11/18 佚名
3 2

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

主要功能点：

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

话不多说，先上效果图：

Html5+jQuery+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">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
Html5制作相册,jQuery,CSS制作相册
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“Html5+jQuery+CSS制作相册小记录”
暂无“Html5+jQuery+CSS制作相册小记录”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网