薛定谔的壳
薛定谔的壳

CSS实现一个交互感不错的卡片列表

CSS实现一个交互感不错的卡片列表_第1张图片

0、需求分析

  • 横向滚动
  • 鼠标悬停时突出显示
    • 默认堆叠展示
    • 鼠标悬停时，完整展示当前块+适当旋出效果
  • 移动端样式优化、磁吸效果
  • 美化滚动条

1、涉及的主要知识块

  • flex 布局
  • css 简单变换+过渡
    • transform、transition
  • 渐变色函数
    • linear-gradient
    • …
  • 伪类、伪元素
    • 滚动条、::after、 ::before
    • …

2、实现效果

3、代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片title>

  <style>
    :root{
      --pcWidth: 700px;
      --mbWidth: calc(100%-30px);
    }
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: #3a3939;
    }
    @media (min-width: 1200px) {
      .wrapper{
        width: calc(var(--pcWidth) + 30px);
      }
      .article-wrapper{
        width: var(--pcWidth);
      }
    }
    @media (max-width: 1200px){
      .wrapper{
        width: var(--mbWidth);
      }
      .article-wrapper{
        width: var(--mbWidth);
      }
    }
    .wrapper{
      height: fit-content;
      position: relative;
      margin: 0 auto;
    }
    .wrapper::after{
      content: " ";
      position: absolute;
      top: 50px;
      bottom: 28px;
      right: 0;
      width: 6px;
      background: linear-gradient(45deg, #df0684, #c90700 20%, #f2a500 90%);
      border-radius: 3px 2px 2px 3px;
      z-index: 2;
      box-shadow: -8px 0 12px 2px #000;
    }
    .article-wrapper{
      position: relative;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      display: flex;
      color: white;
      padding: 50px 0 20px 30px;
    }
    .article-wrapper::-webkit-scrollbar{
      width: 8px;
      height: 8px;
    }
    .article-wrapper::-webkit-scrollbar-thumb{
      height: 5px;
      background: linear-gradient(.8deg, #05CB98, #0098C9 40%, #F25A00 80%);
      border-radius: 10px;
    }
    .wrapper .item{
      min-width: 180px;
      background: linear-gradient(85deg, #4e4e4e, #222222);
      border-radius: 9px;
      box-shadow: -73px 0 66px -20px #000000;
      transition: .2s;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    .wrapper .item:not(:first-child){
      margin-left: -50px;
    }
    .wrapper .item:hover{
      transform: translateY(-8px) rotate(2deg);
    }
    .wrapper .item:hover~.item{
      transform: translateX(59px);
    }
    .wrapper .item .title{
      overflow-y: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin: 6px 8px;
    }
    .wrapper .item .cover{
      width: 100%;
      height: 150px;
      background: linear-gradient(134deg, #05CB98, #0098C9 40%, #F25A00 80%);
    }
    .wrapper .item .detail{
      font-size: 14px;
      overflow-y: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      padding: 0 9px;
      margin: 8px 0;
    }
  style>
head>
<body>
  <div class="wrapper">
    <div class="article-wrapper">
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下h5>
        <div class="cover">div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收div>
      article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下h5>
        <div class="cover">div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收div>
      article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下h5>
        <div class="cover">div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收div>
      article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下h5>
        <div class="cover">div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收div>
      article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下h5>
        <div class="cover">div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收div>
      article>
      <article class="item">
        <h5 class="title">这是一个标题，可能会有好多个字，然后导致两行展示不了，需要省略一下h5>
        <div class="cover">div>
        <div class="detail">黑夜从大地上升起遮住了光明的天空丰收后荒凉的大地黑夜从你内部升起你从远方来， 我到远方去遥远的路程经过这里天空一无所有为何给我安慰丰收之后荒凉的大地人们取走了一年的收成取走了粮食骑走了马留在地里的人， 埋的很深草叉闪闪发亮， 稻草堆在火上稻谷堆在黑暗的谷仓谷仓中太黑暗， 太寂静， 太丰收div>
      article>
    div>
  div>
body>
html>

你可能感兴趣的:(css,交互,css3,卡片列表,小酷)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • 自律打卡第四天：比昨天进步一点点 花儿的念想
    今天新闻我们县城又确诊了一例，截止目前已经确诊的三例了，打开，看了一篇简友写的武汉的真实情况，有病住不了院，还没等到床位已经去世的消息，心里更加的难受，武汉尚且这样，如果是我们这没有高速没有火车的十八线的小县城发生这种情况，那情况将是更加的不堪设想，不敢想，唯有祈求灾难早点快去，平安才是最大的福气。突然觉得我的自律打卡，比昨天进步一点点。更希望疫情战争每一天都要比昨天好一点，希望一觉醒来听到的是好
  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • 【C++算法】76.优先级队列_前 K 个高频单词 流星白龙 优选算法C++c++算法开发语言
    文章目录题目链接：题目描述：解法C++算法代码：题目链接：692.前K个高频单词题目描述：解法利用堆来解决TopK问题预处理一下原始的字符串数组，用一个哈希表统计一下每一个单词出现的频次。创建一个大小为k的堆频次：小根堆字典序（频次相同的时候）：大根堆循环让元素依次进堆判断提取结果C++算法代码：classSolution{//定义类型别名，PSI表示对typedefpairPSI;//自定义比较
  • JVM 内存模型深度解析：原子性、可见性与有序性的实现 练习时长两年半的程序员小胡 JVM深度剖析：从面试考点到生产实践jvmjava内存模型
    在了解了JVM的基础架构和类加载机制后，我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型（JavaMemoryModel，JMM）定义了线程和主内存之间的抽象关系，它通过规范共享变量的访问方式，解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发，详解原子性、可见性、有序性的实现机制，以及volatile、synchronized等关键字在其中的作用。一、J
  • 2022-04-07 上善若水1979527
    昨天苏阿姨来给我送普门品！和她一块来的还有另外一个阿姨！我下去拿时！那阿姨说你不是干房产的小赵！帮我租房的！我说你认识我？对啊！你帮我租的房子！我没印象了！我和保红一块！我说我想起来了阿姨！你这运动服一换！小电车一骑！一下年轻十岁我早记不得了！我只记得一九年五一带看了河滨美航还有德胜的好多套房子！你都不当意！你告诉我你每晚拜观音菩萨说快让小赵普萨帮我找套合适的房子吧！我把本子上记得半年内的德胜房源
  • 恩小希美食成长日记之118：“摘星女神”王亚平归来，她的婚姻，治愈了多少职场女性的痛 恩小希
    上周最为热闹的消息,无疑是神舟13号的三位航天英雄回来了.其中,最为瞩目的就是王亚平.她是我国首位进行太空行走的女航天员,也是为自己小女儿“摘星星的妈妈”。作为最受关注的职场妈妈，王亚平之所以能够成就这样一番事业，跟背后默默支持她的丈夫--赵鹏分不开。01王亚平1980年出生于山东烟台。父母都是地地道道的农民。王亚平这个姑娘从小体质好，一直练习长跑。高中时，空军来家乡招收女飞行员，作为体育班里唯一
  • JAVA接口机结构解析 秃狼 SpringBoot八股文Javajava学习
    什么是接口机在Java项目中，接口机通常指用于与外部系统进行数据交互的中间层，负责处理请求和响应的转换、协议适配、数据格式转换等任务。接口机的结构我们的接口机的结构分为两个大部分，外部接口机和内部接口机，在业务的调度上也是通过mq来实现的，只要的目的就是为了解耦合和做差异化。在接口机中主要的方法就是定时任务，消息的发送和消费，其他平台调用接口机只能提供外部接口机的方法进行调用，外部接口机可以提供消
  • 模拟退火(SA)：如何“故意走错路”，才能找到最优解？ 小瑞瑞acd 小瑞瑞学数模模拟退火算法python启发式算法算法
    模拟退火(SA)：如何“故意走错路”，才能找到最优解？图示模拟退火算法如何通过接受较差解（橙色虚线标注）从局部最优（绿色点）逃逸，最终找到全局最优解（紫色点），展示其跳出局部极小值的能力。大家好，我是小瑞瑞！欢迎回到我的专栏！想象一下，你站在一座连绵不绝的山脉中，目标是找到海拔最低的那个山谷。你手上只有一个高度计，视野被浓雾笼罩，只能看清脚下的一小片区域。如果你是一个“贪心”的登山者，你的策略会非
  • 900 万人次都在用！打印机驱动大师：兄弟 驱动安装一步到位 文哥工具箱2 软件工程电脑开源软件
    各位打印界的老铁们，你们知道吗？我就是那个传说中服务PT-18R标签打印机的“最佳损友”小助手！当你想把电脑里那些花里胡哨的标签设计变成能摸得着的实物时，嘿嘿，软件下载地址本助手就闪亮登场啦！插上USB线的瞬间，我立马在你电脑里“安营扎寨”，悄悄给你和打印机搭起一座“鹊桥”，让你们无障碍沟通，那叫一个丝滑！你在编辑软件里鼓捣的文字、条形码，甚至那些可可爱爱的小图标，全靠我这个“翻译官”精准转换成打
  • 今晚吃太饱了 爱伤心的蚂蚁
    今晚吃太饱了，两碗干饭，两碗肉汤，一碗牛奶银耳汤，感觉肚子都顶出来了，圆滚滚的！明早要早起，出发去小蚂蚁家！看着剩下的肉汤，倒掉多可惜，干掉了！看着小蚂蚁熬的银耳汤，倒掉多可惜，于是热了一下，顺便热袋牛奶倒进去，大娃喝点，小蚂蚁喝点，还剩下一大碗，继续干掉！吃的太饱，人也懒洋洋的，躺床上不想动，感受的肚子撑撑的感觉，好久没吃这么饱了！这一晚灌的都是汤汤水水的，天冷的晚上，半夜要睡不安稳咯！哈哈！小
  • 为他找了一百个理由 顾安安呐
    我曾经试图从蛛丝马迹里找出理由，去告诉自己你很爱我。相信很多恋爱过的人都有这种经历：他爱我吗？朋友小邹是大家公认的那种乐观开朗的女孩。前一段时间却钻起了牛角尖，她开始变得敏感多疑，而这些与她之前的性格完全判若两人。她现男友得不到我们的认可，但是她爱他，总是从蛛丝马迹里找证据。他一天不回他消息，她就告诉自己他在忙；他和别的女生有说有笑，她问他，只要他说是同学让她不要发神经，她就愿意傻傻的相信他；他对
  • 读张萌萌姐《从受欢迎到被需要》第一章读书总结 韩静_Han
    我是@张萌-萌姐#从受欢迎到被需要#读书会10班的书记官韩静我们的领读者是@郝美-菱这是今天的读书总结通过第一章的阅读，对高情商和自我介绍有了新的认知。思考题复盘：“我是谁，我需要什么，我能提供什么”【我是谁】我叫韩静，在房地产行业工作5年，现担任行政经理一职，是一位个子小却很坚强很拼的女生。【我能提供什么】️用自己减重26斤的经验帮助需要的人健康减肥️能提供房地产购房等方面的知识和问题️早起陪伴
  • 打造自己的梦想生态系统 轻风style
    今天听了第5周5.1的梦想系统和随堂练习：梦想仓库与八大关注表。参照老师给出的例子，列出了八大关注对应的自己的梦想。有些写的时候内心都在怀疑，但因为老师有说到，要没有分别心的去列出，不管是近的，远的，小的，大的，自己觉得可以实现的，或者觉得根本不可能实现的，都统统的列出来。就像音频中提到的，林语堂说过的话，梦想无论怎样模糊，总潜伏在我们心底，使我们的心境永远得不到宁静，直到这些梦想成为事实才止；像
  • js操作样式 郝加升
    DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
  • 旧系统UI焕新陷阱：保留业务习惯与引入新交互的平衡点把控 贝格前端工场 ui交互
    摘要**想给老旧系统换上“高颜值新衣”，却遭遇员工集体吐槽“不会用”？满心期待新交互能提升效率，结果用户操作频频出错，业务进度反而被拖慢？旧系统UI焕新本是优化体验的好机会，可在保留多年养成的业务操作习惯，与引入更先进便捷的新交互方式之间，却横亘着巨大鸿沟。稍有不慎，就会陷入“改了不如不改”的尴尬境地。这场关于“守旧”与“创新”的博弈，究竟该如何破局？一、旧系统UI焕新：一场甜蜜又棘手的改造工程旧
  • 面对冷漠的成人世界，愿你做一个内心强大的人 小西夜语
    —在漫漫深夜里，遇见最真实的你—一个人的强大，无外乎是内心的强大，说到做一个内心强大的人，小西还是不得不提到丰子恺的漫画《无宠不惊过一生》。漫画中，还是小西喜欢的那一句——“不乱于心，不困于情。不畏将来，不念过往。如此，安好。”想来要成为一个内心强大的人，应该就是要做到这样吧！不乱于心，终日面对各种事务，接收各种信息，能够不被扰乱内心，依然坚定自己的想法，这就是内心强大。如今，我们都谈焦虑，因为总
  • 日常 黄梅飘香
    这几天，没有写文。不过也一直关注，关注上好友的文章。最近看小红书看到邓为，又看了长相思。看了杨紫演的小六。邓为演的叶十七。还挺好。杨紫还挺让人开心，喜欢的。可爱。邓为演的也很迷人。很温顺。最近小孩高三，开始返校上课了。我也决定每天晚上老早睡，不拖到十一点，或更晚。早起，锻炼也行，下地刨地种菜要紧。说的容易，做起来难。前两天下雨，我净在家玩了。看手机没够。拼多多一看就想买。想给小孩买件新衣服。又想买
  • 【生活小悟】换牙记 薛春霞Cathy
    这段时间，不知道在忙什么，总感觉时光匆匆。每天浑浑噩噩起床，忙忙碌碌吃饭上班接送娃，不知不觉一日又没了。每天不是在感慨岁月匆匆，就是在埋怨自己又蹉跎了岁月。总感觉这样的日子似乎哪里不对劲，却又无能为力，茫然无措。于是又继续着这样的无奈。昨儿下午，妈妈回来了，接孩子们，然后送回家，自己一个人来学校上自习。这个自习我上的踏实，不用担忧自己在校园玩耍的孩子会磕碰到哪，也不用考虑会不会又玩儿到忘记上厕所，
  • 大城市和小县城 平凡只要
    教育随便一个公立初中老师都是排名靠前的师范类，硕士起步。衣服，随便哪个品牌，一般四折左右才会下手，小地方真的没有这么低折扣。日化用品，这些同样，内地的价格贵的多。牛奶这些更不要说，内地贵，大城市超市经常打折，毕竟人流量大，可以借此吸引人。说小城市消费低的，其实是对生活没有什么要求的，就是吃米饭+青菜+少量荤菜就能满足的。如果要天天牛奶当水喝，肉类当主食，穿要讲品牌，绝对一线消费低。就是房价太高，一
  • 微信公众号回调java_处理微信公众号消息回调 weixin_39607620 微信公众号回调java
    1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.
  • 青云官道庄岩柳琴免费完结版小说_已完结小说推荐青云官道(庄岩柳琴) d036fb3b3d05
    《青云官道》主角：庄岩柳琴，简介：小科员庄岩，因一纸调研报告被副市长赏识，本以为能够就此走上人生巅峰，结果副市长就被双规！不过庄岩非但没有被牵连，反而拿着副市长留下的东西，不仅抱得美人，还平步青云，扶摇而上九万里！关注微信公众号【夏至文馆】去回复个书号【1190】即可阅读小说【青云官道】全文内容！！！小庄，现在几点了？”富丽堂皇的客厅里，一个身穿旗袍的美妇紧张的来回的踱步！“夫人，11点57。”站
  • 手把手教你用C语言实现顺序表
    hello，大家好，本篇文章旨在为大家讲解如何使用C语言实现顺序表，还有就是小编自己复习一下相关知识，OK，那我们现在开始。在通讯录中，有增删查改等功能，那么顺序表我们也会对以上功能进行实现。一、创建并初始化顺序表1.创建typedefintSLDataType;#defineINIT_CAPACITY4//动态顺序表--按需申请typedefstructSeqList{SLDataType*a;
  • 小确幸5.23 聪聪和茵茵
    图片发自App经常有好友问我，你是怎么教育孩子的？尽管我没仔细去思考这个问题，不过我还是知无不言，言无不尽的。每个孩子都是独特的，大概只有父母最为了解自己的孩子，所以其他人的做法不一定适合你的孩子，还是自己多用心去感受和体会这其中的酸甜苦辣吧。我想大概出于对孩子打出内心深处的爱，有时难免急燥粗暴地解决问题，但过后会反思，意识到自己的错误，会认真的和孩子交谈，并道歉。我是第一次当妈妈，你们是第一次当
  • 我不想再当知识的搬运工 楚煜楚尧
    因为学校课题研究的需要，这个暑假我依然需要完成一本书的阅读笔记。我选的是管建刚老师的《习课堂十讲》。这本书，之前我读过，所以重读的时候，感到很亲切，摘抄起来更是非常得心应手。20页，40面，抄了十天，终于在今天大功告成了。这对之前什么事都要一拖再拖的我来说，是破天荒的改变。我发现至从认识小尘老师以后，我的确发生了很大的改变。遇到必须做却总是犹豫不去做的事，我学会了按照小尘老师说的那样，在心里默默数
  • 民事诉讼后，发现与刑事案件有关联怎么办 邓粤龙
    在一些民事案件中，当事人发起民事诉讼后，经过法院审理，发现该案件和刑事案件还有关联，这时就涉及到交叉案件的处理。民事诉讼的发起人是案件的当事人，而刑事诉讼通常是由检察院提请公诉的，两者并不属于同一程序，那么，民事诉讼后多久到刑事诉讼？下面我们一起看看小编的分析。一、民事诉讼后多久到刑事诉讼？民事诉讼和刑事诉讼性质不同，是独立的。普通民事纠纷适用民事诉讼，构成犯罪则进行刑事诉讼，二者之间一般没有转化
  • 《每日邦哥说》第46说：真正拥有人格魅力的女性 人民剛
    内心强大的女人，总是很开朗，对于任何事情，都会一笑而过女人最大的底气，是对自己的自信，也是你的安全感一个女人最重要的是活出精彩自我，这样世界才会为你鼓掌猴小邦俱乐部|幸福小家、帮助大家、贡献国家，伙伴们大家好，欢迎收听每日邦哥说，我是邦哥。有一种女人，她们在感情里面容易失去自我，在生活中遇到困难，连还击的资格都没有，做人只能不断妥协，她们大多都没有太强的远见，往往只看到短期的得失。这种女人，其实往
  • Android Slices：让应用功能在系统级交互中触手可及 安卓开发者 AndroidJetpackandroid交互gitee
    引言在当今移动应用生态中，用户每天要面对数十个甚至上百个应用的选择，如何让自己的应用在关键时刻触达用户，成为开发者面临的重要挑战。Google在Android9Pie中引入的Slices技术，正是为了解决这一痛点而生。本文将全面介绍AndroidSlices的概念、实现方法、应用场景以及最佳实践，帮助开发者掌握这一提升用户参与度的强大工具。什么是AndroidSlices？AndroidSlice
  • 个人创业能月入两万的小生意，适合新手做的小生意项目！ 优惠券高省
    互联网浪潮的风起云涌，使得许多人萌生了创业的想法，但同时创业也并不简单，本身市场里面的水很深，如果大家初次创业的话，很有可能会遭受经济的损失。小编为大家着重介绍适合所有人做的月入2万的10个小生意，一起来看看吧。首先推荐大家做互联网电商创业，零投资，轻创业，没有压力，上手就赚钱！门槛低，天花板高！高省时代在变，分享经济是趋势！什么是分享经济：把你认为好的告诉身边的人叫分享，，所以分享经济就是把好的
  • 好学生引路人2021年6月21日星期一 一米阳光2025年
    5组21号董文娟（甘肃省白银市靖远县小芦小学语文教师）的打卡记录：1.听录音，读原文：《论语·学政第二》之2.42[爱心]2.听分享，写心得：认真聆听了好几遍辛教授的讲解《为政第二》2.4后，深有感触，孔子说自己的学习是有所自觉的学习，而不是盲目的学习。自己最向往的志向，三十而立，坚定的自守，立于自己的志向，我感觉我自己正处于这个“三十而立”的年龄，能真正达到一切游刃有余，财务自由，志向远大的生命
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他