HTML5 + CSS制作一个网络照片墙
HTML5 + CSS
·
使用HTML5 + CSS制作一个照片墙是不难的，在大学里可以当作业交了，这是效果：
这个是有动画的，具体的效果在这个网站的home页，Welcome的源码参考了用html做一个漂亮的网站，个人网页，css_梅干菜个小酥饼的博客-CSDN博客_好看的html网页http://www.sunruiyang.xyz/
http://www.sunruiyang.xyz/
HTML代码，这里为了方便修改动画的角度样式背景等，内联了一部分的CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style type="text/css">
body {
background-color: MediumAquaMarine;
background-size: 100%;
}
img {
width: 350px;
}
#pic1 {
position: absolute;
top: 90px;
left: 10px;
transform: rotate(20deg);
}
#pic2 {
position: absolute;
top: 90px;
left: 300px;
transform: rotate(20deg);
}
#pic3 {
position: absolute;
top: 90px;
left: 650px;
transform: rotate(20deg);
}
#pic4 {
position: absolute;
top: 90px;
left: 900px;
transform: rotate(20deg);
}
#pic1:hover {
transform: rotate(0deg);
transform: scale(1.5);
}
#pic2:hover {
transform: rotate(0deg);
transform: scale(1.5);
}
#pic3:hover {
transform: rotate(0deg);
transform: scale(1.5);
}
#pic4:hover {
transform: rotate(0deg);
transform: scale(1.5);
}
/*在这里开始编写【设置图片样式】的代码*/
</style>
</head>
<body>
<h1>名画展览墙</h1>
<p id="part1">一起来欣赏艺术的美！</p>
<div>
<!--在这里开始编写【添加 id 属性】的代码-->
<img id="pic1" src="呐喊.jpg" />
<img id="pic2" src="戴珍珠耳环的少女.jpg" />
<img id="pic3" src="星夜.jpg" />
<img id="pic4" src="蒙娜丽莎.jpg" />
</div>
<div class="ribbon">
<a href='index.html'><span>Welcome</span></a>
<a href='home.html'><span>Home</span></a>
</div>
<div class="content">
<hr/>
<p>站长注释:<br>部分功能仍在开发中，详情咨询QQ：3148420460</p>
</div>
</body>
</html>CSS：
@import url('https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Long+Cang|Ma+Shan+Zheng|ZCOOL+KuaiLe|ZCOOL+QingKe+HuangYou|ZCOOL+XiaoWei&display=swap&subset=chinese-simplified');
/* 设置背景样式 */
body {
background: no-repeat;
background-size: cover;
}
/* 设置标题样式 */
h1 {
height: 80px;
color:rgba(255, 248 , 220);
font-size: 60px;
font-family: 'Ma Shan Zheng';
text-align: center;
}
/* 设置 */
#part1 {
width: 70%;
margin: 0px 15%;
height:50px;
font-family: 'Ma Shan Zheng';
font-size: 36px;
text-align: center;
/* 添加字体颜色 */
color:rgba(255,248,220);
background-color: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.4);
border-width: 3px;
border-style: solid;
border-radius: 35px;
}
div img {
box-shadow: 5px 5px 15px rgba(105,105,105,0.9);
border-width: 10px 12px ;
border-color: rgba(255,248,220, 0.9);
border-style: solid;
transition: all 0.5s ease-in;
z-index: 10;
}
div {
width: 1200px;
height: 500px;
margin: 80px auto;
/* align: center; */
position: relative;
}
img:hover{
z-index: 100;
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
left: 450px;
top: 35px;
margin: auto;
}
.ribbon a:link,
.ribbon a:visited {
color: #000;
text-decoration: none;
height: 3.5em;
overflow: hidden;
}
.ribbon span {
background: #E6E6FA;
display: inline-block;
line-height: 3em;
padding: 0 1.5em;
margin-top: 0.5em;
position: relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
/* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;
/* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;
/* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;
/* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background: #FFD204;
margin-top: 0;
}
.ribbon span:before {
content: "";
position: absolute;
top: 3em;
left: 0;
border-right: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
.ribbon span:after {
content: "";
position: absolute;
top: 3em;
right: 0;
border-left: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
.content {
position: absolute;
top: 900px;
left: 20px
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)