简单照片墙制作html5
程序员文章站
2024-03-25 12:59:46
...
.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;
}