前言
一个很简单的网站,适合入门html+css的编写
原网站:mjau-mjau.com
仿写的网站项目文件:https://github.com/nopapername/Copy-write-mjau-mjau.com
技术栈
html5+css3+jq基础+bootstrap4+owl carousel
页面效果预览
几个注意小点
- 页面全屏背景图随浏览器窗口大小变化,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")
}
- 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
}
}
});
-
运用jquery的 fadeIn,fadeOut,fadeToggle不起作用
原因:配置正确但是浏览器报错fadeIn is not a function,请更换jquery引用的版本(引用jq的某些精简版本的话可能不包括这些函数) -
利用锚点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;
});
- 网页固定左右两侧的伸展导航条
运用 flex 布局可实现右侧导航条向左伸展
如图效果:
仿写的网页缺点
1.运用owlcarousel组件制作轮播图后未添加 分页点
2.导航栏下拉菜单的小屏幕响应性有问题
3.未添加logo的动画效果
4.鼠标滑过图标的动画效果不优美
github:https://github.com/nopapername
(正在写一个基于vue的简历网站,还未完善,入门VUE项目)