程序员经验分享-hwhale

网页中时光轴的简单实现

2023-05-16

       时光轴效果如下：


       鼠标滑过当前项时，左侧图标大小变大：


       index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时光轴</title>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .vertical-timeline {
            color: #FFF;
            font-family: "微软雅黑", "Microsoft YaHei";
        }

        .vertical-timeline-block {
            width: 100%;
            border-left: 2px solid #DDD;
            margin: 0 20px;
            position: relative;
            padding-bottom: 30px;
        }

        /* 时间轴的左侧图标 */
        .vertical-timeline-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            left: -22px;
            top: 10px;

            text-align: center;
            line-height: 40px;
            cursor: pointer;
            transition: all 0.2s ease-in;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
        }
        .vertical-timeline-block {
            cursor: pointer;
        }
        .vertical-timeline-block:hover .vertical-timeline-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            line-height: 50px;
            left: -27px;
            box-shadow: 0 0 5px #CCC;
            font-size: 25px;
        }

        /* 时间轴的左侧图标的各种样式 */
        .v-timeline-icon1 {
            background-color: #2aabd2;
        }
        .v-timeline-icon2 {
            background-color: #5cb85c;
        }
        .v-timeline-icon3 {
            background-color: #8c8c8c;
        }
        /* 时间轴的左侧图标上的序号*/
        .vertical-timeline-icon i {
            font-style: normal;
            color: #FFF;
        }
        /* 时间轴上的具体内容 */
        .vertical-timeline-content {
            background-color: #5bc0de;
            margin-left: 60px;
            padding: 20px 30px;
            border-radius: 5px;
            position: relative;
        }
        /* 时间轴上的具体内容左侧箭头 */
        .vertical-timeline-content:before {
            content: '';
            width: 0;
            height: 0;

            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #5bc0de;
            border-left: 10px solid transparent;

            position: absolute;
            right: 100%;
            top: 20px;
        }
        /* 时间轴的具体内容的格式 */
        .timeline-content {
            text-indent: 2em;
        }
        .time-more {
            overflow: hidden;
        }
        .time-more .time {
            float: left;
            line-height: 40px;
            display: inline-block;
        }
        .time-more .more {
            float: right;
        }
        .time-more .more a {
            display: inline-block;
            height: 20px;
            padding: 8px 15px;
            color: #FFF;
            text-decoration: none;
            font-size: 15px;
        }
        /* “更多信息”的风格 */
        .more-style1 {
            border-radius: 5px;
            background-color: #565656;
        }
        .more-style1:hover {
            background-color: #696969;
        }
        .more-style2 {
            border-radius: 5px;
            background-color: #1AB394;
        }
        .more-style2:hover {
            background-color: #18A689;
        }

        .more-style3 {
            border-radius: 5px;
            background-color: #1C84C6;
        }
        .more-style3:hover {
            background-color: #1A7BB9;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="vertical-timeline">
            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

       下面为 时光轴左侧添加 “标题”，如：



       index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时光轴</title>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .vertical-timeline {
            color: #FFF;
            font-family: "微软雅黑", "Microsoft YaHei";
            position: relative;
        }

        .vertical-timeline-block {
            width: 100%;
            border-left: 2px solid #DDD;
            margin: 0 20px;
            position: relative;
            padding-bottom: 30px;

            cursor: pointer;
        }

        /* 时间轴的左侧图标 */
        .vertical-timeline-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: absolute;
            left: -22px;
            top: 10px;

            text-align: center;
            line-height: 40px;
            cursor: pointer;
            transition: all 0.2s ease-in;
            -webkit-transition: all 0.2s ease-in;
            -moz-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
        }

        .vertical-timeline-block:hover .vertical-timeline-icon {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            line-height: 50px;
            left: -27px;
            box-shadow: 0 0 5px #CCC;
            font-size: 25px;
        }

        /* 时间轴的左侧图标的各种样式 */
        .v-timeline-icon1 {
            background-color: #2aabd2;
        }
        .v-timeline-icon2 {
            background-color: #5cb85c;
        }
        .v-timeline-icon3 {
            background-color: #8c8c8c;
        }
        /* 时间轴的左侧图标上的序号*/
        .vertical-timeline-icon i {
            font-style: normal;
            color: #FFF;
        }
        /* 时间轴上的具体内容 */
        .vertical-timeline-content {
            background-color: #5bc0de;
            margin-left: 60px;
            padding: 20px 30px;
            border-radius: 5px;
            position: relative;
        }
        /* 时间轴上的具体内容左侧箭头 */
        .vertical-timeline-content:before {
            content: '';
            width: 0;
            height: 0;

            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #5bc0de;
            border-left: 10px solid transparent;

            position: absolute;
            right: 100%;
            top: 20px;
        }
        /* 时间轴的具体内容的格式 */
        .timeline-content {
            text-indent: 2em;
        }
        .time-more {
            overflow: hidden;
        }
        .time-more .time {
            float: left;
            line-height: 40px;
            display: inline-block;
        }
        .time-more .more {
            float: right;
        }
        .time-more .more a {
            display: inline-block;
            height: 20px;
            padding: 8px 15px;
            color: #FFF;
            text-decoration: none;
            font-size: 15px;
        }
        /* “更多信息”的风格 */
        .more-style1 {
            border-radius: 5px;
            background-color: #565656;
        }
        .more-style1:hover {
            background-color: #696969;
        }
        .more-style2 {
            border-radius: 5px;
            background-color: #1AB394;
        }
        .more-style2:hover {
            background-color: #18A689;
        }

        .more-style3 {
            border-radius: 5px;
            background-color: #1C84C6;
        }
        .more-style3:hover {
            background-color: #1A7BB9;
        }

        .vtb-tit {
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
            text-align: center;

            background-color: #1A7BB9;
            border-radius: 5px;

            position: absolute;
            left: -120px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="vertical-timeline">
            <div class="vtb-tit">
                总时间点1
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1<a href="javascript:void(0)" class="del-timeline-block"></a></h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>

        <div class="vertical-timeline">
            <div class="vtb-tit">
                总时间点2
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>

        <div class="vertical-timeline">
            <div class="vtb-tit">
                总时间点2
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">1</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style1"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">2</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点2</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style2"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">3</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点3</h2>
                    <p class="timeline-content">我去吃了个午饭</p>
                    <p class="time-more">
                        <span class="time">2016/4/30 13:48</span>
                        <span class="more more-style3"><a href="#">更多信息</a></span>
                    </p>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon1">
                    <i class="icon">4</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon2">
                    <i class="icon">5</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>

            <div class="vertical-timeline-block">
                <div class="vertical-timeline-icon v-timeline-icon3">
                    <i class="icon">6</i>
                </div>

                <div class="vertical-timeline-content">
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                    <h2>时间点1</h2>
                </div>
            </div>
        </div>
    </div>
</body>
</html>



本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

网页中时光轴的简单实现 的相关文章

  • 使用jQuery、js实现必应搜索制作

    实现过程参考自 慕课网 xff0c 有关具体详情可参考视频 实现必应搜索制作 xff0c 结果如下 xff1a 点击提示框中的选项进行对应的跳转 xff08 在当前页面 xff09 xff1a 使用Ajax提交http请求 xff0c 从必

  • 网页在IE6下可能出现的小问题

    我们制作网页过程中 xff0c 需要对网页进行调试以兼容不同浏览器 这里使用IETester 针对网页在IE6进行调试 xff0c 解决一些可能出现的问题 1 在IE6可能会出现双边距 双边距出现的条件是当浮动元素的浮动方向和margin的

  • 雅虎WEB前端网站优化 -- 34条军规

    转载自 xff1a 点击打开链接 雅虎给出了优化网站加载速度的34条法则 xff08 包括Yslow规则22条 xff09 详细说明 xff0c 下载转发 ponytail 的译文 xff08 来自帕兰映像 xff09 1 Minimize

  • 91. Decode Ways（解码方法）

    这道题的关键在于推导出递推公式 xff0c 这里我将存储的数组定义为code xff0c 字符串为s xff0c code i 代表前i个字符可解码的数量 xff0c 即code i 代表的是s i 1 及之前字符的总解码数量 很明显可知c

  • PHP中的字符串定义——Heredoc结构形式

    在php中字符串类型可以用三种方法定义 xff1a 单引号形式 双引号形式和Heredoc结构形式 单引号形式和双引号的定义形式如下 xff1a lt php str string1 61 39 我是字符串 39 单引号 str strin

  • php get_magic_quotes_gpc()函数用法介绍

    转载自 xff1a 点击打开链接 magic quotes gpc函数在php中的作用是判断解析用户提示的数据 xff0c 如包括有 post get cookie过来的数据增加转义字符 xff0c 以确保这些数据不会引起程序 xff0c

  • PHP 单一入口

    转载自 xff1a 点击打开链接 单一入口概述 单一入口的应用程序就是说用一个文件处理所有的HTTP请求 xff0c 例如不管是列表页还是文章页 xff0c 都是从浏览器访问index php文件 xff0c 这个文件就是这个应用程序的单一

  • PHP下的MVC

    学习资源来自于慕课网 先来一个简单的Demo SimpleDemo 控制器C testController class php lt php class testController function show 控制器的作用是调用模型 xf

  • PHP操作mysql类的封装

    版本一 xff1a lt php 这是一个工具类 xff0c 作用是完成对数据库的操作 class SqlHelper public conn public dbname 61 34 test 34 public username 61 3

  • 简单新闻发布系统前台界面（html+css）

    运行效果如下 xff1a 图片素材 xff1a bg jpg header shadow png news icon png index html lt DOCTYPE html gt lt html lang 61 34 zh CN 34

  • 视图引擎Smarty的简单使用

    参考 xff1a http www jb51 net article 5091 htm 参考 xff1a http baike baidu com link url 61 FFySw2r dsE lTdQgGy2DpLhciXM JqUag

  • 简易 文章发布系统——后台管理系统

    来自于慕课网的学习 这里建立一个简易的文章发布系统 后台管理系统 xff0c 功能包括 文章的发表 查看文章列表 xff0c 其中还提供对文章的删除和修改功能 首先使用mysql建立数据库 info xff0c 在info数据库中建立一张

  • 简易 文章发布系统——前台界面

    续 简易 文章发布系统 后台管理系统 源自 慕课网 的学习 关于简易文章发布系统 后台管理系统大致已经制作完毕 xff0c 但是从安全方面来看 xff0c 程序质量不高 xff0c 只适合初学者进行学习开发 xff0c 掌握php的开发流程

  • PHP实现页面静态化——全部纯静态化

    先来看看php在服务器的执行过程 xff1a 当用户请求服务器php文件的时候 xff0c 服务器将对php文件进行语法分析 xff0c 其次是解析 xff0c 最后才运行 当php文件有内容输出时 xff0c 该内容会先经过服务器的php

  • PHP实现页面静态化——局部动态化

    上回说到 xff1a PHP实现页面静态化 全部纯静态化 这次实现PHP的局部动态化 xff0c 也就是说静态化的页面存在 动态 过程 xff0c 结合全部静态化技术 43 Ajax技术实现局部动态化 xff0c 局部更新页面 在上文的数据

  • CSS3的过渡 transition

    这里只考虑 chrome 的兼容 transition html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 3

  • CSS3中的3D旋转 rotate、3D位移 translate

    这里只考虑 chrome 的兼容 3DrotateDemo html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8

  • CSS3让登陆面板旋转起来

    这里只考虑chrome的兼容 LoginRotate html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34

  • CSS3 卡片翻转(transform)

    这里只考虑chrome的兼容 card1 html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt

  • 他们的CSS3 3D正方体

    摘自 xff1a 程旭元 所分享的程序 效果图如下 xff1a cube html lt DOCTYPE html gt lt html lang 61 34 zh CN 34 gt lt head gt lt title gt 3D正方体

随机推荐

  • html自定义复选框

    自定义复选框的素材 xff1a icon check circle png icon checked png checkbox html xff08 为了方便起见 xff0c 这里使用到了jQuery xff09 lt DOCTYPE ht

  • CSS3的基本介绍

    知识点记录 xff1a 1 圆角效果 border radius 如 xff1a border radius 10px 所有角都使用半径为10px 的圆角 border radius 5px 4px 3px 2px 四个半径值分别是左上角

  • CSS3选择器（上）

    1 属性选择器 E att 61 val 选择匹配元素 E xff0c 且 E元素定义了属性 att xff0c 其属性值以 val开头的任何字符串 E att 61 val 选择匹配元素 E xff0c 且 E元素定义了属性 att xf

  • CSS3实现曲线阴影和翘边阴影

    效果图如下 xff1a index html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt ti

  • THINKPHP 数据操作方法

    一 ThinkPHP Insert 添加数据 ThinkPHP 内置的 add 方法用于向数据表添加数据 xff0c 相当于 SQL 中的 INSERT INTO 行为 添加数据 add 方法是 CURD xff08 Create Upda

  • PHP文件上传的实现及其介绍

    关于实现及介绍在程序注释中 提交文件的页面 xff1a xff08 可以分别提交到doAction php doAction1 php doAction2 php进行测试 xff09 upload php lt doctype html g

  • PHP单文件上传的过程化函数封装

    提交文件的页面 xff1a upload php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt

  • PHP的单个文件上传、多个单文件上传、多文件上传

    单文件上传 upload1 php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title g

  • PHP实现单文件上传、多个单文件上传、多文件上传的过程化封装

    上回提到 PHP的单个文件上传 多个单文件上传 多文件上传 这里给出 三种方式的统一实现 下面先给出各种方式的文件提交页面 xff1a 单个文件上传 upload1 php lt doctype html gt lt html lang 6

  • PHP的单文件上传类

    提交单文件的页面 upload php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title

  • PHP的多文件上传类

    提交表单的页面 upload php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title

  • Nginx负载均衡配置实例详解

    转载自 xff1a http www php100 com html program nginx 2013 0905 5525 html 负载均衡是我们大流量网站要做的一个东西 xff0c 下面我来给大家介绍在Nginx服务器上进行负载均衡

  • 基于Bootstrap使用jQuery实现简单可编辑表格

    editTable js 提供编辑表格当前行 添加一行 删除当前行的操作 xff0c 其中可以设置参数 xff0c 如 xff1a operatePos 用于设置放置操作的列 xff0c 从0开始 xff0c 1表示以最后一列作为放置操作的

  • ThinkPHP 大D方法思想下的JDBC操作数据库D类

    这里我封装出来的D 类 xff0c 是根据 ThinkPHP 中的 D 方法中做出来的 xff0c 其中有些出入的地方 xff0c 我进行了一些个性化的修正 xff0c 如 xff1a ThinkPHP 中操作数据库时 xff0c 需要在配

  • 基于MVC设计模式实现简单PHP框架（雏形）-初期

    xff08 记住 xff1a 这里只是提供思考的过程 xff09 其实这里只是一个我们课的Web实验 课程设计题目统计系统 xff0c 在做实验的过程中起初只是想往MVC靠拢而已 xff0c 却不知不觉地 实现 了基于MVC的简单框架的雏形

  • Rocketmq入门介绍

    目录 一 Rocketmq优势 二 Rocketmq与其他MQ对比 三 MQ基本概念 四 RocketMQ的4个组件 五 集群部署结构 工作流程 xff1a 模块功能特性 xff1a Nameserver Broker 生产者 Produc

  • 我的简单PHP框架——LabPHP

    就我上次提到的 基于MVC设计模式实现简单PHP框架 xff08 雏形 xff09 初期 这次列出我实现的LabPHP简易框架 xff0c 该框架中没有使用任何的模板引擎 xff0c 所以说要在模板中使用到php变量的话 xff0c 仍然需

  • 我的LabPHP框架的Demo应用——课程设计题目统计系统

    1 界面制作 xff08 为了方便起见 xff0c 这里我采用了Bootstrap 框架制作界面 xff09 xff1b 2 数据库设计 xff0c 正确创建students 表 xff1b admin表 xff1a 3 项目目录结构如下

  • 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

    注意这里要求使用到Bootstrap框架的输入框组 xff0c 如 xff1a lt div class 61 34 row 34 gt lt div class 61 34 col lg 6 34 gt lt div class 61 3

  • 网页中时光轴的简单实现

    时光轴效果如下 xff1a 鼠标滑过当前项时 xff0c 左侧图标大小变大 xff1a index html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta

热门标签