初学html第六篇章之项目展示《个人相册》

最新推荐文章于 2024-03-29 08:47:36 发布

weixin_44703686

最新推荐文章于 2024-03-29 08:47:36 发布

阅读量316

点赞数

分类专栏：网页html类文章标签： html

本文链接：https://blog.csdn.net/weixin_44703686/article/details/117739987

版权

本文记录了作者在学习html过程中制作个人相册项目的经历，包括对html、css布局和js框架的理解。作者强调了面对困难时保持良好心态的重要性，并分享了项目的登录、注册和相册页面的组成部分。

摘要由CSDN通过智能技术生成

通过接近两周的学习，不仅对html学习有了深刻的理解，了解了其基本属性，还对css的布局和js的框架都有了不同的认识，相信对于以后的学习生活来说，会有很大的启示作用，并能促进本身的进步。

在努力过程中，每个人无论处在怎样的年龄，身在怎样的境遇，有着怎样的经历，都会面对许多麻烦和困难。其实大多数时候，我们之所以会感到烦恼，并非由外因导致。是你的心态和状态，决定和影响了你的情绪。所以，无论面对什么都要以饱满的精神和平和的心态去面对，积极的进取。勇于去奋斗和努力，付出与回报不一定是等恒的，但是不付出永远不会有回报。

《个人相册》的登录、注册页面以及相册页面：

分别分为三部分：index.html; login.html; register.html ,代码如下所示：

index.html

<!DOCTYPE HTML>
<html>

<head>
   <title>界面</title>
   <meta charset="utf-8">
   <style type='text/css'>
      * {
         margin: 0;
         padding: 0;
      }

      body {
         background-image: url(./images/team.jpg);
         background-size:100% 100%; 
         background-attachment: fixed;
         overflow: hidden;
      }

      #perspective {
         perspective: 800px;
      }

      #wrap {
         width: 120px;
         height: 180px;
         margin: 0 auto;
         position: relative;
         transform-style: preserve-3d;
         transform: rotateX(-10deg) rotateY(0deg);
         animation: fn 10s;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
         position: relative
      }


      @keyframes fn {
         0% {
            transform: rotateX(-15deg) rotateY(0deg);
         }

         100% {
            transform: rotateX(-15deg) rotateY(360deg);
         }

      }

      @-moz-keyframes fn {
         0% {
            transform: rotateX(-15deg) rotateY(0deg);
         }

         100% {
            transform: rotateX(-15deg) rotateY(360deg);
         }
      }

      @-ms-keyframes fn {
         0% {
            transform: rotateX(-15deg) rotateY(0deg);
         }

         100% {
            transform: rotateX(-15deg) rotateY(360deg);
         }
      }

      @-webkit-keyframes fn {
         0% {
            transform: rotateX(-15deg) rotateY(0deg);
         }

         100% {
            transform: rotateX(-15deg) rotateY(360deg);
         }
      }

      #wrap img {
         width: 100%;
         height: 100%;
         position: absolute;
         border-radius: 1px;

         transform: rotateY(0deg) translateZ(0px);
         -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
      }

      #wrap p {
         width: 1200px;
         height: 1200px;
         background: -webkit-radial-gradient(center center, 600px 600px, rgba(244, 23, 234, 0.2), rgba(0, 0, 0, 0));
         border-radius: 100%;
         position: absolute;
         left: 50%;
         top: 102%;
         margin-left: -600px;
         margin-top: -600px;
         transform: rotateX(90deg);
      }

      .div_title {
         position: absolute;
         z-index: 1;
         width: 100%;
         height: 80px;
         top: 0%;
         background: rgb(255, 255, 255);
      }

      .div_title2 {
         position: absolute;
         z-index: 2;
         width: 100%;
         height: 60px;
         top: 50%;
         margin-top: -30px;
         background: #474745;
      }

      .div3 {
         position: absolute;
         z-index: 3;
      }

      .div4 {
         position: absolute;
         z-index: 4;
      }

      .div_title_1 {
         left: 0px;
         width: 300px;
         height: 60px;

      }

      .div_title_1 font {
         color: aliceblue;
      }

      .div_title_div_1 {
         width: 300px;
         height: 20px;
         top: 50%;
         margin-top: -12px;

      }

      .div_title3 {
         width: 240px;
         height: 60px;
         left: 100%;
         margin-left: -240px;
      }

      .button1 {
         margin-top: 1px;
         color: white;
         padding: 16px 32px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 16px;
         -webkit-transition-duration: 0.4s;
         transition-duration: 0.4s;
         cursor: pointer;
         background-color: #474745;
         color: rgb(255, 255, 255);
         border: 2px solid #474745;
      }

      .button1:hover {
         background-color: #008CBA;
         color: white;
      }

      .button2 {
         margin-top: 1px;
         color: #474745;