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
}

HTML5 + CSS制作一个网络照片墙相关推荐

使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...

HTML5 + CSS制作一个网络照片墙

HTML5 + CSS制作一个网络照片墙相关推荐

最新文章

热门文章