前端：HTML+CSS实现相册管理网站原型

文章目录

1.1 相册初始界面
1.2 相册浏览界面
1.3 CSS样式文件

1.1 相册初始界面

代码部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相册初始界面</title><link rel="stylesheet" href="01-Main.css"><link rel="shortcut icon" href="../00-images/18-相册logo图标.ico">
</head><body><div class="div-head"><span>相册管家</span><a href="02-Initial.html" style="left: 70%;color: cyan">首页</a><a href="03-Browse.html" style="left: 80%;">浏览</a><a href="04-Manage.html" style="left: 90%;">管理</a></div><hr class="hr-shadow"><div class="div-background"><span style="color: silver;padding-top: 175px;padding-left: 95px;">“</span><span class="title thin">记忆轻舞飞扬，</span><br><span class="title thick">定格你的美好瞬间。</span><span style="color: silver;padding-top: 200px;padding-left: 300px;">”</span><a href="#"><button style="margin-left: 180px;" >开始使用</button></a><a href="03-Browse.html"><button style="margin-left: 10px;">浏览已有相册</button></a></div>
</body></html>

运行在浏览器后，效果如图所示：

1.2 相册浏览界面

代码部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相册浏览界面</title><link rel="stylesheet" href="01-Main.css"><link rel="shortcut icon" href="../00-images/18-相册logo图标.ico">
</head><body><div class="div-head"><span>相册管家</span><a href="02-Initial.html" style="left: 70%;">首页</a><a href="03-Browse.html" style="left: 80%;color: cyan;">浏览</a><a href="04-Manage.html" style="left: 90%;">管理</a></div><hr class="hr-shadow"><div class="box" style="margin-left: 135px;"><a href="06-RobertAlbum.html"><img src="../00-images/24-相册图片.jpg" alt=""></a><p class="review">“一位喜欢足球与艺术的成都小姑娘”</p><div class="appraise">2022-2-4</div><div class="info"><h4> Robert-Plant</h4><em>|</em><span> 人物</span></div></div><div class="box"><a href="#"><img src="../00-images/29-天空一角.jpg" "></a><p class=" review">“要有一双发现美的眼睛”</p><div class="appraise">2022-2-4</div><div class="info"><h4> Life </h4><em>|</em><span> 风景</span></div></div><div class="box"><a href="#"><img src="../00-images/06-张玉宁 抬手庆祝.png" "></a><p class=" review">"中国足球的这些年"</p><div class="appraise">2022-2-4</div><div class="info"><h4> football</h4><em>|</em><span> 运动</span></div></div><hr></body></html>

运行效果：

1.3 CSS样式文件

* {margin: 0px;padding: 0px;
}.div-head {width: auto;height: 40px;background-color: white;background-image: url("../00-images/15-相册logo图片.png");background-position: 81px 17px;background-repeat: no-repeat;background-size: 2.5%;padding-top: 23px;padding-left: 115px;
}.div-head span {font-size: 18px;font-weight: 700;font-family: "Lucida Calligraphy", cursive, serif, sans-serif;;
}.hr-shadow {/* 带阴影分割线 */border: 0;padding-top: 10px;color: #d0d0d5;border-top: 2px solid rgba(0, 0, 0, .1);box-shadow: inset 0 10px 10px -10px;
}.div-head a{text-decoration: none;color: black;position: absolute;
}.div-head a:hover{text-decoration:underline;text-decoration-color: cyan;text-underline-offset: 20px;text-decoration-thickness: 4px;color: cyan;
}.div-background {width: 1250px;height: 500px;background-color: rgba(192, 204, 226, 0.4);background-image: url(../00-images/27-相册初始界面背景图片.jpg);background-size: 45%;background-repeat: no-repeat;background-position: right 60%;
}.title.thin {letter-spacing: 2px;font-weight: 200;padding-top: 180px;padding-left: 120px;
}.title.thick {letter-spacing: 2px;font-weight: 200;padding-top: 200px;padding-left: 140px;
}.div-background span {display: inline-block;position: absolute;
}.div-background button{background-image: -webkit-gradient(linear, right top, left top, from(#408fff), color-stop(94%, #8065f8));background-image: linear-gradient(-90deg, #408fff, #8065f8 94%);color: #fff;margin-top: 255px;
}body {background-color: #f5f5f5;
}a {color: #333;text-decoration: none;
}.box {width: 298px;height: 415px;background-color: #fff;/* 让块级的盒子水平居中对齐 */margin: 100px 30px;display: inline-block;
}.box img {/* 图片的宽度和父亲一样宽 */width: 100%;
}.review {height: 70px;font-size: 14px;/* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;
}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;
}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;
}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;
}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 25px;
}.div-RobertAlbum {text-align: center;
}.div-RobertAlbum h4 a img {width: 25px;
}.div-RobertAlbum h4 a:hover img {width: 27px;
}.div-RobertAlbumBigTitle {font-size: 36px;color: black;font-weight: 500;
}.div-RobertAlbumCover {width: 678px;
}.div-twooperation {margin-left: 180px;width: 190px;position: absolute;padding-left: 70%;
}.div-twooperation img {height: 30px;padding-top: 10px;display: inline-block;vertical-align: middle;margin: -5px 5px 0 5px;
}.div-twooperation span {height: 30px;padding-top: 10px;display: inline-block;vertical-align: middle;margin: 0px 5px 0 5px;font-size: 18px;color: #b0b0b0;
}.div-sidebar {width: 1250px;
}.div-sidebar a {display: block;width: 180px;height: 30px;background-color: rgba(83, 87, 88,.05);text-decoration: none;text-align: left;text-indent: 20px;color: black;line-height: 30px;
}.div-sidebar a:hover {background-color: rgb(255, 111, 0);
}.div-sidebar a img {width: 15px;
}.centera a img{width: 40px;margin-bottom: 220px;
}

前端：HTML+CSS实现相册管理网站原型相关推荐

idea开发SSM框架的高校大学学生社团管理网站bootstrap自适应响应式前端(javaweb-php-asp.netC#-j2ee)包含公告管理-社团活动管理-社团申请管理-社团审核-活动报名
目录 0.效果展示 1.概述 2.社团管理网站搭建环境 3.数据表结构 4.后端代码示例 5.前端代码示例 0.效果展示 1.概述高校学生社团是高校学生依据兴趣爱好自愿组成,按照章程自主开展活动的 ...
Tomcat 配置项目到tomcat目录外面和域名绑定访问(api接口、前端网站、后台管理网站)...
先停止tomcat服务 1.进入apache-tomcat-7.0.68/conf/Catalina/localhost(如果之前还都没有启动过tomcat,是不会有此目录的,先启动一次再关闭,会自动 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)
HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
web前端期末大作业：文化网站设计——中国风文化html源码(6个页面) HTML+CSS+JavaScript...
web前端期末大作业:文化网站设计--中国风文化html源码(6个页面) HTML+CSS+JavaScript 期末作业HTML代码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
java计算机毕业设计网络游戏管理网站源程序+mysql+系统+lw文档+远程调试
java计算机毕业设计网络游戏管理网站源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计网络游戏管理网站源程序+mysql+系统+lw文档+远程调试本源码技术栈: 项目架构:B/S ...
前端学习资料及路线名称网站
IT前端学习资料及路线名称网站 JQuery文件网 https://code.jquery.com/jquery/ jQuery手册(pc端) http://jquery.cuishifeng.c ...
springboot2 使用hikaridatasource 并测试_基于Spring Boot 2.x的后端管理网站脚手，源码免费分享...
基于Spring Boot 2.x 的 Material Design 的后端管理网站脚手架 :提供权限认证用户管理菜单管理操作日志等常用功能去繁就简重新出发基于Spring Boot ...

前端：HTML+CSS实现相册管理网站原型

文章目录

1.1 相册初始界面

1.2 相册浏览界面

1.3 CSS样式文件

前端：HTML+CSS实现相册管理网站原型相关推荐

最新文章

热门文章