2020.6.27项目小结

最新推荐文章于 2026-01-07 00:05:42 发布

原创最新推荐文章于 2026-01-07 00:05:42 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

项目小结专栏收录该内容

1 篇文章

订阅专栏

本文分享了前端开发中常见的样式调整技巧，如解决inline-block底部对齐问题、文字溢出显示省略号等，同时介绍了JavaScript实现下拉框搜索和导航定位的功能，帮助开发者提升页面布局与交互体验。

样式部分

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);
}