静态页面制作心得

版权声明：~~~~~~官话之未经允许不能转载~~~~~~ https://blog.csdn.net/qq_41653587/article/details/88813157

静态页面制作心得

• 前端入门者的小白在写静态页面的时候，最好采用原生的方式，这样不但可以将自己的基础加以夯实，还可以锻炼自己页面布局的能力。
• 如果利用一些辅助搭建页面的框架或者其他的，比如layui，bootstrap等进行练习时，可能需要样式的重写覆盖。

使用layui：
		进入layui框架官网，直接下载layui包，将其拷到项目中，需要什么引入什么就可以，具体写法可以参考官网，有详细的说明。

• 通常类似于“导航栏”、“查看更多”、“立即制作”、“友情链接”等采用超链接a标签进行代码编写。

html示例代码
<ul>
	<li><a href="javascript:;">导航1</a></li>
	<li><a href="javascript:;">导航2</a></li>
	<li><a href="javascript:;">导航3</a></li>
</ul>

• 鼠标移上元素上浮效果，可以采用定位position来进行代码编写。

u>li{
	position:relative;
	//可以加过渡动画transition
	...
}
li:hover{
	top:-5px;
	...
}

• css3渐变色写法： background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

         第一个参数：表示的是渐变的类型linear线性渐变
  
         第二个参数：分别对应x，y方向渐变的起始位置
  
         第三个参数：分别对应x，y方向渐变的终止位置
  
         第四个参数：设置了起始位置的颜色
  
         第五个参数：设置了终止位置的颜色
  

• 关于页面滚动事件监听的问题：

• 关于滚动条在一定范围内只触发一次的思路：可以采用加锁的方式进行js控制

原生js写法：
<script type="text/javascript">
	var lock = true;
	window.onscroll = function(){
		let scrolltop = document.documentElement.scrollTop || document.body.scrollTop ;
		//当滚动条的垂直偏移量在大于等于100的范围内触发一次
		if(scrolltop>=100 && lock==true){
			console.log("滚动条垂直偏移量大于等于100时，我只打印一次");
			......
			//当执行完要操作的代码后要记得“关锁”
			lock = false;
		}
	}
</script>

• 如果页面中涉及视频等可能会拖慢浏览器加载时间的元素，不妨可以采用js动态加载的方式，可以加快页面的加载速度，但是要注意，最好不要设置某些元素的display来达到想要的效果，因为display属性会导致页面“回流，重绘”。