三剑客制作web浏览器页面

前言

  出于回顾之前所学web知识，也算是一种汇总！这次展示的小项目，是对html5、javascript、css3的使用。页面还是好些个缺陷，但也无法掩盖，它的优点。
  下面的阐述：这次使用技术，也算是复盘了。

---

页面展示

  接下来，会有：

1、静态图片展示

导航栏部分，我采用两种展示方式：
1、悬停改变颜色效果
2、悬停动态改变效果

1、颜色显示，未采用动画效果，采用覆盖

<ul class="navbar-nav  ">
                <li class="nav-item active">
                  <a class="nav-link anav" href="index.html" >Home </a>
                  
                </li>
                <li class="nav-item">
                  <a class="nav-link anav" href="about.html" > About </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link anav" href="watch.html" > Our VIEWS </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link anav" href="contact.html" >Contact us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link anav" href="join.html" title="登录">Log in</a>
<!--二级导航栏
                  <div class="navs2 width5">
                      <ul class="navtwo">
                         <li><a href="join2.html">Register</a></li>
                      </ul>
                  </div>
-->
                </li>
              </ul>
CSS样式
/*main page nav show hover*/
	#navbarSupportedContent .d-flex .navbar-nav .nav-item:hover .anav{
		background-color:rgba(0,0,0,0.3);
		transition:all 1s ease;
	}
	#navbarSupportedContent .d-flex .navbar-nav .nav-item:not(:hover){
		background-color:rgba(0,0,0,0.1);
	}
	#navbarSupportedContent .d-flex .navbar-nav .nav-item:nth-of-type(1){
		background-color:rgba(0,0,0,0.3);
		
	}

2、采用动画效果，多级展示

<div class="navbar-collapse agileits  collapse hover-effect" id="navbar">
	<ul class="agileits  ">
		<li class="agileits  "><a href="index.html">Home</a></li>
		<li class="agileits  "><a href="about.html">About</a></li>
		<li class="agileits  "><a href="watch.html">Our Views</a></li>
		<li class="agileits  "><a href="contact.html">Contact us</a></li>
		<li class="agileits  "><a href="join.html">Log in</a></li>
	</ul>
</div>

2、采用动画效果，多级展示

<div class="navbar-collapse agileits  collapse hover-effect" id="navbar">
	<ul class="agileits  ">
		<li class="agileits  "><a href="index.html">Home</a></li>
		<li class="agileits  "><a href="about.html">About</a></li>
		<li class="agileits  "><a href="watch.html">Our Views</a></li>
		<li class="agileits  "><a href="contact.html">Contact us</a></li>
		<li class="agileits  "><a href="join.html">Log in</a></li>
	</ul>
</div>

CSS样式
/*-- another Navbar --*/

.navbar {
	min-height: 40px;
}

.navbar-default {
	background-color: transparent;
	border-color: transparent;
	border: none;
	margin-bottom: 0;
	text-align: center;
	/*--w3layouts--*/
	/*--agileits--*/
}

.hover-effect ul {
	padding-right:40px;
	border: 2px solid #EEE;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	padding-top: 5px;
	width: 100%;
	margin: 0 auto;
}

.hover-effect li {
	overflow: hidden;
	position: relative;
	display: inline-block;
}

.hover-effect li:before, .hover-effect li:after {
	display: block;
}

.hover-effect li:before {
	bottom: 0%;
}

.hover-effect li:after {
	bottom: 50%;
}

.hover-effect a {
	backface-visibility: hidden;
	display: block;
	padding: 5px 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	line-height: normal;
	font-size: 14px;
	color: #FFF;
	font-family: 'Montserrat', sans-serif;
}

.hover-effect a:before {
	bottom: 25%;
}

.hover-effect a:after {
	bottom: 75%;
	/*--w3layouts--*/
	/*--agileits--*/
}

.hover-effect a:hover {
	color: white;
}


/*change color*/
.hover-effect li:before, .hover-effect li:after, .hover-effect a:before, .hover-effect a:after {
	background-color: #2a7ccf;
	position: absolute;
	height: 25%;
	left: 0%;
	right: 100%;
	content: '';
	z-index: -1;
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
/*time*/
.hover-effect li:before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.hover-effect li:after {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.hover-effect a:before {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.hover-effect a:after {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.hover-effect li:hover:before, .hover-effect li.current:before, .hover-effect li:hover:after, .hover-effect li.current:after, .hover-effect li:hover a:before, .hover-effect li.current a:before, .hover-effect li:hover a:after, .hover-effect li.current a:after {
	left: 0;
	right: 0;
	opacity: 1;
}

.hover-effect li:hover:before, .hover-effect li.current:before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	/*--w3layouts--*/
	/*--agileits--*/
}

.hover-effect li:hover:after, .hover-effect li.current:after {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.hover-effect li:hover a:before, .hover-effect li.current a:before {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.hover-effect li:hover a:after, .hover-effect li.current a:after {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

2、动态视频展示

由于，录屏软件的缘故。展示的效果并不理想，但大体还是差不多的。

Web Page Show

结尾

这也算是，记录一下我的前端经历了！！！额，粗略记录；
那整体资源文件，我上传了，可自行下载！
、