[h5年度报告]1.3设置html页面背景，完善登录页面

最新推荐文章于 2022-02-10 10:49:20 发布

LVtomatoJ

最新推荐文章于 2022-02-10 10:49:20 发布

阅读量1.3k

点赞数 1

分类专栏： Web 前端文章标签： html5 html css3 移动开发

本文链接：https://blog.csdn.net/LVtomatoJ/article/details/119902820

版权

Web 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

这一节我们设置一个页面背景之后完成登录验证的界面！

一、页面背景

页面背景需要我们在网上下载一个图片

关于无版权图片可以再pixabay下载

下载好后在项目目录新建upload文件夹把下载下来的图片更改为bg.xxx放进去

然后我们只需要在swiper-slide中加入backgroud和background-size即可

    .swiper-slide{
      width:100%;
      height:100%;
      background: url("upload/bg.jpeg");
      background-size:cover;
    }

background使用url指向我们新建文件夹upload中的背景图片

background-size:cover 代表图片保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小，bg-size的属性同时还有 length|percentage|cover|contain 分别代表

length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

这个时候我们页面就变成了

我们继续进行登录页面完善

二、完成登录页面

将第一个slide（第一个页面）中内容更改为

<div style="text-align: center;position: absolute;top: 25%" >
    <h1 class="ani firstpage-title" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《生成你的专属报告》</h1>
    <p class="ani firstpage-text" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>输入你的学号：<br><input class="firstpage-text" id="idnum"></p>
    <p class="ani firstpage-text" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>输入你的姓名：<br><input class="firstpage-text" id="name"></p>
</div>

我们使用div包裹住所有元素，将div中元素进行居中

text-align:center 表示文本对齐方式为居中对齐

position:absolute 表示采用绝对值定位对应的类型还有fixed，relative，static，inherit

具体内容可以在这里了解：CSS position属性

然后我们才可以设置top为25%（距离顶部25%的宽度）

最后给标题和文字设置相应的class（firstpage-title,firstpage-text）

这下就有点样子了，然后我们根据刚设置的class调整一下文字大小！直接开始自适应

使用rem来做自适应，那rem是什么呢

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

也就是说如果我们要适配一个手机页面的尺寸只需要更改html中font-size的大小就改变所有使用rem的元素的大小

这里我们直接在head中style中添加以下内容即可，大家根据显示效果对size进行调整即可，上下不居中的话调整div中top的值！

    .firstpage-title{
      font-size: 6rem
    }
    .firstpage-text{
      font-size: 5rem
    }

最后我们的成果图就是这样啦

三、设置页面字体

对于h5来说这样默认的字体属实有点普通，所以我们后面将使用几款免费字体来进行（用图片来代替文字是更好的解决方案！字体的加载确实很费劲，虽然也可以优化但是有点走弯路的感觉）

这里我们使用站酷的免费字体：站酷免费字体

下载喜欢的字体即可，这里我下载了快乐体！下载好后解压出来一个ttf后缀的文件就是所需要的文件。在我们的项目目录中创建font文件夹并把字体移动到font文件夹中

下来我们要做的就是使用字体了

首先我们要在head中style里添加以下代码

    @font-face{
      font-family: 'klt';
      src: url("font/站酷快乐体2016修订版.ttf");
    }

关于font-face是css3的一个模块详细可以查看这里：@font-face规则

我们把对应的字体文件解释为klt（快乐体），在后面使用中只需要使用klt即可

然后我们只需要设置需要更改包含文字的元素的样式即可

在div标签内style中添加 font-family:klt，更改为如下

<div style="text-align: center;position: absolute;top: 25%;font-family: klt" >

最后我们的样式就差不多了，代码更新为：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>毕业生读书报告</title>

  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>

  <style>
    @font-face{
      font-family: 'klt';
      src: url("font/站酷快乐体2016修订版.ttf");
    }
    html{
      width: 100%;
      height: 100%;
    }
    body{
      width: 100%;
      height: 100%;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide{
      width:100%;
      height:100%;
      background: url("upload/bg.jpeg");
      background-size:cover;
    }
    .firstpage-title{
      font-size: 6rem
    }
    .firstpage-text{
      font-size: 5rem
    }
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <section class="swiper-slide">
        <div style="text-align: center;position: absolute;top: 25%;font-family: klt" >
        <h1 class="ani firstpage-title" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>《生成你的专属报告》</h1><br/>
        <p class="ani firstpage-text" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>输入你的学号：<br><input class="firstpage-text" id="idnum"></p>
        <p class="ani firstpage-text" swiper-animate-effect='zoomIn' swiper-animate-duration='2s' swiper-animate-delay='0.5s'>输入你的姓名：<br><input class="firstpage-text" id="name"></p>
        </div>
      </section>
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='fadeInUpBig' swiper-animate-duration='1s' swiper-animate-delay='0.5s'>《生成我的专属报告》</p>
      </section>
      <section class="swiper-slide">
        <p class="ani" swiper-animate-effect='bounceInLeft' swiper-animate-duration='3s' swiper-animate-delay='0.5s'>《生成他的专属报告》</p>
      </section>
    </div>
  </div>


  <script>
    const swiper = new Swiper('.swiper-container', {
      // 方向：竖向
      direction: 'vertical',
      //鼠标控制：允许
      mousewheelControl:true,
      //初始化完成后触发动画
      onInit:function(swiper){
        swiperAnimate(swiper);
      },
        //过度结束时触发动画
      onTransitionEnd:function(swiper){
        swiperAnimate(swiper);
      },
    });
  </script>
</body>
</html>

LVtomatoJ

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[h5年度报告]1.3设置html页面背景，完善登录页面

这一节我们设置一个页面背景之后完成登录验证的界面！一、页面背景页面背景需要我们在网上下载一个图片关于无版权图片可以再pixabay下载下载好后在项目目录新建upload文件夹把下载下来的图片更改为bg.xxx放进去然后我们只需要在swiper-slide中加入backgroud和background-size即可 .swiper-slide{ width:100%; height:100%; background: url("...
复制链接

扫一扫