简单照片墙制作html5

.html

<!-- html静态网页：数据静态 -->
<!-- html:标签1、单标签：img、a...2、双标签 -->
<!-- CSS样式：装饰标签三种存在方式：1、在开始标签内声明style属性2、在html内部声明style标签3、在该项目创建style文件4、优先级：择近优先--><!DOCTYPE html>
<!-- 文档类型html，打开浏览器渲染引擎的钥匙 -->
<html>
<!-- 限制标签存放在html双标签内部 -->
<head>
<!-- 头部：包含网页的基本信息及设置 -->
<meta charset="UTF-8">
<!-- 设置网页编码格式 -->
<title>照片墙</title>
<link href="Css/index-style.css" rel="stylesheet">
</head>
<body><!-- div容器，盛放其他所有的标签，div+Css做网页的排版布局 --><div class="box" id="box"><img alt="此图片无法加载" src="img/1.jpg" class="pic pic1"/><img alt="此图片无法加载" src="img/2.jpg" class="pic pic2"/><img alt="此图片无法加载" src="img/3.jpg" class="pic pic3"/><img alt="此图片无法加载" src="img/4.jpg" class="pic pic4"/><img alt="此图片无法加载" src="img/5.jpg" class="pic pic5"/><img alt="此图片无法加载" src="img/6.jpg" class="pic pic6"/><img alt="此图片无法加载" src="img/7.jpg" class="pic pic7"/><img alt="此图片无法加载" src="img/8.jpg" class="pic pic8"/><img alt="此图片无法加载" src="img/9.jpg" class="pic pic9"/></div></body>
</html>

.css

/*选择所有，默认外边距为8px*/
*{margin:0px;padding:0px;
}
body{background:#333;
}
.box{width:900px;height:450px;/*background:blue;*//*position margin使用绝对居中*/position:absolute;/*设四个方向，窗口居中*/top:0;left:0;right:0;bottom:0;margin;auto;/*auto在父容器中水平居中*//*margin:100px 50px;上下、左右 四个：顺时针 上右下左*/
}.pic{background:blue;width:150px;/*只设置宽度，高会随着宽度的改变，按比例缩放*/margin-left:20px;padding:5px;/*扩充内部的边距，增加本身的宽度和高度*/border:5px solid blue;/*边框：宽度、样式、颜色 dashed虚线*//*border-radius:50%;/*剪切圆形，根据指定的半径改变四角的弧度*/
}.pic1{/*transform:改变标签的形态：大小、位置、透明、角度...rotate:角度，deg(单位)  正值：顺时针scale:缩放 默认值为1  >1放大   <1缩小*/transform:rotate(-30deg) scale(1);}
.pic2{transform:rotate(-10deg) scale(0.5);}
.pic3{transform:rotate(20deg) scale(1.2);}
.pic4{transform:rotate(-30deg) scale(1);}
.pic5{transform:rotate(10deg) scale(1.2);}
.pic6{transform:rotate(-20deg) scale(1.2);}
.pic7{transform:rotate(-40deg) scale(0.8);}
.pic8{transform:rotate(-10deg) scale(1.5);}
.pic9{transform:rotate(10deg) scale(0.7);}
/*HOVER：悬浮事件*/
.pic:HOVER{transition:all 2s;/*过渡*/transform:rotate(0deg) scale(1.5);position:relative;z-index:10;
}

简单照片墙制作html5相关推荐

HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
HTML5期末大作业：在线电影网站设计——电影从你的全世界路过(4页) HTML+CSS+JavaScript 大学生电影网页制作教程学生HTML电影网页设计作业成品简单网页制作代码学生影视
HTML5期末大作业:在线电影网站设计--电影从你的全世界路过(4页) HTML+CSS+JavaScript 大学生电影网页制作教程学生HTML电影网页设计作业成品简单网页制作代码学生影视网页 ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
如何制作HTML5 SVG描边文字
在很多时候,SVG是最容易在网页上做出文字特效的方法.现在SVG已经被所有的现代浏览器支持,包括IE9.要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂.如下是一 ...
h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
focusky怎么制作html5,使用focusky制作展示动画
一个协会要举办大会议,以前我帮着做了个图片视频,就是很多照片循环展示,配个背景音乐那种. 现在又找到我,我用focusky制作下,因很久不用,怎么使用也忘了,这个软件的操作逻辑也不太容易搞的清,主要是 ...
Adobe edge animate制作HTML5动画
Edge Animate是Adobe出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.Adobe Edge Animate的目的是帮助专业设计师制作网页动画乃至 ...
ppt 简单动画制作
ppt 简单动画制作
简单公司主页HTML5模板
简介: 简单公司主页HTML5模板是一款公司企业类官网网站模板下载.aspku提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢. 下载地址: http://www.bytepan.com/kE ...

简单照片墙制作html5

简单照片墙制作html5相关推荐

最新文章

热门文章