样式部分
1.主页面两边留白
.allin {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
2.inline-block导致底部对齐的解决方式
.con-left {
vertical-align: top; /*inline-block导致底部对齐的解决方式*/
}
3.label和input放在同一行的时候,导致input位置下挫
绝对定位强行拽回来。。。。。
4.文字显示一部分,后面加…
.daohang1 {
font-size: 25px;
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
display: block;
word-break: keep-all;
}
5.a标签取消下划线以及手指
a {
text-decoration: none; /*去掉下划线*/
cursor:default; /*去掉手指*/
}
页面部分
1.a标签省略号
使用title属性
2.a标签href相关
如果不需要跳转,可以加入
href=“javascript:void(0)”
即可不跳转,并且可以触发onclick属性
JS部分
1.查找的下拉框,采用隐藏的方式
function search_fun() {
labels = [];
var search = document.getElementById("key"); //获取输入的内容
show_list = document.getElementById("show_list"); //获取下拉框的div
labels = show_list.getElementsByTagName("div") //获取label
for (var b = 0; b < 5; b++) {
labels[b].style.display = "none";
}
var count = 0;
for (var index = 0; (index < select_con.length) && (count < 5) && (search.value != ""); index++) {
if (select_con[index].match(search.value)) {
labels[count].style.display = "inline-block";
labels[count].textContent = select_con[index];
count++;
}
}
}
2.导航栏定位
function window_scroll(text){
var div = document.getElementsByClassName("biaoti2"); //获取所有标题的DIV
var move_height = 0; //需要移动的距离
for (var index = 0; index < div.length; index++) {
if (div[index].textContent.match(text)) {
move_height = div[index].getBoundingClientRect().top;
break;
}
}
window.scrollTo(0, move_height);
}