前端布局与交互实现技巧

前端布局与交互实现技巧

1. 保持盒子在中间位置

在网页设计中，经常需要将某个元素居中显示。以下是一种常见的实现方式：

HTML 结构

CSS 样式

html, body {
    height: 100%;
}

.head {
    width: 100%;
    height: 100%;
    background-color: pink;
}

.head .main {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    height: 200px;
    margin: auto;
    background-color: #fff;
    border-radius: 10px;
}

实现原理

• 使用 position: absolute 将盒子定位为绝对定位。

• 设置 left, top, right, bottom 都为 0，使盒子撑满父容器。

• 通过 margin: auto 实现居中效果。

---

2. 鼠标经过显示多选项

在导航栏中，常常需要实现鼠标经过时显示下拉菜单的效果。

HTML 结构

    

        移动客户端
        

            
新浪微博
            
新浪微博
            
新浪微博
            
新浪微博
            
新浪微博
            
新浪微博
        
    

CSS 样式

.pull {
    position: relative;
}

.pull-ul {
    position: absolute;
    display: none;
}

.pull:hover .pull-ul {
    display: block;
}

实现原理

• 父元素 pull 使用相对定位，子元素 pull-ul 使用绝对定位。

• 默认情况下，pull-ul 隐藏，当鼠标经过 pull 时，显示 pull-ul。

---

3. 两栏布局（数据单）

两栏布局是常见的网页布局方式，通常用于侧边栏和内容区域的划分。

HTML 结构

    
    
    
    
    


    

        

        

            

            
123455
        
    

CSS 样式

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.main {
    height: 100%;
    background-color: pink;
}

.main .head {
    height: 10%;
    background-color: purple;
}

.main .container {
    height: 90%;
    background-color: aquamarine;
}

.main .container > .left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: bisque;
}

.main .container > .right {
    padding-left: 200px;
    height: 100%;
    background-color: blue;
}

实现原理

• 左侧栏使用浮动布局，右侧栏通过 padding-left 留出左侧栏的宽度。

• 确保页面放大时不会留有空隙。

---

4. 三栏布局——普通

三栏布局是网页设计中常见的布局方式，通常用于左右侧边栏和中间内容区域的划分。

HTML 结构

CSS 样式

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.main {
    height: 100%;
    background-color: aqua;
}

.main > .left,
.main > .right {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: red;
}

.left {
    left: 0;
}
.right {
    right: 0;
}
.main > .container {
    padding: 0 200px;
    height: 100%;
    background-color: aquamarine;
}

实现原理

• 左右栏使用绝对定位，中间栏通过 padding 留出左右栏的宽度。

---

5. 三栏布局——圣杯布局

圣杯布局是一种经典的三栏布局方式，中间栏优先渲染。

HTML 结构

    
    
    
    
    


    

        
121121414
        

        

    

CSS 样式

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.main {
    height: 100%;
    margin: 0 200px;
}

.main .container {
    float: left;
    width: 100%;
    height: 100%;
    background-color: purple;
}

.main .left {
    float: left;
    height: 100%;
    width: 200px;
    background-color: bisque;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.main .right {
    float: left;
    height: 100%;
    width: 200px;
    background-color: blue;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

实现原理

• 中间栏优先渲染，左右栏通过负边距和相对定位实现布局。

---

6. 三栏布局——双飞翼布局

双飞翼布局是圣杯布局的改进版，通过增加一个内部容器来实现布局。

HTML 结构

    
    
    
    
    


    

        

            
1123114
        
        

        

    

CSS 样式

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.main {
    height: 100%;
    background-color: antiquewhite;
}

.main .container {
    float: left;
    width: 100%;
    height: 100%;
    background-color: aqua;
}

.main .container .conf {
    margin-left: 200px;
    margin-right: 200px;
}

.main .left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: aquamarine;
    margin-left: -100%;
}

.main .right {
    float: left;
    width: 200px;
    height: 100%;
    background-color: blue;
    margin-left: -200px;
}

实现原理

• 中间栏通过内部容器的 margin 留出左右栏的宽度。

---

7. 拖动的模态框

模态框是网页中常见的交互组件，以下是一个可拖动的模态框实现。

JavaScript 实现

var loginEle = document.querySelector('#login')
var mask = document.querySelector('.login-bg')
var linkEle = document.querySelector('#link')
var closeBtn = document.querySelector('#closeBtn')
var title = document.querySelector('#title')

// 1. 点击弹出层，显示模态框和遮罩层
linkEle.addEventListener('click', function () {
    loginEle.style.display = 'block'
    mask.style.display = 'block'
})

// 2. 点击关闭按钮，关闭模态框和遮罩层
closeBtn.addEventListener('click', function () {
    loginEle.style.display = 'none'
    mask.style.display = 'none'
})

// 3. 实现模态框拖动
title.addEventListener('mousedown', function (e) {
    var x = e.pageX - loginEle.offsetLeft
    var y = e.pageY - loginEle.offsetTop
    document.addEventListener('mousemove', move)
    function move(e) {
        loginEle.style.left = e.pageX - x + 'px'
        loginEle.style.top = e.pageY - y + 'px'
    }
    document.addEventListener('mouseup', function () {
        document.removeEventListener('mousemove', move)
    })
})

实现原理

• 通过 mousedown, mousemove, mouseup 事件实现模态框的拖动。

• 计算鼠标在模态框内的坐标，动态设置模态框的位置。

---

8. jQuery 实现五角星评分

五角星评分是常见的用户交互组件，以下是一个简单的实现。

HTML 结构

    
☆
    
☆
    
☆
    
☆
    
☆

JavaScript 实现

$(function () {
    var wjx_none = '☆'
    var wjx_sel = '★'

    // 鼠标经过时，当前和之前的星星变为实心
    $('.comment li').on('mouseenter', function () {
        $(this)
            .text(wjx_sel)
            .prevAll('li')
            .text(wjx_sel)
            .end()
            .nextAll('li')
            .text(wjx_none)
    })

    // 鼠标离开时，根据是否有选中状态决定星星样式
    $('.comment li').on('mouseleave', function () {
        if ($('li.current').length === 0) {
            $('.comment li').text(wjx_none)
        } else {
            $('li.current')
                .text(wjx_sel)
                .prevAll('li')
                .text(wjx_sel)
                .end()
                .nextAll('li')
                .text(wjx_none)
        }
    })

    // 点击时，设置当前星星为选中状态
    $('.comment li').on('click', function () {
        $(this).attr('class', 'current').siblings('li').removeAttr('class')
    })
})

实现原理

• 通过 mouseenter, mouseleave, click 事件实现五角星的动态效果。

• 使用 current 类记录用户选择的星星。

---

以上是一些常见的前端布局和交互实现技巧，希望对您的开发工作有所帮助！