不愿意做鱼的小鲸鱼

wordpress字体样式——css炫酷的字体样式实现

demo1:css实现颜色变化

效果如图所示

实现代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        body {
        background: #000;
    }
    .container {
        width: 600px;
        margin: 100px auto 0;
    }
    p {
        font-family: 'Audiowide';
        text-align: center;
        color: #00a67c;
        font-size: 7em;
        -webkit-transition: all 1.5s ease;
                transition: all 1.5s ease;
    }
    p:hover {
        color: #fff;
        -webkit-animation: Glow 1.5s ease infinite alternate;
                animation: Glow 1.5s ease infinite alternate;
    
    }
    @-webkit-keyframes Glow {
        from {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #fff,
                         0 0 40px #00a67c,
                         0 0 70px #00a67c,
                         0 0 80px #00a67c,
                         0 0 100px #00a67c,
                         0 0 150px #00a67c;
        }
        to {
            text-shadow: 0 0 5px #fff,
                         0 0 10px #fff,
                         0 0 15px #fff,
                         0 0 20px #00a67c,
                         0 0 35px #00a67c,
                         0 0 40px #00a67c,
                         0 0 50px #00a67c,
                         0 0 75px #00a67c;
        }
    }
    @keyframes Glow {
        from {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #fff,
                         0 0 40px #00a67c,
                         0 0 70px #00a67c,
                         0 0 80px #00a67c,
                         0 0 100px #00a67c,
                         0 0 150px #00a67c;
        }
        to {
            text-shadow: 0 0 5px #fff,
                         0 0 10px #fff,
                         0 0 15px #fff,
                         0 0 20px #00a67c,
                         0 0 35px #00a67c,
                         0 0 40px #00a67c,
                         0 0 50px #00a67c,
                         0 0 75px #00a67c;
        }
    }
    style>
head>
<body>
    <div class="container">
        <p>左眼会陪右眼哭の博客p>
    div>
    
    
body>
html>

demo2：css实现鼠标悬停炫酷效果

效果如图所示（有动画效果）

代码如下


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            .but{
                border: 2px solid #f35626;
                padding: 1.5rem;
                color: #f35626;
                -webkit-animation: hue 1s infinite linear;
                background-color: transparent;
                -webkit-appearance:none;
                border-radius: 10px;
            }
            @-webkit-keyframes hue {
              from {
                -webkit-filter: hue-rotate(0deg);
              }

              to {
                -webkit-filter: hue-rotate(-360deg);
              }
            }

            .title{
                color: #f35626;
                /*font-size: 6rem;*/
                background-image:-webkit-linear-gradient(92deg,#f35626,#feab3a);
                -webkit-animation: hue 2s infinite linear;
                -webkit-text-fill-color: transparent;
                -webkit-background-clip:text;
            }


        style>
    head>
    <body>
        <h3 class="title">animate cssh3>
        <button type="button" class="but">左眼会陪右眼哭の博客button>
    body>
html>

demo3霓虹特效（加旋转特效）

效果如图所示

实现代码如下


<html>

<head>
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        body {

            background-color: #000000;
        }

        #logo {
            position: absolute;
            top: 200px;
            left: 40%;
            font-weight: 600;
            font-size: 50px;
            font-family: "华文行楷";
            color: #8c888b;
            background: -webkit-linear-gradient(45deg,red,green,blue,pink,orange, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
            color: transparent;
            /*设置字体颜色透明*/
            -webkit-background-clip: text;
            /*背景裁剪为文本形式*/
            animation: ran 3s linear infinite;
            /*动态10s展示*/
        }

        #logo:hover {
            animation-play-state: paused;
            animation: 1s 0.1s normal 1 running spin;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes spin {
            0% {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes ran {
            from {
                backgroud-position: 0 0;
            }

            to {
                background-position: 2000px 0;
            }
        }
    style>
head>

<body>
    <a class="navbar-brand" id="logo" href="#">左眼会陪右眼哭の博客  a>
body>

html>

demo4抖动特效

实现代码如下


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .shaky {
            display: inline-block;
            
            padding: 1px;
            font-size: 25px;
            color: chartreuse;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-name: shaky-slow;
            -ms-animation-name: shaky-slow;
            animation-name: shaky-slow;
            -webkit-animation-duration: 4s;
            -ms-animation-duration: 4s;
            animation-duration: 4s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;
            
        }

        @-webkit-keyframes shaky-slow {
            0% {
                -webkit-transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)
            }

            4% {
                -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
            }

            6% {
                -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
            }

            8% {
                -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
            }

            10% {
                -webkit-transform: translate(1.4px, 0px) rotate(-2deg)
            }

            12% {
                -webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
            }

            14% {
                -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
            }

            16% {
                -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
            }

            18% {
                -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
            }

            20% {
                -webkit-transform: translate(1px, 1px) rotate(-0.5deg)
            }

            22% {
                -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
            }

            24% {
                -webkit-transform: translate(-1.4px, -1px) rotate(2deg)
            }

            26% {
                -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
            }

            28% {
                -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
            }

            30% {
                -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
            }

            32% {
                -webkit-transform: translate(-1px, 0px) rotate(2deg)
            }

            34% {
                -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
            }

            36% {
                -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
            }

            38% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
            }

            40% {
                -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
            }

            42% {
                -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
            }

            44% {
                -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
            }

            46% {
                -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
            }

            48% {
                -webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
            }

            50% {
                -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
            }

            52% {
                -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
            }

            54% {
                -webkit-transform: translate(1.6px, -1px) rotate(-2deg)
            }

            56% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
            }

            58% {
                -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
            }

            60% {
                -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
            }

            62% {
                -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
            }

            64% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            66% {
                -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
            }

            68% {
                -webkit-transform: translate(0px, -1.6px) rotate(-2deg)
            }

            70% {
                -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
            }

            72% {
                -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            74% {
                -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
            }

            76% {
                -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
            }

            78% {
                -webkit-transform: translate(-1px, 1.4px) rotate(2deg)
            }

            80% {
                -webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
            }

            82% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
            }

            84% {
                -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
            }

            86% {
                -webkit-transform: translate(1px, 1.4px) rotate(-2deg)
            }

            88% {
                -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
            }

            90% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            92% {
                -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            94% {
                -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            96% {
                -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
            }

            98% {
                -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
            }
        }

        @keyframes shaky-slow {
            0% {
                transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                transform: translate(-1px, 1.5px) rotate(1.5deg)
            }

            4% {
                transform: translate(1.3px, 0px) rotate(-0.5deg)
            }

            6% {
                transform: translate(1.4px, 1.4px) rotate(-2deg)
            }

            8% {
                transform: translate(-1.3px, -1px) rotate(-1.5deg)
            }

            10% {
                transform: translate(1.4px, 0px) rotate(-2deg)
            }

            12% {
                transform: translate(-1.3px, -1px) rotate(-2deg)
            }

            14% {
                transform: translate(1.5px, 1.3px) rotate(1.5deg)
            }

            16% {
                transform: translate(1.5px, -1.5px) rotate(-1.5deg)
            }

            18% {
                transform: translate(1.3px, -1.3px) rotate(-2deg)
            }

            20% {
                transform: translate(1px, 1px) rotate(-0.5deg)
            }

            22% {
                transform: translate(1.3px, 1.5px) rotate(-2deg)
            }

            24% {
                transform: translate(-1.4px, -1px) rotate(2deg)
            }

            26% {
                transform: translate(1.3px, -1.3px) rotate(0.5deg)
            }

            28% {
                transform: translate(1.6px, -1.6px) rotate(-1.5deg)
            }

            30% {
                transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
            }

            32% {
                transform: translate(-1px, 0px) rotate(2deg)
            }

            34% {
                transform: translate(1.3px, 1.3px) rotate(-0.5deg)
            }

            36% {
                transform: translate(1.3px, 1.6px) rotate(1.5deg)
            }

            38% {
                transform: translate(1.3px, -1.6px) rotate(1.5deg)
            }

            40% {
                transform: translate(-1.4px, -1px) rotate(-0.5deg)
            }

            42% {
                transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
            }

            44% {
                transform: translate(-1.6px, 1.4px) rotate(0.5deg)
            }

            46% {
                transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
            }

            48% {
                transform: translate(1px, 1.6px) rotate(1.5deg)
            }

            50% {
                transform: translate(1.6px, 1.6px) rotate(1.5deg)
            }

            52% {
                transform: translate(-1.4px, 1.6px) rotate(0.5deg)
            }

            54% {
                transform: translate(1.6px, -1px) rotate(-2deg)
            }

            56% {
                transform: translate(1.3px, -1.6px) rotate(-2deg)
            }

            58% {
                transform: translate(-1.3px, -1.6px) rotate(0.5deg)
            }

            60% {
                transform: translate(1.3px, 1.6px) rotate(-0.5deg)
            }

            62% {
                transform: translate(0px, 0px) rotate(-1.5deg)
            }

            64% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            66% {
                transform: translate(1.6px, -1.6px) rotate(0.5deg)
            }

            68% {
                transform: translate(0px, -1.6px) rotate(-2deg)
            }

            70% {
                transform: translate(-1.6px, 1px) rotate(1.5deg)
            }

            72% {
                transform: translate(-1.6px, 1.6px) rotate(2deg)
            }

            74% {
                transform: translate(1.3px, -1.6px) rotate(-0.5deg)
            }

            76% {
                transform: translate(1.4px, 1px) rotate(-0.5deg)
            }

            78% {
                transform: translate(-1px, 1.4px) rotate(2deg)
            }

            80% {
                transform: translate(1.4px, 1.6px) rotate(2deg)
            }

            82% {
                transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
            }

            84% {
                transform: translate(-1.4px, 1.4px) rotate(-2deg)
            }

            86% {
                transform: translate(1px, 1.4px) rotate(-2deg)
            }

            88% {
                transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
            }

            90% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            92% {
                transform: translate(-1.4px, 1.6px) rotate(2deg)
            }

            94% {
                transform: translate(-1.6px, -1.6px) rotate(-2deg)
            }

            96% {
                transform: translate(-1.4px, 1.3px) rotate(-2deg)
            }

            98% {
                transform: translate(1.3px, 1px) rotate(-0.5deg)
            }
        }
    style>
head>

<body>
    <span class="shaky">你在说什么( ,,´･ω･)ﾉ"(´っω･｀｡)span>

body>

html>

小结

这些都是自己在使用wordpress时想要更选一点的样式效果，整理出来的css样式，虽然现在还看不太懂，因为css真的博大精深，但是能够看得懂，然后修改成自己想要实现的效果，那就OK了，至于学的话，慢慢来。嘻嘻嘻 ^~ !
ps:这是自己使用css实现的博客效果图

DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
HTML中"bgcolor"与"background-color"的区别 Sardar_ html
bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
2019-05-29 vue-router的两种模式的区别 Kason晨
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
清除 Conda 缓存 Dmatteratall conda 缓存
清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
electron多标签页模式更像客户端 diygwcom electron javascript 前端
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
前端HTML+CSS+JS的入门学习俊昭喜喜里前端 html css
一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个
10/24 每周学习总结5 木木ainiks 1024程序员节
1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
HTML5概述 WFIT~SKY Web前端 html5 前端 html
1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
CSS中如何实现鼠标悬停效果？神明木佑 css 前端
在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
js的书写位置和css的书写位置的区别？为什么要这样写？李是啥也不会 javascript css 开发语言
JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
【H2O2|全栈】关于CSS（3）CSS基础（三）过期的H2O2 【H2O2】CSS入门 css 前端
目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
css3实现鼠标放到图标上自动切换图标黄丫丫07 css css3 html
作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
CSS实现鼠标移动到购物车显示详情 AsiaFT. css css3 html
需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具 javascript 前端 html
效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
unocss 一直热更新打印[vite] hot updated: /__uno.css 柳雾青烟紫燕穿 css css3 vue
控制台持续打印了几千条这条信息，页面逐渐卡死client.ts:450[vite]hotupdated:/__uno.css找出的原因是：依赖出问题了，重新安装unocss，执行命令npmiunocss后修复。但奇怪的是，删除node_modules重新全部安装依赖却不能修复，tmd。还有一种解决方法是切换分支，切去其它分支，再切回来，也不会再打印了。一开始还怀疑了是哪里的unocss类名一直在监
tomcat基础与部署发布暗黑小菠萝 Tomcat java web
从51cto搬家了，以后会更新在这里方便自己查看。做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。一、Tomcat安装安装方式：①运行.exe安装包 &n
网站架构发展的过程 ayaoxinchao 数据库应用服务器网站架构
1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
[信息与安全]数据库的备份问题 comsci 数据库
如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢? 是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢? &n
使用maven tomcat plugin插件debug关联源代码商人shang maven debug 查看源码 tomcat-plugin
*首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
大访问量高并发 oloz 大访问量高并发
大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。
cache 服务器小猪猪08 cache
Cache 即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。　　1.Cache 是怎么样工作的? 　　Cache 是分配在服务器上
mysql存储过程香水浓 mysql
Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch
CSS的class、id、css文件名的常用命名规则 agevs JavaScript UI 框架 Ajax css
CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right
全局数据源 AILIKES java tomcat mysql jdbc JNDI
实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
MYSQL的随机查询的实现方法 baalwolf mysql
MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
JAVA的getBytes()方法 bijian1013 java eclipse unix OS
在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！ String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "
AngularJS中操作Cookies bijian1013 JavaScript AngularJS Cookies
如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
[Maven学习笔记五]Maven聚合和继承特性 bit1129 maven
Maven聚合在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use
【JVM七】JVM知识点总结 bit1129 jvm
1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler
linux下查看nginx、apache、mysql、php的编译参数 ronin47
在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/
unity中运用Resources.Load的方法？ brotherlamp unity视频 unity资料 unity自学 unity unity教程
问：unity中运用Resources.Load的方法？答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件
线段树-入门 bylijinnan java 算法线段树
/** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna
全选与反选 chicony 全选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title>
vim一些简单记录 chenchao051 vim
mac在/usr/share/vim/vimrc linux在/etc/vimrc 1、问：后退键不能删除数据，不能往后退怎么办？答：在vimrc中加入set backspace=2 2、问：如何控制tab键的缩进？答：在vimrc中加入set tabstop=4 (任何
Sublime Text 快捷键 daizj 快捷键 sublime
[size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
php 引用(&)详解 dcj3sjt126com PHP
在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址变量的引用 PHP 的引用允许你用两个变量来指向同一个内容复制代码代码如下: <? $a="ABC"; $b =&$a; echo
SVN中trunk,branches,tags用法详解 dcj3sjt126com SVN
Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
对软件设计的思考 e200702084 设计模式数据结构算法 ssh 活动
软件设计的宏观与微观软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
同步、异步、阻塞、非阻塞 geeksun 非阻塞
同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。实现：
Reverse SSH Tunnel 反向打洞實錄 hongtoushizi ssh
實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 [email protected] # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1
Hibernate中的缓存 Josh_Persistence 一级缓存 Hiberante缓存查询缓存二级缓存
Hibernate中的缓存一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
对象关系行为模式之延迟加载 home198979 PHP 架构延迟加载
形象化设计模式实战 HELLO!架构一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。二、实现延迟加载实现Lazy Load主要有四种方法：延迟初始化、虚
xml 验证 pengfeicao521 xml xml解析
有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str = "Jamey친Ñ&#1282
div设置半透明效果 spjich css 半透明
为div设置如下样式： div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
你真的了解单例模式么？ w574240966 java 单例设计模式 jvm
单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。一，单例模式的5中写法。（回字的四种写法，哈哈。） 1，懒汉式（1）线程不安全的懒汉式 public cla

wordpress字体样式——css炫酷的字体样式实现

demo1:css实现颜色变化

demo2：css实现鼠标悬停炫酷效果

demo3霓虹特效（加旋转特效）

demo4抖动特效

小结

你可能感兴趣的:(css)