2020.6.27项目小结

样式部分

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);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值