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

偏执的太偏执、 2022-03-18 11:54 117阅读 0赞

## 前言 ##

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

## 技术栈 ##

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

## 页面效果预览 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]

## 几个注意小点 ##

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")
      }

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

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

1.  运用jquery的 fadeIn，fadeOut，fadeToggle不起作用  
    原因：配置正确但是浏览器报错fadeIn is not a function，请更换jquery引用的版本（引用jq的某些精简版本的话可能不包括这些函数）
2.  利用锚点a标签回到网页顶部  
    HTML部分：

<div class="page-top" id="top">
    .
    .	
    .
    
    <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;
      });

1.  网页固定左右两侧的伸展导航条  
    运用 flex 布局可实现右侧导航条向左伸展  
    如图效果：  
    ![在这里插入图片描述][20190220193845901.gif]

## 仿写的网页缺点 ##

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

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

[mjau-mjau.com]: http://mjau-mjau.com
[https_github.com_nopapername_Copy-write-mjau-mjau.com]: https://github.com/nopapername/Copy-write-mjau-mjau.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]: /images/20220318/bbb103a9fb7e4fffbf1249606ea53d4c.png
[20190220193845901.gif]: /images/20220318/6bc96633869849bf9c4b606da4a709d2.png
[https_github.com_nopapername]: https://github.com/nopapername