你的美，让我痴迷
你的美，让我痴迷

图片轮播组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
        }
        
        .image-slider {
            width: 100vw;
            height: 100vh;
        }
        
        .image-slider .slide {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: all linear 0.8s;
            overflow: hidden;
        }
        
        .image-slider .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            z-index: 50;
        }
        
        .image-slider .slide .content {
            position: absolute;
            z-index: 100;
            color: white;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 48px;
            bottom: 0;
            width: 50%;
        }
        
        .image-slider .slide .content h1 {
            margin-bottom: 24px;
        }
        
        #prev,
        #next {
            position: absolute;
            z-index: 150;
            width: 80px;
            height: 80px;
            font-size: 48px;
            color: white;
            text-align: center;
            line-height: 80px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            top: calc(50% - 24px);
            left: 50px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        #next {
            left: unset;
            right: 50px;
        }
        
        .image-slider .slide {
            opacity: 0;
        }
        
        .image-slider .slide.current {
            opacity: 1;
        }
        
        .image-slider .slide .content {
            opacity: 0;
            transform: translateY(500px);
        }
        
        .image-slider .slide.current .content {
            opacity: 1;
            transform: translateY(0);
            transition: all ls ease-in-out 0.4s;
        }
        
        #prev:hover,
        #next:hover {
            background-color: rgba(255, 255, 255, 0.6);
            color: black;
        }
        
        @media screen and (max-width:960px) {
            .image-slider .slide .content {
                width: 100%;
            }
            #prev,
            #next {
                font-size: 24px;
                left: 24px;
                width: 48px;
                height: 48px;
                line-height: 48px;
                top: 40%;
            }
            #next {
                left: unset;
                right: 24px;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="image-slider">
            <div class="slide current">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.g4s6qKV59Lvgz_1yyxc8CgHaEd?w=315&h=190&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="image" alt="">
                <div class="content">
                    <h1 class="title">北京</h1>
                    <div class="description">北京市（Beijing），简称“京”，古称燕京、北平，是中华人民共和国首都、直辖市、国家中心城市、超大城市， [185]国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心， [1]中国历史文化名城和古都之一，世界一线城市。 [3] [142] [189]截至2023年10月，北京市下辖16个区，总面积16410.54平方千米。 [82] [195] [197]2022年末，北京市常住人口2184.3万人。</div>
                </div>
            </div>
            <div class="slide  ">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.mq-6WL2jvXbCpe1ISe0D5wHaE8?w=261&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="image" alt="">
                <div class="content">
                    <h1 class="title">武汉</h1>
                    <div class="description">武汉市，简称“汉”，别称江城，湖北省辖地级市、省会，副省级市、国家中心城市、超大城市 [200]，国务院批复确定的中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽 [1]，中国人民解放军联勤保障部队机关驻地 [207]。全市下辖13个区，总面积8569.15平方千米。截至2022年末，常住人口1373.90万人，地区生产总值18866.43亿元 </div>
                </div>
            </div>
            <div class="slide  ">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.l1RbUCqk1BKmLzRIy1v26gHaEo?w=285&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="image" alt="">
                <div class="content">
                    <h1 class="title">上海</h1>
                    <div class="description">上海市，别称沪、申 [218]，是中华人民共和国直辖市、中国共产党诞生地、国家中心城市、超大城市 [209]、上海大都市圈核心城市、中国历史文化名城、世界一线城市。 [229]上海市基本建成国际经济、金融、贸易、航运中心，形成具有全球影响力的科技创新中心基本框架。 [1] [211] [219]上海市总面积6340.5平方千米。 [4] [179]截至2022年，上海市常住人口为2475.89万人。 [187]截至2023年10月，上海市下辖16个区，市人民政府驻上海市黄浦区人民大道200号。</div>
                </div>
            </div>
            <div id="prev">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div id="next">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </header>
    <script>
        //后退按钮
        const prev = document.querySelector("#prev");
        //前进按钮
        const next = document.querySelector("#next");

        // 所有幻灯片
        const slides = document.querySelectorAll(".slide");

        // 当前正在播放的幻灯片
        var currentIndex = 0;

        // 是否自动播放
        var autoPlay = true;

        // 播放方向，前进或后退
        var forward = false;

        // 自动播放间隔，5秒
        var interval = 5000;

        // 添加前进按钮事件处理函数
        next.addEventListener("click", handleNextClicked);

        // 添加后退按钮事件处理函数
        prev.addEventListener("click", handlePrevClicked);

        // 是否自动播放
        if (autoPlay) {
            setInterval(forward ? handleNextClicked : handlePrevClicked, interval);
        }

        function handleNextClicked() {
            //当前幻灯片
            let current = slides[currentIndex];
            // 去掉当前幻灯片的current属性
            current.classList.remove("current");

            //移动到下一张幻灯片，如果没有，则从第一张开始
            currentIndex++;
            if (currentIndex >= slides.length) {
                currentIndex = 0;
            }
            // 给下一张幻灯片加上current class
            slides[currentIndex].classList.add("current");
        }

        function handlePrevClicked() {
            //当前幻灯片
            let current = slides[currentIndex];
            // 去掉当前幻灯片的current属性
            current.classList.remove("current");

            //移动到上一张幻灯片，如果没有，则从最后一张开始
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = slides.length - 1;
            }
            // 给下一张幻灯片加上current class
            slides[currentIndex].classList.add("current");
        }
    </script>
</body>

</html>

效果图：

你可能感兴趣的:(css,前端)

  • css 实现一个卡片 很菜很菜的人 cssjavascript前端
    Document.box{width:300px;height:400px;}.code{height:100px;width:360px;margin-left:-30px;background-color:white;clip-path:inset(0000round0035%35%);margin-bottom:-30px;position:relative;}.inner{width:26
  • VSCode+Vue代码调试设置
    这几天整了个Springboot+VUE的学生管理系统代码学习，自己也建了个项目边学习边开发，用VSCode调试VUE前端代码时，两个项目出现了不同情况的无法打断点的问题，现在这里记录一下解决办法。首先是买的这个代码，调试环境launch.json等就不说了，网上一大堆，主要问题是配置好调试环境后，打断点都显示未绑定到代码，后来查到是要添加源映射，都说要在index.js或者vue.config.
  • React 基本介绍与项目创建 AAA小土豆 react.jsarcgis前端
    为什么使用React以及前端框架工作原理React通过构建虚拟DOM（VirtualDOM）来高效管理界面。当组件的状态或属性发生变化时，React会重新渲染生成新的虚拟DOM，并通过Diff算法找出新旧虚拟DOM树之间的差异，最终仅将发生变化的部分同步到真实DOM中。这种方式避免了不必要的DOM操作，从而提升性能。div:Apph1:Titlediv:Contentp:HelloWorldbut
  • 前端领域 npm 与跨平台开发适配 大厂前端小白菜 前端开发实战前端npmarcgisai
    前端领域npm与跨平台开发适配关键词：前端开发、npm、跨平台开发、依赖管理、适配策略摘要：本文围绕前端领域中npm与跨平台开发适配展开深入探讨。首先介绍了npm在前端开发中的重要性以及跨平台开发的背景和挑战。接着详细阐述了npm的核心概念、工作原理，以及在跨平台开发中可能遇到的适配问题。通过具体的算法原理和Python示例代码，解释了如何利用npm进行依赖管理和跨平台开发的相关操作。还给出了数学
  • 前端开发者必知：npm的实用技巧大揭秘 前端视界 前端大数据与AI人工智能前端艺匠馆npm前端node.jsai
    前端开发者必知：npm的实用技巧大揭秘关键词：npm、包管理、前端开发、依赖管理、Node.js、脚本优化、安全最佳实践摘要：本文深入探讨npm(NodePackageManager)在前端开发中的实用技巧和高级用法。从基础概念到高级功能，我们将逐步解析如何高效使用npm管理项目依赖、优化构建流程、提升开发效率。文章包含详细的代码示例、最佳实践建议以及常见问题的解决方案，帮助开发者掌握npm的核心
  • Electron 快速上手 AAA小土豆 electronarcgisjavascript
    技术栈Web技术包括HTML、CSS、JavaScript和WebAssembly。它们是现代互联网的基石。这些技术已成为构建用户界面的最佳选择——无论是对于消费者应用程序还是关键业务型应用程序。这不仅适用于需要在浏览器中运行的应用程序，也适用于那些无法通过浏览器访问的桌面应用程序。我们在此大胆断言，这不仅适用于需要在多个操作系统上运行的跨平台应用程序，而且适用于所有类型的应用程序。Electro
  • i18next + 原生JS 双引擎：打造前端多语言系统最佳实践 javascript前端css
    摘要随着前端项目面向全球化用户的需求增长，多语言支持（也叫国际化i18n）已经成为许多Web和移动应用的“标配”。尤其在构建企业级项目、SaaS平台或面向东南亚、欧洲、北美等多个语言区域的应用时，如何优雅地实现前端的多语言切换，成为开发者必须掌握的一项技能。本文将通过i18next实现国际化功能，并结合原生JS的轻量方案讲解，从基础配置到应用场景逐步剖析，带你快速落地一个实用的前端国际化系统。引言
  • 面试版-前端开发核心知识
    一、DOM操作与事件处理：用户交互的基石1.1原生点击事件的三种绑定方式前端与用户的交互始于事件，而点击事件是最基础的交互方式。原生JavaScript绑定点击事件主要有以下三种方式：（1）HTML内联绑定（不推荐）直接在HTML标签中通过onclick属性定义事件逻辑：点击我functionhandleClick(){console.log('内联事件触发');}缺点：HTML与JS逻辑耦合，无
  • react+antd Anchor(锚点组件)通讯录字母索引实现 伍哥的传说 前端源码分享react.js前端前端框架javascriptecmascriptreactjsreact
    一、页面概述本项目实现了一个美观、实用的通讯录页面，采用React框架，结合AntDesign组件库与TailwindCSS原子化样式，支持按字母分组展示联系人，并提供便捷的字母索引导航。页面设计现代，交互流畅，适用于各类需要联系人管理的Web应用。二、功能特点字母分组展示联系人自动按姓名首字母分组，分组标题悬浮吸顶，便于快速定位。字母索引导航右侧集成AntDesignAnchor组件，点击字母可
  • 前端领域HTML的表单美化技巧 前端视界 前端htmlai
    前端领域HTML的表单美化技巧关键词：HTML表单、CSS美化、用户体验、交互设计、响应式布局、表单验证、前端框架摘要：本文将深入探讨HTML表单的美化技巧，从基础CSS样式到高级交互效果，全面解析如何提升表单的视觉吸引力和用户体验。我们将通过详细的代码示例、设计原则和实战案例，帮助开发者掌握表单美化的核心技能，包括响应式设计、动画效果、自定义组件等前沿技术。1.背景介绍1.1目的和范围本文旨在为
  • Fiddler中文版抓包工具如何帮助前端开发者高效调试 HTTPwise httpudphttpswebsocket网络安全网络协议tcp/ip
    前端开发早已不再是“写好页面就完事”的工作。随着业务复杂度提升，前端开发者需要直面接口联调、性能优化、跨域排查、HTTPS调试等一系列和网络请求紧密相关的任务。抓包工具成为这些环节中不可替代的得力助手，而Fiddler抓包工具因其全面的功能和灵活的配置能力，被无数开发者选作日常调试首选。然而，Fiddler并不是万能工具，只有与Postman、Charles等常用工具协同使用，才能让调试效率最大化
  • Whistle代理调试前端项目的原理详解 啃火龙果的兔子 开发DEMO前端
    Whistle是一款基于Node.js开发的跨平台Web调试代理工具，主要用于前端开发调试。其核心原理是通过中间人(MITM)代理机制拦截和修改网络请求。一、核心工作原理1.代理服务器架构Whistle本质上是一个HTTP/HTTPS代理服务器，工作流程如下：[浏览器]→[Whistle代理]→[目标服务器]↑↓[规则引擎]←[开发者配置]2.请求拦截机制HTTP请求：直接作为中间代理拦截HTTP
  • vue根据链接生成二维码 qrcode youyu-youyu vue.jsjavascriptecmascript
    vue根据链接生成二维码qrcodejs需求：后端返回一个完整链接，前端根据链接生成一个二维码1、安装qrcode插件npminstallqrcode2、引入qrcode,并且使用完整代码importQRCodefrom'qrcode';//引入生成二维码插件exportdefault{data(){const_this=this;return{qrcodeData:'',optionsObj:{
  • Webpack 5 核心机制详解与打包性能优化实践
    作者简介：水煮白菜王，一个web开发工程师文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。感谢支持目录Webpack5相较于Webpack4的主要改进安装生命周期CompilerHooksusehookswebpack中的loader（转换器）工作原理常用loader自定义loaderwebpack中的plugins（插件）工作原理自定义plugins打包过程加
  • Web Workers在前端性能优化中的深度实践：从多线程编程到任务调度策略 瑕疵 热点资讯前端性能优化
    博客主页：瑕疵的CSDN主页Gitee主页：瑕疵的gitee主页⏩文章专栏：《热点资讯》WebWorkers在前端性能优化中的深度实践：从多线程编程到任务调度策略WebWorkers在前端性能优化中的深度实践：从多线程编程到任务调度策略WebWorkers在前端性能优化中的深度实践：从多线程编程到任务调度策略引言一、WebWorkers基础与工作原理1.1WebWorkers的核心特性1.2Web
  • 深入理解浏览器重排（Reflow）与重绘（Repaint）及性能优化策略 じ☆ve 清风° 前端面试性能优化
    引言在现代Web开发中，性能优化是一个永恒的话题。理解浏览器的渲染机制，特别是重排（Reflow）和重绘（Repaint）过程，对于构建高性能的Web应用至关重要。本文将深入探讨这两个概念，分析它们对性能的影响，并提供一系列实用的优化策略。一、浏览器渲染流程概述在深入重排和重绘之前，我们需要了解浏览器如何将HTML、CSS和JavaScript转换为用户可见的像素：解析HTML：构建DOM树解析C
  • 鸿蒙设备开发OpenHarmony源码分析之分布式软总线：authmanager/auth_conn.c 你我皆是牛马星人 鸿蒙开发OpenHarmonyHarmonyOSharmonyos分布式c语言openHarmony鸿蒙开发软总线源码分析
    往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……一、概述本
  • React中理念梳理 gzzeason react.jsjavascript前端
    文章总结来自：React官方文档和React设计原理（作者：卡怂）一、UI=f(state)在现代前端库中，公式UI=f(state)囊括了大部分实现原理，意思是框架内部运行机制根据当前状态渲染视图，其中：UI：宿主环境的视图f：框架内部运行机制state：当前视图状态React原理也依据上述公式。React开发团队认为，UI与逻辑存在耦合的部分，这个耦合部分就是组件，开发者可以：在UI上绑定事件
  • Python, Go, C ++开发农业/工业/服务业利润率查询APP Geeker-2025 pythongolangc语言
    #Python、Go、C++开发农业/工业/服务业利润率查询APP方案我将为您设计一个覆盖农业、工业、服务业三大产业，包含10000+种业务的利润率查询应用，结合Python、Go和C++的技术优势，提供全面的利润分析和市场洞察。##系统架构设计```前端(Flutter)GoAPI服务层C++数据处理引擎Python分析层││││├─行业查询──────────────>││││├─>数据检索请
  • docker-compose一键部署全栈项目。springboot后端，react前端 zwjapple 前端dockerspringboot
    部署总览前端打包:我们将配置package.json，使用npmrunbuild(内部调用vitebuild)来打包。这个过程将完全在Docker构建镜像的过程中自动完成，你的主机上甚至不需要安装Node.js。后端打包:我们将配置pom.xml，使用mvncleanpackage来打包。这一步需要在执行DockerCompose之前手动完成一次，以生成JAR文件。部署:使用docker-comp
  • 最快实现的前端灰度方案 前端程序员
    小白最快学会的前端灰度方案首次访问效果如下，点击立即更新会访问灰度版本。本地cookie存在version字段后，后续访问都是指定版本代码，也不会出现弹窗提示一、引言：为什么需要灰度发布？1.1血泪教训：全量发布的风险因为一次上线，导致登录异常，用户无法使用。复盘时候，测试反馈预发环境不能完全模拟出生成环境。要不做一个灰度发布，实现代码最小化影响。1.2技术思考：面试的需要多了解点技术方案，总没有
  • UniApp（vue3+vite）如何原生引入TailwindCSS（4） 前端 贾公子 uni-app
    目录npx开始使用TailwindCSS1.安装Node.js和cnpm2.使用VScode创建uni-app项目开始使用TailwindCSS1.安装TailwindCSS2.配置Vite插件3.修改配置4.导入TailwindCSS5.开始在HTML中使用Tailwind总结npx实际上，npxdegit和gitclone都能用来获取代码仓库中的模板或项目，但是它们的实现方式和用途有所不同。让
  • 前端渲染大量图片的首屏加载优化方案 啃火龙果的兔子 开发DEMO前端
    渲染大量图片时，首屏加载性能至关重要。以下是全面的优化方案：一、图片资源优化1.图片格式选择WebP格式：比JPEG小25-35%，支持透明AVIF格式：新一代格式，压缩率更高（Chrome/Firefox支持）渐进式JPEG：逐步加载显示SVG：适合图标/简单图形2.图片压缩使用工具压缩：TinyPNG、Squoosh、ImageOptim服务端自动压缩：Sharp（Node.js）、Pillo
  • HTML之表单结构全解析 AA-代码批发V哥 HTMLhtml前端
    HTML之表单结构全解析一、表单基础结构与核心标签1.1表单容器：``标签1.2表单元素的灵魂：``标签二、常用表单元素详解2.1输入类元素：``2.1.1基础文本类2.1.2选择类2.1.3交互类2.2复杂输入：``与``2.2.1下拉选择框2.2.2多行文本域三、表单布局与美化技巧3.1基础布局方案3.1.1垂直排列（最常用）3.1.2水平排列（适用于简单表单）3.2使用CSS框架快速布局（B
  • 【前端】一文快速回顾 Html+CSS+JS CoderSharry 前端前端htmlcss
    文章目录前言Preface1.HTML快速回顾1.1基本结构1.2简单语法回顾2.CSS快速回顾2.1三种引入方式2.2选择器2.3布局2.3.1盒子模型2.3.2定位2.3.3浮动2.4简单练习3.JavaScript快速回顾3.1JavaScript引入方式3.2JavaScript基本语法3.2.1变量3.2.2函数与箭头函数3.3简单练习4.总结参考资料一文快速回顾前端基础三件套：HTML
  • 《前端开发者必看：IndexedDB海量数据查询提速秘籍》 程序猿阿伟 数据库oracle前端
    IndexedDB作为强大的客户端存储方案，虽提供了大容量存储能力，然而当面对海量数据时，查询速度的优化成为亟待解决的难题，这不仅关乎应用性能，更直接影响用户体验。IndexedDB采用异步操作，以事务为核心，通过对象存储空间（ObjectStore）存储数据。其查询依赖于索引机制，索引类似书籍目录，能快速定位数据位置。例如，在一个包含大量用户信息的数据库中，若要查找特定用户，通过为用户ID建立索
  • 如何在 Ubuntu 20.04 上使用 UFW 来设置防火墙 GNET0328 ubuntulinux运维
    防火墙是一个用来监视和过滤进出网络流量的工具。它通过定义一系列安全规则，来决定是否允许或者屏蔽指定的流量。Ubuntu自带的防火墙配置工具被称为UFW(UncomplicatedFirewall)。UFW是一个用来管理iptables防火墙规则的用户友好的前端工具。它的主要目的就是为了使得管理iptables更简单，就像名字所说的，简单的。本文描述如何在Ubuntu20.04上使用UFW工具来配置
  • 小学期前端三件套学习（更新中）
    第一阶段HTML基础结构页面标题页面内容常用内容标签文本类标签•~：标题（h1每个页面建议只用一次）•：段落•：行内文本容器•：加粗强调•：斜体强调媒体类标签•：图片（alt属性必须写）•：音频•：视频下拉框请选择选项1选项2选项3国家：--请选择--中国美国列表标签项目第一项超链接与锚点外部链接跳转到章节邮件链接表格![[Pastedimage20250628100803.png]]源码.tab
  • 使用PyQT5开发桌面应用--QSS的UI美化 zorro_z pythonqtuipython
    QSS（QtStyleSheets）即Qt样式表，是用来定义控件外观的一种机制。QSS大量参考了CSS的内容，和CSS的使用相类似，但功能要比CSS弱的多。主要体现为选择器少，可用的属性也少，并且不是所有的属性都可以应用在PyQt的控件上。但是QSS可以使页面和美化代码分开，利用维护，也给我们提供了页面美化的方案。QSS的语法规则QSS的语法规则几乎与CSS相同，如果对CSS比较了解的话，那么QS
  • 深入理解JVM - 编译期/运行期优化 json_it学习笔记 深入理解JVM编译优化虚拟机
    ----------------------------编译期优化--------------------------------------1、概述（编译期）Java语言的“编译期”其实是一段“不确定”的操作过程，因为它可能是指一个前端编译器（Javac编译器）把Java文件转变为class文件的过程；也可能是指虚拟机的后端运行期编译器（JIT编译器）把字节码转变为机器码的过程；还可能是指使用静
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他