JavaScript和CSS是前端开发中两个非常重要的技术。其中，CSS的display属性可以控制HTML元素是显示还是隐藏，而JavaScript可以结合CSS中的display属性来实现更多复杂的效果。

例如，当我们需要在页面中实现一个下拉菜单时，可以利用JavaScript和CSS实现。具体思路是：当鼠标移动到菜单项上时，利用JavaScript动态改变该菜单项所对应的下拉内容的display属性，从而实现显示菜单下拉的效果。当鼠标移开该菜单项时，我们则可以在JavaScript中将下拉内容的display属性重新设置为none，从而实现菜单下拉框的隐藏。下面是一段相关的JavaScript代码以及对应的CSS样式：

var dropdownMenu = document.getElementsByClassName("dropdown-menu")[0];
function showMenu(){
dropdownMenu.style.display = "block";
}
function hideMenu(){
dropdownMenu.style.display = "none";
}

.dropdown-menu {
display: none;
}

上述代码中，我们使用了getElementByClassName方法获取了菜单下拉框的DOM元素，然后在showMenu和hideMenu这两个函数中，分别将该元素的display属性分别设置为block和none，从而实现菜单下拉框的显示和隐藏效果。

还有另外一种常见的应用场景，就是利用JavaScript和CSS实现一个模态框弹出窗口。此时，我们同样需要使用CSS的display属性来控制模态框元素的显示和隐藏，同时，在JavaScript中，我们需要监听一些事件，如点击按钮或者按下ESC键，从而触发相关的函数，动态改变模态框元素的display属性，实现显示和隐藏效果。

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

上述代码中，我们使用了getElementById方法获取了模态框的DOM元素，然后在按钮的onclick事件和关闭按钮的onclick事件中，分别将该元素的display属性分别设置为block和none，从而实现模态框的显示和隐藏效果。同时，在window.onclick事件中，我们还监听了鼠标点击事件，判断用户是否点击在了模态框以外的地方，如果是的话，我们也将该元素的display属性设置为none，从而关闭模态框弹出窗口。

综上所述，JavaScript结合CSS中的display属性可以实现一些非常酷炫的前端效果。掌握它们的用法，可以让我们更加灵活地开发前端页面，提高我们的工作效率。