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)

  • 第 13 题：谈谈你对 CSS 选择器以及优先级的理解？ Noxus丶SJ
    常用的CSS选择器ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器权重划分在同一层级下!important>内联样式>ID选择器>类选择器>（标签选择器、伪类选择器、属性选择器）不同层级下正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高文章的内容/灵感都从下方内容中借鉴【持续维护/更新500+前端面试题/笔记】https
  • 前后端分离项目中的接口设计与调用流程——以高仙机器人集成为例 南山隐栈 前后端分离实战机器人javaspringbootintellij-ideajsruoyi前端
    一、背景介绍在前后端分离项目开发中，前端页面需要频繁调用后端接口获取数据。在高仙机器人对接项目中，我们采用了若依（RuoYi）框架，前端通过统一的API封装与后端进行数据交互，而后端再对接高仙官方的OPENAPI实现数据获取。这里梳理一下接口调用链路和关键点，作为开发经验记录。二、前后端接口调用的链路1.前端请求（以获取机器人地图列表为例）//src/api/gsrobot.jsexportfun
  • 前后端分离式项目架构流程（爆肝三万字） 信计2102罗铠威 javaEE系列专栏前后端分离式架构servlet后端前端框架项目开发流程
    文章目录个人主页：信计2102罗铠威JavaEE系列专栏前言：【前端】先创建Vue-cli项目，请选择此项目【创建路由】打开命令行工具，进入你的项目目录，输入下面命令。1.创建router目录~创建index.js文件,在其中配置路由2.在APP.vue中添加路由视图3.在main.js中配置路由【配置ElementUI】【如何使背景图片最大自适应】【登录组件模板】【注册组件模板】【创建后端项目+
  • Python 并发调试工具（py-spy、GDB、pyperf）解析 赛博社畜联盟 python开发语言
    ```htmlPython并发调试工具（py-spy、GDB、pyperf）解析Python并发调试工具（py-spy、GDB、pyperf）解析在现代软件开发中，Python以其简洁的语法和强大的库支持，成为了许多开发者首选的语言。然而，随着程序复杂度的增加，尤其是涉及并发编程时，调试和性能优化变得尤为重要。本文将介绍三个常用的Python并发调试工具：py-spy、GDB和pyperf，并深入
  • Python 依赖管理的新动向：pip、Poetry 和 Conda 谁是未来的标准？
    ```htmlPython依赖管理的新动向：pip、Poetry和Conda谁是未来的标准？Python依赖管理的新动向：pip、Poetry和Conda谁是未来的标准？在Python生态系统中，依赖管理是一个至关重要的环节。无论是小型脚本还是大型企业级项目，依赖管理的好坏直接影响到项目的开发效率和稳定性。近年来，随着Python社区的快速发展，依赖管理工具也经历了显著的变化。本文将探讨三种主流的
  • 解决nginx无法显示图片的问题 刘晓倩
    在nginx配置文件里加上这句location~.*\.(jpg|jepg|gif|css|png|ico|html)?${root/Users/liuxq/Sites;expires30d;break;}重新启动后，就ok啦。
  • React Query 优化数据获取与缓存策略 大富大贵7 程序员知识储备1程序员知识储备2程序员知识储备3vim编辑器linux算法机器学习
    引言随着前端应用规模与复杂度的不断提升，如何高效地获取、缓存以及同步服务端数据，成为提升用户体验和系统性能的关键课题。ReactQuery（现更名为TanStackQuery）凭借其轻量、灵活、可扩展的设计，已成为React社区管理服务端状态的事实标准库。本文将深入探讨ReactQuery在数据获取与缓存策略上的原理与实践，结合HTTP缓存理论、分布式系统一致性以及响应式编程等多学科知识，呈现一套
  • React.js前端框架的性能优化的误区与解决方法 前端视界 前端大数据与AI人工智能前端艺匠馆前端框架react.js性能优化ai
    React.js前端框架的性能优化的误区与解决方法关键词：React性能优化、虚拟DOM、渲染优化、组件设计、代码分割、状态管理、性能分析工具摘要：本文深入探讨React.js应用开发中常见的性能优化误区，分析其背后的原理和影响，并提供切实可行的解决方案。文章将从React核心机制入手，剖析虚拟DOM工作原理，揭示不当优化策略可能带来的反效果，并给出基于最佳实践的优化方案。通过实际代码示例、性能对
  • 前端构建工具 Webpack 5 的优化策略与高级配置 码力无边-OEC 前端webpackweb
    前端构建工具Webpack5的优化策略与高级配置当你的项目启动需要一分钟，或者每次热更新都像在“编译整个宇宙”时，你可能已经意识到了一个问题：前端构建性能，正成为开发效率的瓶颈。Webpack作为现代前端开发的基石，其配置的优劣直接决定了项目的开发体验和最终产物的质量。奇怪的是，很多开发者满足于脚手架生成的默认配置，却忽略了Webpack5带来的巨大优化潜力。本文将深入Webpack5的核心，带你
  • HTML+CSS+JS binzhenliziyuan javascripthtmlcss
    HTML+CSS+JSHTML基础1.HTML文件中的DOCTYPE是什么作用？2.HTML、XML、XHTML之间有什么区别？3.前缀为data-开头的元素属性是什么？4.谈谈你对HTML语义化的理解？5.HTML5对比HTML4有哪些不同之处？6.meta标签有哪些常用用法？7.img标签的srcset的作用是什么？8.响应式图片处理优化:Picture标签9.在script标签上使用defe
  • spring的AnnotatedBeanDefinitionReader类
    https://docs.spring.io/spring-framework/docs/6.1.3/javadoc-api/org/springframework/context/annotation/AnnotatedBeanDefinitionReader.htmlorg.springframework.context.annotation.AnnotatedBeanDefinitionRe
  • 大前端几种开发语言对比 Fighting Horse 开发语言flutterswiftkotlin
    项目概述语言特性备注基本类型BasicOperators整数、浮点数C++整数类型宽度不固定，如int，自动数值类型转换Java没有无符号整数，存在装箱Box类型C#Swift基本tuple类型KotlinT?是Box的支持原生类型数组IntArray等无符号整数是Beta的，通过内联类实现Dart运算符BasicOperators赋值、流程、算术、位、逻辑、关系运算符下标、后缀、前缀运算符三元条
  • Node+OBS直播服务器搭建总结 马克关 Node教程直播nodeobs
    导语：最近研究了一下网页直播流的原理以及实现，现在就目前的实现方法做一个总结。目录直播流媒体协议拉流与推流Node服务搭建前端播放页面OBS推流配置直播流媒体协议先来了解一下基本的直播流媒体协议。http-flv,rtpm协议/特点开发者原理优点缺点http-flvAbode通过服务器把flv下载到本地缓存，然后通过NetConnection本地连接播放节省服务器消耗保密性差rtmpAbode通过
  • HTML+CSS简单网页练习
    前言运用了CSS进行简单的网页制作一、效果图二、HTML代码手机alert("欢迎—>"+prompt("请输入你的姓名")+"首页智能手机平板电脑配件服务支持关于尚合最新公告：尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方新品发布新闻中心致歉公告首批尚合Aone已全部售罄！【媒体报道】国产高性价比尚合Aone四核手机评测我司产品已经通过了国家强制性产品3C认证尚合Aone智能手机入网
  • HTML+CSS制作人物介绍网页 Kyra17 html5css
    *仅作个人学习记录用*网页效果视频演示代码实现HTML部分角色简介角色故事技能介绍艾尔海森「诲韬诤言」「文弱的学术分子」米哈游出品的游戏《原神》及其衍生作品中的角色，须弥教令院六大学派之一“知论派”的学者，现任教令院书记官兼任代理贤者，有过人的智慧与才能，生活得自由自在，一般人基本找不到他。在须弥的风波结束，虚空系统关闭之后，教令院还有很多亟待解决的难题。而艾尔海森身为代理贤者，又是当前教令院中非
  • 思途html学习 0717 Asu5202 html学习前端
    1.HTML基础概述HTML定义：超文本标记语言（HyperTextMarkupLanguage），用于创建网页结构。“超文本”指支持嵌入图像、音频、视频和脚本等非文本内容。编辑器推荐：VSCode、HBuilderX或IDEA都很实用。安装VSCode后，添加LiveServer插件（通过Extensions搜索安装），能实现实时预览网页（快捷键：Ctrl+S保存后自动刷新）。核心特性：空白处理
  • html css js网页制作成品——HTML+CSS中国古代物理 - 中华优秀传统文化网页设计（4页）附源码 软件技术NINI 网页源码htmlcssjavascript
    目录一、‍网站题目二、✍️网站描述三、网站介绍四、网站效果五、代码实现HTML
  • HTML与HTML5知识点复习整理 bottle Shen html前端
    **本篇文章食用的简单说明**本篇文章为复习HTML与HTML5进行了知识点梳理，其中标题六部分涉及CSS知识（有标注），加粗部分为重点！！！加粗加红为重重点！！！如有遗漏欢迎在评论区补充~推荐大家按记忆梳理部分的内容自行回忆知识点，如有遗忘部分在左下方目录处点击相应部分可以进行跳转。又是努力学习前端的一天，希望大家共同进步~~~（QAQ我只是一个表情）❤***记忆梳理***一、HTML是什么二、
  • HTML快速复习
    目录!DOCTYPE声明头部head标题title标记元信息meta标记主体body标题分割线段落加粗倾斜下划线文字加删除线预编译标签换行实体字符多媒体标签超链接设置锚点列表标签表格标签框架框架集合form表单模拟百度搜索表单元素文本框密码框单选按钮多选按钮文件隐藏域普通按钮特殊按钮下拉列表多行文本框label标签提交按钮HTML5新增的一些type类型HTML5新增的一些属性thisismyfi
  • html js 查询数据库,如何使用javascript查询数据库？
    小编典典Javascript本身不能用于处理数据库。这是使用php(或您选择的服务器端语言)完成的。Ajax用于使用javascript向您的php脚本发送请求，而javascript则会与数据库进行通信。而且不需要页面刷新。因此，您尝试使用ajax可以轻松实现。既然您提到了jquery，就可以在jquery中签出$.ajax或$.post方法，这使过程更加简单。您需要使用ajax处理表单。Aja
  • html sql连接mysql数据库_HTML连接sql数据库 旋风1968 htmlsql连接mysql数据库
    怎样从HTML网页中获取SQL数据库里的数据我现在是一名学生，第一学期快结束了，老师要CSS布局HTML小编今天和大家分享我们每个学习小组用C#做HTML是无法读取数据库的，HTML是页面前端脚本语言，要想从HTML网页中获取SQL数据库里的数据，需要借助JSP或ASP或PHP或RUBY等语言来实现。简单的关系可以这样理解：数据库JSP或ASP或PHP或RUBY等语言HTML如：在JSP页面中显示
  • html 显示 数据库图片.js,html实时显示数据 怎么让数据库的数据在html显示出来 UnstructuredIO html显示数据库图片.js
    用JS实时调用数据显示在HTML页面上不要站在现在的高度，去判定未来的事情，因为未来的你是会成长的，会有新的选择和判断。html页面上怎么显示动态数据通过AJAX实现，在html页面用ajax请分享后台获取动态数据。获取range的值就行了，然后将其显示出来，你实时改变range的值，显示的就会实时改变0functionchange(){varvalue=document.getElementBy
  • python分布式爬虫打造搜索引擎--------scrapy实现 weixin_30515513 爬虫python开发工具
    http://www.cnblogs.com/jinxiao-pu/p/6706319.html最近在网上学习一门关于scrapy爬虫的课程，觉得还不错，以下是目录还在更新中，我觉得有必要好好的做下笔记，研究研究。第1章课程介绍1-1python分布式爬虫打造搜索引擎简介07:23第2章windows下搭建开发环境2-1pycharm的安装和简单使用10:272-2mysql和navicat的安装
  • 显示连接ftp文件列表的html,FileZilla连接成功但没显示所有目录 李霁琛
    最近弄了个虚拟主机，想写写自己的博客玩玩。然后买主机，买域名，安装了wordpress写了几篇博客，就放在一边了。用的都是wordpress的模板，没有涉及到上传本地php文件到远程服务器。在虚拟主机的Cpanel里，直接上传php或较大的文件夹时通常会失败。用网页上传也很慢。于是弄了Filezilla，免费好用的FTP上传工具。然后按照虚拟主机的Cpanel里的教程，下载了配置文件，直接在fil
  • day9｜学习前端打卡 universe_01 前端算法
    时间复杂度，O（1）的时间复杂度没有for循环O（N）O（logN）并列循环，加起来N+N嵌套循环NlogN时间复杂度和运行时间是不一样的东西空间复杂度：算法存储空间和输入值之间的关系array数组：在连续的内存空间中，储存一组相同类型的元素访问：通过索引去取的index搜索：直接去找元素enumerate（index，element）函数，遍历索引和元素数组排序的时间复杂度是NlogN声明式渲染
  • 前端-VUE-页面布局-flex布局整理-傻瓜教学 偏偏潇洒程序员
    1.flex-direction:设置容器内部元素的排列方向row:定义排列方向从左到右row-reverse:从右到左column:从上到下column-reverse:从下到上图片介绍flex-direction:rowflex-direction:row-reverseflex-direction:columnflex-direction:column-reverse2.flex-:定义fl
  • HTML的重要知识 萌新小白的逆袭 html前端
    什么是HTMLHTML是HyperTextMarkupLanguage的缩写，意思是超文本标记语言。标签标题标签：————-h1,h2,h3.....段落标签：————p换行标签：————br列表标签：有序列表：——ol无序列表：——ul超链接标签：————href属性使用路径target用于定义链接打开的方式_blank在新窗口中打开目标资源；_self在当前窗口中打开目标资源多媒体标签：图片标
  • 前端面试十一之TS 闲蛋小超人笑嘻嘻 前端
    TS是TypeScript的缩写，是一种由微软开发的开源编程语言，它是JavaScript的一个超集，为JavaScript添加了类型系统和对ES6+的支持。以下是关于TypeScript的详细介绍：一、特点类型系统：TypeScript引入了类型注解，允许开发者为变量、函数参数、返回值等添加类型信息。这有助于在编译阶段发现潜在的类型错误，提高代码的健壮性和可维护性。例如：letmessage:s
  • HTML——css--盒子模型与布局
    盒子：html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别而这种现象则被称为盒子模型盒子模型种类1.块级盒子（标签、元素）：divullih1~h6独占一行，对宽度高度支持2.内联级盒子：spana不独占一行，对宽度高度不支持3.内联块级盒子：imginput不独占一行，对宽度高度支持4.弹性盒子：不论父级能不能放下子元素，子元素始终横向布局盒子模型分区内容区
  • JavaScript 性能优化实战指南
    JavaScript性能优化实战指南一、引言JavaScript是一种广泛使用的编程语言，尤其在前端开发中占据重要地位。随着Web应用的复杂度不断增加，性能优化成为开发过程中不可或缺的一部分。性能优化不仅可以提升用户体验，还能减少服务器负载，提高应用的响应速度。本文将从多个方面详细探讨JavaScript性能优化的实战技巧，包括代码优化、内存管理、异步编程、资源加载优化等，旨在为开发者提供一份全面
  • 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其他