mjau-mjau.com页面仿写基础总结

前言

一个很简单的网站，适合入门html+css的编写
原网站：mjau-mjau.com
仿写的网站项目文件：https://github.com/nopapername/Copy-write-mjau-mjau.com

技术栈

html5+css3+jq基础+bootstrap4+owl carousel

页面效果预览

几个注意小点

1. 页面全屏背景图随浏览器窗口大小变化，JS如下

$(window).resize(function () {
  var height = $(window).height()
  $(".carousel-item img").css("height", height + "px")
  $(".page-top").css("height", height + "px")
})
$(document).ready(function () {
  var beginHeight = $(window).height()
  $(".carousel-item img").css("height", beginHeight + "px")
  $(".page-top").css("height", beginHeight + "px")
  }

2. owl-carousel2轮播库的运用（通过查阅官方文档）
   HTML部分如下

<!-- 引用官方库中的js和css文件（依赖jq） -->
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- 轮播图div添加类owl-carousel owl-theme -->
<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

JS部分

 // 如果页面运用多个轮播组件，则分开定义对象（如var owl1，var owl2）
 var owl1 = $('.mycarousel .owl-carousel');  // 定义owl1组件对象
  owl1.owlCarousel({	// 配置相关属性（以下属性请查看官方文档）
    loop: true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 1500,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  });

3. 运用jquery的 fadeIn，fadeOut，fadeToggle不起作用
   原因：配置正确但是浏览器报错fadeIn is not a function，请更换jquery引用的版本（引用jq的某些精简版本的话可能不包括这些函数）

4. 利用锚点a标签回到网页顶部
   HTML部分：

<!-- 网页顶部id：top -->
<div class="page-top" id="top">
.
.	<!-- 中间内容 -->
.
<!-- 锚点a -->
<a id="slidea" class="up" href="#top" ></a>

JS部分

  $("#slidea").click(function () {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top - 20 + "px"
    }, 500);
    return false;
  });

5. 网页固定左右两侧的伸展导航条
   运用 flex 布局可实现右侧导航条向左伸展
   如图效果：
   

仿写的网页缺点

1.运用owlcarousel组件制作轮播图后未添加 分页点
2.导航栏下拉菜单的小屏幕响应性有问题
3.未添加logo的动画效果
4.鼠标滑过图标的动画效果不优美

github：https://github.com/nopapername
（正在写一个基于vue的简历网站，还未完善，入门VUE项目）