AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM

2023-02-23 96
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。

著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。

玉兔主题元素绘制

成本最低的绘制方式是使用纯CSS，不依赖任何图片和三方库，首先创建绘制容器：

<div id="rabbit_box">  
    
  
  
</div>

由于是小挂件，我们首先将容器固定在右下角：

#rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

这里加了一层filter滤镜，可以让玉兔更加立体。

考虑到复用性和可移植性，将主题元素动态添加到容器中：

function rabbit_init(){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
     
  
}  
  
rabbit_init()

这里玉兔元素由八个小组件构成，分别是头部，四肢，四爪，两只耳朵，眼睛，尾巴以及嘴。

随后设置CSS样式：

.rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }

兔子身体元素通过border-radius来获得圆润的曲线，同时使用transform旋转元素得到一个适合的角度。最后通过box-shadow属性来设置颜色，颜色可以自定义，如果没有自定义则使用默认值#D2DAEE，注意旋转角度需要指定单位：deg。

接着绘制头部：

.rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }

这里通过::before 和 ::after 伪元素在兔子头部元素的前面或后面插入内容，头部前面绘制兔嘴，后面则插入兔子眼睛，之所以这样控制，是因为可以灵活的使用box-shadow填充颜色。

接着绘制耳朵：

.rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }

@-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }

这里通过-webkit-animation属性让兔子左右耳在3秒内进行来回摆动，达到一种动态效果，注意左耳内侧颜色固定为：#F3E3DE，同时动画会影响元素的布局，需要注意元素的宽高。

最后就是四肢和尾巴：

.rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }

这里四肢和四爪的颜色应该有差异，四肢颜色可以自定义，四爪固定为白色，以达到“四蹄踏雪”的效果。

接着改造初始化函数，使其可以动态更改颜色：

function rabbit_init(color=null,pos=null){  
  
    var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
}  
  
rabbit_init("pink")

最终效果：

开源发布

现在我们将这个开源特效打包上线，首先创建项目目录：

mkdir rabbit

随后将特效的样式CSS代码以及JS代码分别抽离出来：rabbit.css:

.rabbit {  
    position: relative;  
  }  
  .rabbit .rabbit__body {  
    width: 4em;  
    height: 5.6em;  
    background: #F4F4F4;  
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  
    transform: rotate(-40deg);  
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);  
  }  
  .rabbit .rabbit__head {  
    position: absolute;  
    width: 4em;  
    height: 4.6em;  
    top: -2.5em;  
    left: -2em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;  
    transform: rotate(-120deg);  
    overflow: hidden;  
  }  
  .rabbit .rabbit__head:before {  
    content: "";  
    position: absolute;  
    width: 0.65em;  
    height: 0.5em;  
    top: -0.1em;  
    left: 1.8em;  
    background: #F97996;  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform: rotate(130deg);  
  }  
  .rabbit .rabbit__head:after {  
    content: "";  
    position: absolute;  
    width: 1em;  
    height: 1em;  
    top: 1.5em;  
    left: 1.6em;  
    background: #F4F4F4;  
    border-radius: 50%;  
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;  
  }  
  .rabbit .rabbit__ear {  
    position: absolute;  
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;  
    transform-origin: 50% 100%;  
  }  
  .rabbit .rabbit__ear--left {  
    width: 2.2em;  
    height: 4.7em;  
    top: -5.7em;  
    left: -0.2em;  
    background: #F3E3DE;  
    transform: rotate(60deg);  
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);  
    -webkit-animation: ear-left 3s infinite ease-out;  
            animation: ear-left 3s infinite ease-out;  
  }  
  .rabbit .rabbit__ear--right {  
    width: 2em;  
    height: 4.7em;  
    top: -5.5em;  
    left: -0.7em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(20deg);  
    -webkit-animation: ear-right 3s infinite ease-out;  
            animation: ear-right 3s infinite ease-out;  
  }  
  .rabbit .rabbit__leg {  
    position: absolute;  
  }  
  .rabbit .rabbit__leg--one {  
    width: 0.8em;  
    height: 3em;  
    top: 2.3em;  
    left: 0.2em;  
    background: var(--theme-color,#c7d1ea);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(15deg);  
  }  
  .rabbit .rabbit__leg--one:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--three {  
    width: 0.9em;  
    height: 3em;  
    top: 2.4em;  
    left: 0.7em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--three:before {  
    content: "";  
    position: absolute;  
    width: 0.8em;  
    height: 0.5em;  
    top: 2.6em;  
    left: -0.2em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--two {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.7em;  
    left: 1.6em;  
    background: #c7d1ea;  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--two:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__leg--four {  
    width: 2.6em;  
    height: 3.6em;  
    top: 1.8em;  
    left: 2.1em;  
    background: var(--theme-color,#e1e6f4);  
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;  
    transform-origin: 50% 0%;  
    transform: rotate(10deg);  
  }  
  .rabbit .rabbit__leg--four:before {  
    content: "";  
    position: absolute;  
    width: 1.6em;  
    height: 0.8em;  
    top: 3.05em;  
    left: 0em;  
    background: #f3f6ff;  
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;  
    transform: rotate(-10deg);  
  }  
  .rabbit .rabbit__tail {  
    position: absolute;  
    width: 0.9em;  
    height: 0.9em;  
    top: 3.7em;  
    left: 4em;  
    background: var(--theme-color,#D2DAEE);  
    transform: rotate(25deg);  
  }  
  .rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {  
    content: "";  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: var(--theme-color,#D2DAEE);  
    border-radius: 50%;  
  }  
  .rabbit .rabbit__tail:before {  
    top: 0;  
    left: -50%;  
  }  
  .rabbit .rabbit__tail:after {  
    top: 50%;  
    left: 0;  
  }  
    
  @-webkit-keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
    
  @keyframes ear-left {  
    0%, 20%, 100% {  
      transform: rotate(40deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(45deg);  
    }  
    90% {  
      transform: rotate(50deg);  
    }  
  }  
  @-webkit-keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  @keyframes ear-right {  
    0%, 20%, 100% {  
      transform: rotate(10deg);  
    }  
    10%, 30%, 80% {  
      transform: rotate(5deg);  
    }  
    90% {  
      transform: rotate(0deg);  
    }  
  }  
  
  #rabbit_box{  
  
    position: fixed;  
    bottom: var(--pos,5%);   
    right: 35px;   
    z-index: 99;   
    border: none;   
    outline: none;   
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  
  
  }

rabbit.js代码：

(function (name, context, fn) {  
    if (typeof module != 'undefined' && module.exports) {  
        // Node 环境  
        module.exports = fn();  
    } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])) {  
        // Require.js 或 Sea.js 环境  
        define(fn);  
    } else {  
        // client 环境  
        context[name] = fn();  
    }  
})('rabbit_init', this, function () {  
    return function (color=null,pos=null) {  
          
  
        var container = document.getElementById("rabbit_box");  
  
    container.innerHTML = '<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div></div>';  
  
    if(color != null){  
  
        document.documentElement.style.setProperty("--theme-color",color);  
  
    }  
    if(pos != null){  
  
        document.documentElement.style.setProperty("--pos",pos);  
  
    }  
  
  
    }  
});

保存在项目的lib目录。

首先将项目提交到Github: https://github.com/zcxey2911/rabbit

随后运行命令填写NPM配置：

npm init

entry point 配置项填写你的入口文件：

entry point: ./lib/rabbit.js

登录NPM账号，随后发布：

npm login  
npm publish

登录之前，最好将切换回默认源，否则无法登录：

npm config set registry=https://registry.npmjs.com

发布成功后，查看发布内容：https://www.npmjs.com/package/rabbit-widget

开源库引入和使用

首先需要引入模块，可以使用 CDN 直接引入或者通过 NPM 包的形式安装。

直接引入：

<!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css -->  
<!-- https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js -->  
  
<link  
  rel="stylesheet"  
  href="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.css"  
/>  
  
<div id="rabbit_box">  
</div>  
  
<script>  
  
function init_rabbit(){  
  
 rabbit_init("pink","20%");  // 粉色 高度20%  
  
 //rabbit_init(); //默认颜色 默认位置  
  
}  
  
</script>  
  
  
<script  
  async  
  onload="init_rabbit()"  
  src="https://cdn.jsdelivr.net/gh/zcxey2911/rabbit@v1.0.0/lib/rabbit.js"  
></script>

NPM 包的形式安装：

// npm install --save rabbit-widget  
import 'rabbit-widget/lib/rabbit.css';  
  
var rabbit_init = require('rabbit-widget');  
  
rabbit_init();

如果使用NPM导入模块的形式引入，请确保页面加载完毕之后执行再执行rabbit\_init();，否则会报错：Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')。

这里以Vue.js3.0组件为例子：

<template>  
  <a-layout class="layout">  
    <a-layout-header>  
      <div class="logo" />  
  
      <ad_header />  
        
  
  
    </a-layout-header>  
    <a-layout-content style="padding: 0 50px">  
      <a-breadcrumb style="margin: 16px 0">  
        <a-breadcrumb-item>广告平台</a-breadcrumb-item>  
        <a-breadcrumb-item>首页</a-breadcrumb-item>  
  
      </a-breadcrumb>  
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">  
  
  
        这里是首页  
  
  
        <div id="rabbit_box"></div>  
  
  
    </div>  
    </a-layout-content>  
    <a-layout-footer style="text-align: center">  
      在线广告平台  
    </a-layout-footer>  
  </a-layout>  
</template>  
  
<script>  
  
import ad_header from './ad_header';  
  
import 'rabbit-widget/lib/rabbit.css';  
  
var rabbit_init = require('rabbit-widget');  
  
  
export default {  
 data() {  
    return {  
  
       
  
    }  
  },  
  //声明子组件  
  components:{  
  
    'ad_header':ad_header  
  
  
  },  
  methods:{  
  
     
  
  
  },  
  created(){  
  
  
    this.$nextTick(() => {  
    console.log("页面加载完啦~")  
  
    rabbit_init();  
})  
  
  
  }  
  
}  
</script>  
<style>  
.site-layout-content {  
  min-height: 280px;  
  padding: 24px;  
  background: #fff;  
}  
#components-layout-demo-top .logo {  
  float: left;  
  width: 120px;  
  height: 31px;  
  margin: 16px 24px 16px 0;  
  background: rgba(255, 255, 255, 0.3);  
}  
.ant-row-rtl #components-layout-demo-top .logo {  
  float: right;  
  margin: 16px 0 16px 24px;  
}  
  
[data-theme='dark'] .site-layout-content {  
  background: #141414;  
}  
</style>

项目中引入效果：

结语

奉上项目代码，与众亲同飨:https://github.com/zcxey2911/rabbit https://www.npmjs.com/package/rabbit-widget ，最后祝各位乡亲祥瑞玉兔，人机平安，愿诸君2023年武运昌隆，前端一统。

文章标签：
CDN
JavaScript
前端开发
容器
CDN
关键词：
web网页
网页CSS
web CSS
web组件
web原生
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
刘悦的技术博客
目录
相关文章
土木林森
|
2月前
|
JavaScript 前端开发 开发者
哇塞！Vue.js 与 Web Components 携手，掀起前端组件复用风暴，震撼你的开发世界！
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发，单个组件包含模板、脚本和样式，方便构建复杂用户界面。Web Components作为新兴技术标准，利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素，实现跨框架复用。结合二者，不仅增强了Web Components的逻辑和交互功能，还实现了Vue.js组件在不同框架中的复用，提高了开发效率和可维护性。未来前端开发中，这种结合将大有可为。
土木林森
97 0
小徐在进步
|
24天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
小徐在进步
239 91
小徐在进步
|
24天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。
小徐在进步
51 28
小徐在进步
|
24天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式，包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外，还深入解析了不同种类的选择器：标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景，并提供了实例帮助理解。最后，通过具体的新属性示例，指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
小徐在进步
35 15
小徐在进步
|
23天前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
25 9
小徐在进步
|
23天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`&lt;div&gt;`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
小徐在进步
22 6
土木林森
|
2月前
|
移动开发 JavaScript 前端开发
揭秘！如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站？你的设计梦想即将照进现实！
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py，并启动服务器。接着，在Web2py中创建新应用，例如命名为“ResponsiveSite”。随后，编写HTML5基本结构，包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码，实现响应式布局。最后，通过在`scripts.js`中加入jQuery脚本提升页面交互性，如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础，便于进一步扩展和优化。
土木林森
14 1
土木林森
|
2月前
|
前端开发 开发者 C#
WPF开发者必读：MVVM模式实战，轻松实现现代桌面应用架构，让你的代码更上一层楼！
【8月更文挑战第31天】在WPF应用程序开发中，MVVM（Model-View-ViewModel）模式通过分离应用程序的逻辑和界面，提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件：Model（数据模型）、View（用户界面）和ViewModel（处理数据绑定和逻辑），并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式，开发者可以构建更加高效和可扩展的桌面应用程序。
土木林森
58 0
土木林森
|
2月前
|
Java Spring 数据库
怎样动动手指就能实现数据操作？Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中，数据库交互至关重要。传统的JDBC操作繁琐且难维护，而Spring Data JPA作为集成JPA的数据访问层解决方案，提供了CRUD等通用操作接口，显著减少代码量。通过继承`JpaRepository`，开发者能轻松实现数据的增删改查，甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发，提升代码质量和可维护性。
土木林森
29 0
土木林森
|
2月前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用，让你的Web开发如虎添翼，轻松应对复杂业务需求！
【8月更文挑战第31天】在Web应用开发中，Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用（DMI）特性允许在不修改配置文件的情况下动态调用Action类中的方法，相比传统方法调用（需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`），DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用，展示如何利用DMI简化开发流程，并强调了在使用DMI时需注意的安全性和访问控制问题。
土木林森
17 0

热门文章

最新文章

  • 1
    淘宝 NPM 镜像
  • 2
    npm install —— 从一个简单例子，看本地安装与全局安装的区别
  • 3
    [npm]使用(c)npm安装yarn
  • 4
    NPM版本号
  • 5
    GitHub 宣布正式收购 npm | 云原生生态周报 Vol. 42
  • 6
    npm使用指南
  • 7
    多个前端项目中公共组件使用方案（npm包方式）
  • 8
    nodejs全局（npm、cnpm、yarn）及缓存基本配置，一篇就搞定
  • 9
    NPM 使用介绍
  • 10
    npm checkobj 模块
  • 1
    CSS边框
    40
  • 2
    CSS盒子模型
    38
  • 3
    CSS表格
    43
  • 4
    CSS列表
    30
  • 5
    CSS背景
    47
  • 6
    CSS id 和 class
    44
  • 7
    CSS 语法
    49
  • 8
    【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
    93
  • 9
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    91
  • 10
    【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
    85

    • 相关课程

    更多
  • 零基础学前端HTML+CSS
  • 企业Web常用架构LAMP-LNMP实战
  • 前端开发CSS基础
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • React Native 全量化实践—web 技术打造移动研发新模式
  • 基于webpack和npm的前端组件化实践
  • 基于FAAS构建NPM同步CDN

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • 基于ECS搭建Java Web开发环境
  • 搭建Java Web开发环境
  • Internet Information Services（IIS）部署Web项目
  • 基于函数计算快速搭建Zblog等传统应用框架
  • WEB网页编程实战

    • 推荐镜像

    更多
  • NPM
  • pypi
  • composer
    • 下一篇
    无影云桌面