前端布局与交互实现技巧

1. 保持盒子在中间位置

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

HTML 结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>居中盒子</title>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <div class="head">
        <div class="main"></div>
    </div>
</body>
</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 结构

<ul class="left fl">
    <li class="pull">
        <a href="#">移动客户端</a>
        <ul class="pull-ul">
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">新浪微博</a></li>
        </ul>
    </li>
</ul>

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 结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两栏布局</title>
    <link rel="stylesheet" href="./css/t_index.css">
</head>
<body>
    <div class="main">
        <div class="head"></div>
        <div class="container">
            <div class="left"></div>
            <div class="right">123455</div>
        </div>
    </div>
</body>
</html>

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 结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局</title>
    <link rel="stylesheet" href="./css/r_index_1.css">
</head>
<body>
    <div class="main">
        <div class="left"></div>
        <div class="container"></div>
        <div class="right"></div>
    </div>
</body>
</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 结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <link rel="stylesheet" href="./css/r_index_2.css">
</head>
<body>
    <div class="main">
        <div class="container">121121414</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

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 结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <link rel="stylesheet" href="./css/r_index_3.css">
</head>
<body>
    <div class="main">
        <div class="container">
            <div class="conf">1123114</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

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 结构

<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

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