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;
}