il_持之以恒_li
il_持之以恒_li

情人节快到了，我用前端知识做了一个关于“她”的3D旋转相册

运用HTML、CSS做一个旋转相册

前言

话说情人节快到了，虽然我到现在还没有女朋女，但是这不要紧，就为未来的女朋女做一个旋转相册吧！

文章目录

      • 运用HTML、CSS做一个旋转相册
        • 1.了解三个重要的CSS属性
          • 1.1 transform-style属性
          • 1.2 animation属性
          • 1.3 transform属性
        • 2. 实现旋转相册
        • 3.总结

1.了解三个重要的CSS属性

1.1 transform-style属性

这个属性的作用是规定如何在 3D 空间中呈现被嵌套的元素。

1.2 animation属性

这个属性可以实现动画效果，读者可以参考 w3school 上的这个属性--------> animation

1.3 transform属性

因为小编要实现的是3D效果，所以本次需要用到这个属性下的六个比较重要函数，分别为rotateX(), rotateY(), rotateZ(), translateX(), translateY() ,translateZ(),其中，前三个函数里面的参数为角度，单位为 deg ，后面三个函数里面的参数为像素值(px)。

函数 含义
rotateX 定义沿着 X 轴的 3D 旋转。
rotateY 定义沿着 Y 轴的 3D 旋转。
rotateZ 定义沿着 Z 轴的 3D 旋转。
translateX 定义转换，只是用 X 轴的值。
translateY 定义转换，只是用 Y 轴的值。
translateZ 定义转换，只是用 Z 轴的值。

我们来看一下这三个属性共同实现的一个效果：

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wentititle>
    <style type="text/css">
        *{
      
            margin: 0;
            padding: 0;
        }
        .main{
      
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            list-style-type: none;
        }
        .main li{
      
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background: red;
        }
        .main li:nth-child(2n){
      
            background: blanchedalmond;
        }
        .main li:nth-child(1){
      
            transform: rotateX(60deg) translateX(20px);
            animation: rotate1 4s linear infinite alternate;
        }
        @keyframes rotate1{
      
            from{
      transform: rotateX(0deg) translateX(0px);}
            to{
      transform: rotateX(60deg) translateX(20px);}
        }
        .main li:nth-child(3),li:nth-child(4){
      
            top: 0;
            left: 200px;
        }
        .main li:nth-child(3){
      
            transform: rotateX(60deg) translateY(20px);
            animation: rotate2 4s linear infinite alternate;
        }
        @keyframes rotate2{
      
            from{
      transform: rotateX(0deg) translateY(0px);}
            to{
      transform: rotateX(60deg) translateY(20px);}
        }
        .main li:nth-child(5),li:nth-child(6){
      
            top: 0;
            left: 400px;
        }
        .main li:nth-child(5){
      
            transform: rotateX(60deg) translateZ(20px);
            animation: rotate3 4s linear infinite alternate;
        }
        @keyframes rotate3{
      
            from{
      transform: rotateX(0deg) translateZ(0px);}
            to{
      transform: rotateX(60deg) translateZ(20px);}
        }
        .main li:nth-child(7),li:nth-child(8){
      
            top: 200px;
            left: 0;
        }
        .main li:nth-child(7){
      
            transform: rotateY(60deg) translateX(20px);
            animation: rotate4 4s linear infinite alternate;
        }
        @keyframes rotate4{
      
            from{
      transform: rotateY(0deg) translateX(0px);}
            to{
      transform: rotateY(60deg) translateX(20px);}
        }
        .main li:nth-child(9),li:nth-child(10){
      
            top: 200px;
            left: 200px;
        }
        .main li:nth-child(9){
      
            transform: rotateY(60deg) translateY(20px);
            animation: rotate5 4s linear infinite alternate;
        }
        @keyframes rotate5{
      
            from{
      transform: rotateY(0deg) translateY(0px);}
            to{
      transform: rotateY(60deg) translateY(20px);}
        }
        .main li:nth-child(11),li:nth-child(12){
      
            top: 200px;
            left: 400px;
        }
        .main li:nth-child(11){
      
            transform: rotateY(60deg) translateZ(20px);
            animation: rotate6 4s linear infinite alternate;
        }
        @keyframes rotate6{
      
            from{
      transform: rotateY(0deg) translateZ(0px);}
            to{
      transform: rotateY(60deg) translateZ(20px);}
        }
        .main li:nth-child(13),li:nth-child(14){
      
            top: 400px;
            left: 0;
        }
        .main li:nth-child(13){
      
            transform: rotateZ(60deg) translateX(20px);
            animation: rotate7 4s linear infinite alternate;
        }
        @keyframes rotate7{
      
            from{
      transform: rotateZ(0deg) translateX(0px);}
            to{
      transform: rotateZ(60deg) translateX(20px);}
        }
        .main li:nth-child(15),li:nth-child(16){
      
            top: 400px;
            left: 200px;
        }
        .main li:nth-child(15){
      
            transform: rotateZ(60deg) translateY(20px);
            animation: rotate8 4s linear infinite alternate;
        }
        @keyframes rotate8{
      
            from{
      transform: rotateZ(0deg) translateY(0px);}
            to{
      transform: rotateZ(60deg) translateY(20px);}
        }
        .main li:nth-child(17),li:nth-child(18){
      
            top: 400px;
            left: 400px;
        }
        .main li:nth-child(17){
      
            transform: rotateZ(60deg) translateZ(20px);
            animation: rotate9 4s linear infinite alternate;
        }
        @keyframes rotate9{
      
            from{
      transform: rotateZ(0deg) translateZ(0px);}
            to{
      transform: rotateZ(60deg) translateZ(20px);}
        }
    style>
head>
<body>
    <ul class="main">
        <li>li>
        <li>rotateX(60deg) translateX(20px)li>
        <li>li>
        <li>rotateX(60deg) translateY(20px)li>
        <li>li>
        <li>rotateX(60deg) translateZ(20px)li>
        <li>li>
        <li>rotateY(60deg) translateX(20px)li>
        <li>li>
        <li>rotateY(60deg) translateY(20px)li>
        <li>li>
        <li>rotateY(60deg) translateZ(20px)li>
        <li>li>
        <li>rotateZ(60deg) translateX(20px)li>
        <li>li>
        <li>rotateZ(60deg) translateY(20px)li>
        <li>li>
        <li>rotateZ(60deg) translateZ(20px)li>
    ul>
body>
html>

2. 实现旋转相册

看了上述代码和运行结果，我想读者应该对于实现旋转相册应该有了一个大体的想法了。
那么具体怎样实现呢？其实，认真看上述代码的读者应该可以发现，ul标签没有设置 animation 属性，如果设置了这个属性会是什么效果呢？
看一下设置ul标签的这个属性之后的运行结果吧！

是不是发现了这是设置了ul标签的 animation 属性的结果。
当然，这也必须设置相对定位和绝对定位，不然还是无法实现这个效果的。
根据设置相对定位和绝对定位的原则，ul标签应该设置为相对定位，li标签设置为绝对定位，也就是 子 (标签) 绝 (对定位) 父 (标签)相 (对定位)
为了使旋转的相册有一个背景音乐，这里添加了一个 audio 标签在这里插入图片描述
代码已经上传到github，链接为:项目3.html
运行结果:

情人节快到了，我用前端知识做了一个关于“她”的3D旋转相册

3.总结

这是小编参加的一个活动，如果读者觉得小编的这篇博文还不错的话！记得点赞！小编在此谢谢了。

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

  • 如何在管理端项目中优雅地封装表格搜索条件 前端老曹 html5javascriptcss3vue.jstypescriptsass前端
    #前端做管理端项目时会有一个非常明显的问题就是表格页面过多如果每个表格页面都是自己写一套表格搜索条件会造成很多的代码冗余于是我就尝试封装一个适用于大部分表格的搜索条件组件用于提高代码复用性、可维护性和用户体验#文章目录引言需求分析设计思路实现细节使用示例总结引言在前端开发中，表格搜索是常见的功能需求。特别是在管理端项目中，表格搜索能够帮助用户快速定位到所需的数据。ElementPlus作为基于Vu
  • Vue 3 项目中的路由管理详解 前端老曹 vue.js前端javascript
    #随着前端单页应用（SPA）的兴起，路由管理成为了前端项目中不可或缺的一部分。VueRouter作为Vue.js官方的路由管理器，与Vue.js深度集成，为构建单页应用提供了强大的路由功能。在Vue3中，VueRouter也相应地进行了更新和优化，以更好地支持Vue3的新特性。本文将详细介绍Vue3项目中的路由管理。#一、VueRouter4概述VueRouter4是与Vue3配套使用的路由管理器
  • 使用WebStorm开发Vue3项目 web18285997089 面试学习路线阿里巴巴webstormrustide
    记录一下使用WebStorm开发Vu3项目时的配置现在WebStorm可以个人免费使用啦！??基本配置打包工具：Vite前端框架：ElementPlus开发语言：Vue3、TypeScript、Sass代码检查：ESLint、PrettierIDE：WebStorm2024.2首先说一下版本兼容问题，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升级了Sass后，会导致El
  • Rust配置开发环境+服务器实战 m0_52111823 rust
    https://www.cnblogs.com/skzxc/p/12129353.html默认已经安装好MSVC。官网https://www.rust-lang.org/zh-CN/learn/get-started安装Rust安装器，选择winodwsx64版本运行安装，将文件夹移动到D盘，安装后，文件夹在C:\Users\xxx下有.cargo和.rustup两个文件夹新建环境变量CARGO_
  • 前端 github 项目拉取 启动出错一些列问题记录 风无雨 前端github
    1.MissingSecret:Pleasedefinea`secret`.Readmoreathttps://errors.authjs.dev#missingsecretatassertConfig(D:\project\ai-chatbot\.next\server\edge\chunks\c1962_@auth_core_9221fb._.js:480:16)atAuth(D:\proje
  • 2024年前端提效项目盘点之：低代码拖拽生成页面（架构设计篇） 前端77 前端低代码
    前言因为之前公司内部业务及提效的需要，做了一系列低代码的项目：分别有vscode插件、figma设计稿转代码插件、脚手架，拖拽生成h5营销页面和问卷等。现在把这一些系列实践的经验自我总结一下，形成一个低代码专栏。每个项目都分为思路架构设计和实践各两篇文章。当前是整个专栏的其中一个项目：拖拽生成h5页面（架构设计篇）1.起因为了满足公司运营及提效需要，搭建了一套供运营人员的使用的低代码平台。2.低代
  • 跨平台开发技术的探索：从 JavaScript 到 Flutter 109702008 编程#javascriptjavascriptflutter人工智能
    随着多平台支持和用户体验一致性在应用程序开发中变得越来越重要，开发者面临的挑战是如何在不同平台上保持代码的可维护性和高效性。本文将探讨如何利用现代技术栈，包括Flutter、JavaScript、HTML5、WebAssembly、TypeScript和Svelte，在统一的平台上进行高效的跨平台开发。JavaScript和它的生态系统JavaScript是一种运行于浏览器中的编程语言，通过Nod
  • 深入解析 Svelte：下一代前端框架的革命 赵大仁 技术前端大语言模型开发语言人工智能前端前端框架
    深入解析Svelte：下一代前端框架的革命1.Svelte简介Svelte是一款前端框架，与React、Vue等传统框架不同，它采用编译时（Compile-time）方式来优化前端应用。它不像React或Vue依赖虚拟DOM，而是在编译阶段直接生成高效的原生JavaScript代码，使其拥有更小的包体积、更快的渲染速度和更低的运行时开销。1.1Svelte的核心特点特性说明无虚拟DOM直接生成高效
  • HTML/CSS/JavaScript 如果你需要创建一个简单的网页可以使用: 一一代码 python
    我的网页body{font-family:Arial,sans-serif;background-color:#f0f0f0;text-align:center;padding:50px;}h1{color:#333;}button{padding:10px20px;font-size:16px;background-color:#007BFF;color:white;border:none;cu
  • 【wordpress】服务器已有LNMP环境（已运行WordPress），如何配置文档访问功能？ 冰糖雪梨on_chip Linuxnginx文件服务器
    效果如图步骤确定文件存放目录404.html修改配置文件重启nginx服务接下来是从win向linux云服务器上传文件使用Samba服务（没成功）使用xshell上传文件（大文件上传一堆乱码）winscp（好用）效果如图如果url不对，这是404页面步骤确定文件存放目录先确定你要把文件放到哪个目录中，比如我要放在/var/www/jrwei.top/documents中#创建目录sudomkdir
  • Svelte 开发 AI 应用：高效轻量级前端框架的 AI 集成探索 赵大仁 大语言模型前端AI人工智能前端框架
    Svelte开发AI应用：高效轻量级前端框架的AI集成探索1.引言人工智能（AI）与Web应用的结合已经成为前端开发的重要趋势。传统上，Vue、React等框架常用于AI前端交互，而Svelte作为一款编译时优化的前端框架，以轻量级、高性能、无运行时的特点，成为AI应用开发的新选择。本文将探讨如何利用Svelte构建高效的AI应用，包括AIAPI集成、前端推理优化、可视化分析、Web组件开发等关键
  • html + thymeleaf 制作邮件模板 你的万花筒 thymeleafcsshtmlcssspringbootvscode前端
    背景：有一个接口流量超限自动给客户发邮件展示接口访问量错误码等的需求，前后端不能分离的，本来是交给后端同学做，但是领导觉得后端同学做的样式太丑，所以交给了我，框架是后端同学搞好的，我直接从在html用thymeleaf语法编写开始的。思路：需要接入数据库，所以使用了后端的thymeleaf模板，在html标签中可以通过$符合直接访问后端透出的变量，比如下图的request可以直接来访问。thyme
  • HTML基础知识及实践入门讲义 华笠医生
    本文还有配套的精品资源，点击获取简介：HTML是构建网页的基础语言，本讲义旨在为初学者提供HTML的基础知识与实践指南。内容包含HTML基本结构、元素和属性、表格和列表的使用、样式的内联与外部控制、布局和响应式设计原理、表单元素的介绍，以及使用AdobeDreamweaver进行页面创建、编辑和响应式设计的方法。实践部分包含创建静态网页的实例，帮助学习者巩固所学知识。1.HTML基础语法与结构HT
  • 邮箱html邮件显示不全,制作邮箱能正常显示的HTML邮件的方法 weixin_39812577 邮箱html邮件显示不全
    制作邮箱能正常显示的HTML邮件的方法发送html邮件的建议：用style写内联的CSS；少用图片；用table实现左右布局或者更复杂的布局；用background元素设置背景图片等。几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST
  • Vue Router 4与路由管理实战 qcidyu 文章归档动态路由代码分割路由懒加载导航守卫路由管理单页面应用VueRouter
    title:VueRouter4与路由管理实战date:2024/6/7updated:2024/6/7excerpt:这篇文章介绍了如何在Vue.js应用中利用VueRouter实现单页面应用的路由管理，包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法，旨在提升用户体验和应用加载效率categories:前端开发tags:VueRouter单页面应用路由管理导航守卫路由懒
  • HTML邮件 兼容问题 Young_Gao js+htmlHTML邮件兼容问题
    先来两个传送门感受一下：https://blog.csdn.net/sunslee/article/details/6065825https://segmentfault.com/a/1190000008864116几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由
  • 我的创作纪念日 几何心凉 前端小常识前端html5
    如何处理前端表单验证，确保用户输入合法？文章目录如何处理前端表单验证，确保用户输入合法？1.引言2.前端表单验证的类型2.1HTML5原生验证**示例****优点****缺点**2.2JavaScript基础验证**示例****优点****缺点**2.3正则表达式（Regex）验证**常见正则表达式****示例**2.4使用第三方库（如Yup、Validator.js）**使用`Yup`进行表单验
  • 深入探索RPFramework的架构与应用 华笠医生
    本文还有配套的精品资源，点击获取简介：RPFramework是一个在GitHub上托管的项目，提供了Web开发或软件工程中用于特定任务的框架。该项目的更新包括新功能的添加、性能优化和问题修复，保持与技术趋势同步。站点以HTML为基础结构，同时包含CSS和JavaScript来定义样式和交互。源代码文件中隐藏着框架的目录结构、配置、核心功能、样式设计和交互逻辑，通过对这些关键组成部分的研究，可以更好
  • Vue 3 路由管理实战：构建多页面博客导航 - 掌握 Vue Router 实现 SPA 页面跳转 Neo Evolution 前端学习vue.js前端javascript前端框架ecmascript
    引言欢迎再次回到Vue3+现代前端工程化系列技术博客！在昨天的第三篇博客中，我们深入探索了Vue3响应式系统的进阶应用，通过构建简易购物车应用，熟练掌握了watch监听器和computed计算属性的运用。今天，我们将开启Vue3工程化实践的全新篇章，聚焦于构建单页应用(SPA)的核心技术：路由管理。在现代前端开发中，单页应用(SPA)已经成为主流。与传统的多页应用不同，SPA通过动态更新组件内容来
  • java语言从入门到入土_Java基础从入门到精通 苏咔咔 java语言从入门到入土
    1.ubuntu12.10如何安装http://jingyan.baidu.com/article/e5c39bf585968539d6603364.html2.JDK环境变量配置--win8版http://jingyan.baidu.com/article/ca41422fe3b7261eae99edc6.html3.用winrar加密文件http://jingyan.baidu.com/art
  • windows环境下，使用docker搭建redis集群 一醉千秋 shelldockerWebGISwebdockerredis容器
    参考：https://blog.csdn.net/weixin_46594796/article/details/137864842https://www.cnblogs.com/niceyoo/p/14118146.html史上最详细Docker搭建RedisCluster集群环境值得收藏每步都有图，不用担心学不会-腾讯云开发者社区-腾讯云一、基础环境描述宿主机：192.168.8.209red
  • AI驱动的前端技术选型：告别选择困难症，拥抱高效开发时代 liangruimi 人工智能前端
    在快节奏的互联网时代，选择合适的前端技术栈对于项目的成功至关重要。然而，面对层出不穷的新技术和框架，前端开发者常常面临着技术选型难题，例如技术更新迭代快，选择困难，以及传统方法效率低下等问题。因此，利用AI代码生成器等AI工具辅助前端技术选型，已成为提升效率、降低风险的关键。本文将探讨如何借助AI的力量，轻松应对前端技术选型挑战，高效完成项目开发。AI驱动的前端技术选型：现状与挑战目前，前端技术栈
  • LangChain解锁LLM大语言模型的结构化输出能力：调用 with_structured_output() 方法 晨欣 langchain语言模型人工智能
    什么是LLM的结构化输出能力？在一些工业级LLM应用或比较复杂的LLM应用编排环节，我们需要用LLM的输出作为下一环节的输入，而这个过程往往对LLM输出的格式有一定要求，比如JSON、XML、YAML、CSV、Markdown表格和HTML等比较常见的格式。因此我们需要通过各种方式手段让LLM具备符合我们期望的结构化输出能力，即模型能够按照用户指定的格式或规则生成内容（而不仅仅是自由形式的文本）的
  • Python 与Java 开发人形机器人远程控制APP Geeker-2025 pythonjava
    开发一款人行开发机器人远程控制App是一个复杂且高度技术性的项目。该项目涉及多个技术领域，包括前端开发、后端开发、物联网（IoT）通信、实时数据处理、数据加密、安全性保障等。使用Python和Java联合开发可以充分利用每种语言的优势，构建一个高性能、可扩展且功能丰富的应用。以下是一个高层次的设计概述，涵盖主要的技术栈和功能模块，并提供使用Python和Java联合开发的示例。##技术栈概述###
  • 快速上手 Unstructured：安装、Docker部署及PDF文档解析示例 大F的智能小课 大模型理论和实战dockerpdf容器
    1.核心概念1.1Unstructured简介Unstructured是一个强大的Python库，专注于从非结构化数据中提取和预处理文本信息，广泛应用于PDF、Word文档、HTML等多种格式的文件处理。其核心功能包括分区、清理、暂存和分块，能够将复杂的非结构化文档转换为结构化输出，为后续的自然语言处理任务提供高质量的数据支持。分区功能：Unstructured能够将原始文档分解为标准的结构化元素
  • Java爬虫——jsoup xxxmine java爬虫开发语言
    JSoup是一个用于处理HTML的Java库，它提供了一个非常方便类似于使用DOM，CSS和jquery的方法的API来提取和操作数据。Jsoup能做什么？从URL、文件或字符串中抓取和解析HTML（爬虫）使用DOM遍历或CSS选择器查找和提取数据操作HTML元素、属性和文本根据安全列表清理用户提交的内容，以防止XSS攻击输出整洁的网页Jsoup相关概念Document：文档对象。每份HTML页面
  • XPATH的用法 勇敢的牛马 selenium测试工具xhtmlpythonpycharm
    XPATH的两种类型绝对路径（AbsoluteXPATH）从HTML根目录（/html/body/...）开始定位。示例：/html/body/div/ul/li[2]缺点：网页结构变化时容易失效。相对路径（RelativeXPATH）直接从//开始，不依赖HTML根路径，更稳定。示例：//li[@id='item2']优点：更灵活，不受页面层级变化的影响。常见XPATH语法XPATH语法作用示例
  • 基于SSM框架的校园订餐小程序设计与实现 源码空间站11 课程设计点餐系统微信小程序小程序开发毕业设计
    内容概要：该文章介绍了使用SSM（Spring+SpringMVC+MyBatis）框架及Java开发语言和MySQL数据库，设计并实现了一款名为“校园订餐”的小程序。文中从系统需求出发，阐述了系统背景意义与国内外研究现状发展趋势，明确了需求并分析了系统可行性。随后详细讲解了系统的功能模块、数据库设计方案、微信小程序前端和后台管理的具体实现过程，包括登录注册、餐厅信息管理、美食信息管理和订单管理等
  • 【新手入门】SQL注入之防御代码的绕过、数据库数据读取 见青.. sql数据库web安全前端
    一、前端防御代码绕过有些输入数据的地方（如登陆页面），当输入的数据不太合适时，直接就有提示，并且不符合要求的话，就不能点击提交按钮，即不能和后台进行交互，像这种行为就都属于前端代码的限制。绕过前端代码最好的方式就是先输入一个符合格式要求的数据，然后抓包--处理--放包。所以前端代码限制的绕过很简单,但碰到js加密和混淆技术（代码语句顺序打乱）时，前端代码绕过也是比较有难度的。二、后端防御代码绕过<
  • 【Java 后端】Restful API 接口 非 白 Java网络javarestful开发语言
    RestfulAPI接口REST：RepresentationalStateTransfer，表现层（前端的视图页面和后端的控制层）资源状态转移。一种软件架构的风格（格式）RESTful是目前最流行的互联网软件架构，如果一个架构符合REST原则，则称它为RESTful架构。REST风格提倡URL地址使用统一的风格设计，从前到后各个单词使用斜杠分开，不使用问号键值对方式携带请求参数，而是将要发送给服
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他