学习笔记

学习笔记

内容：css、js

1、 搭建 html开发环境
2、 掌握 css，js 基本语法
3、 掌握条件语句
4、 掌握循环语句
5、 聊一聊自己做的体会

---

这个小项目是在开学时根据老师要求我们自我选择模板进行修改的，比较爱玩的我选择的是旅游开发模板，他的界面都是固定的网上找来的，这里我就不多介绍了，我来说一说，我所做的内容

css实现布局以及hover的效果

采用一个div包含许多a标签，div与a标签脱离文档流，采用绝对定位，a标签使用左浮动排序。

这里是他的一个界面我刚开始觉得太丑的，就全删了，自己做了几个a标签含图片模块，当然我做的太敢了就没自己做跳转的新界面，我的a标签是链接到网络上的旅游推荐站点。

js实现获取移动标签的效果

这个是我自己做的界面，背景采用的也是之前的模板，然后，对前一个的页面的几个旅游景点进行了扩展，展示了旅游的内容，行程安排。当然文字模块的处理采用的是text-overflow和white-space的属性值，在通过hover效果实现鼠标移动就可以看到具体内容不让界面非常臃肿。这边技术部分是通过实现获取标签的内容的值与输入框的值进行比对，达到移动标签的效果。

js实现获取历史记录的效果

采用的是localStorage的getItem 和 setItem的数组，实现记录历史记录，以及采用remove方法实现清除历史记录。还有就是进行回车键的绑定，进行敲击回车键就可以是查找。

代码内容

hover实现的 代码片.

.menu:hover .menu_1{
    display: block;
}

.menu_1{
    width: 254px;
    border: 1px solid #ccc;
    line-height: 25px;
    position: absolute;
    background-color: white;
    top: 68px;
    right: -100px;
    box-shadow:  2px 2px 15px #afafaf;
    display: none; 
    /* 隐藏下拉框 */
    
}

.menu_1 > a{
    text-decoration: none;
    display: block;
    float: left;
    color: black;
    padding: 6px;
}
.menu_1 > a:hover{
    background: #3388ff;
}
//小箭头 采用border实现
.jian{
    width: 0px;
    height: 8px;
    border: 8px solid;
    border-color: transparent transparent white transparent ;
    position:absolute;
    top: -16px;
    right: 120px;
}

js移动标签部分

可以使用indexof实现，也可以使用最简单的判断实现。

// 获取input模块
var inp = document.getElementsByTagName("input");

			// 获取模块
			var div1 = document.getElementById("box1");
			...
			// 获取数值
			var fu = $("#fu").html();
			
function SOU() {
				var str = inp[0].value;
				// alert(str);
				
				//第二种判断的方法
				// var flag1 = fu.indexOf(str);
				// if (-1 != flag1) {
				// 	div2.style.top = '0px';
				// 	div2.style.display = 'block';
				// 	div1.style.display = 'none';
				// 	div3.style.display = 'none';
				// 	div4.style.display = 'none';
				// 	div5.style.display = 'none';
				// 	div6.style.display = 'none';
				// }
				// alert(flag1);
				if (!str) return; //若内容不存在即返回
				if (str == fu) {
					div2.style.top = '0px';
					div2.style.display = 'block';
					div1.style.display = 'none';
					div3.style.display = 'none';
					div4.style.display = 'none';
					div5.style.display = 'none';
					div6.style.display = 'none';
				} 
				}

总结

一个还在学习的小白，继续加油，努力学习，制作点小项目。有好的项目可以互相交流的可以私聊我呀！！加油