前端第二次考核页面总结_考核的前端页面-CSDN博客

本文链接：https://blog.csdn.net/wzy0507/article/details/129459067

本周的学习重点是前端页面制作，包括理解绝对定位和相对定位的概念，熟悉数组方法，以及正则表达式的应用。实践中，通过创建轮播图来锻炼CSS和JavaScript技能，同时强调了事件处理函数如onmousemove和onmouseout的应用。还提到了var与let的区别，强调在for循环中使用let的优越性。

摘要由CSDN通过智能技术生成

第二次前端页面学习考核总结

本周一直在写页面也是有些跳过了就开始写页面了前面的有些东西还是会忘记绝对定位是相对于开启了定位的最近的父元素进行定位的相对定位是相对于自身进行定位数组的方法需要多记记学长写了正则表达式发现的问题匹配会从下一个匹配结束的点进行匹配。

知识点总结

轮播图
实现方法是创建一个展示效果的盒子然后再将ul设为他的多少倍然后设置偏移量

<div id="outer">
			<div class="arrow">
				<i class="iconfont">&#xe625;</i>
				<i class="iconfont">&#xe624;</i>
			</div>
			<div class="line">
				<i class="iconfont">&#xe60a;</i>
				<p style="width: 150px;color: white;">最新动态</p>
			</div>
			<ul id="imgList">
				<li><img src="img/01.jpg" style="width:100%;" />
					<div class="word">
					</div>
				</li>
				<li><img src="img/02.jpg" style="width:100%;" />
					<div class="word">
					</div>
				</li>
				<li><img src="img/03.jpg" style="width:100%;" />
					<div class="word">
					</div>
				</li>
				<li><img src="img/04.jpg" style="width:100%;" />
					<div class="word">
					</div>
				</li>
				<li><img src="img/05.jpg" style="width:100%;" />
					<div class="word">
					</div>
				</li>
			</ul>
			<!-- 	导航按钮 -->
			<div id="nail">
				<a herf="javascrip:;"></a>
				<a herf="javascrip:;"></a>
				<a herf="javascrip:;"></a>
				<a herf="javascrip:;"></a>
				<a herf="javascrip:;"></a>

			</div>
		</div>

// 设置单击响应函数
function myClick(idStr, fun) {
idStr.onclick = fun;
}
var develpShow = document.getElementById("develpShow");

// 获取
var header = document.querySelector(".head");
header.onmousemove = function() {
	header.style.height = "200px";
	header.classList.add('headHoverSty')
	changeColor('black')
}
console.log(header.classList, 'classList')
var logostyle = document.getElementById("logostyle");
header.onmouseover = function() {
	logostyle.style.color = "blue";
}
header.onmouseout = function() {
	logostyle.style.color = "#FFF";
	header.style.height = "40px";
	header.classList.remove('headHoverSty')
	changeColor('white')
}
var outer2 = document.getElementsByClassName("outer2")[0];
var imgList = document.getElementById("imgList");
var index = 0;
var allA = document.getElementsByTagName("a");

function setA() {}
for (let i = 0; i < allA.length; i++) {
	myClick(allA[i], function(btn) {
		clearInterval(time1);
		allA[i].style.width = "20px";
		allA[i].style.backgroundColor = "#0086B3";
		imgList.style.left = outer.offsetWidth * i * (-1) + "px";
		index = i
var time1;

function autoChange() {
	time1 = setInterval(function() {
		index++;
		index = index % 5
		imgList.style.left = parseInt(outer.offsetWidth * index * (-1)) + "px";
	}, 3000)
}
autoChange()