- 方式1: 效果: 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .customer-page { ba... 方式1: 效果: 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .customer-page { ba...
- 效果图: 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片预加载</title> </head> <style> .content { width: 600px; margin: auto; } img { max-width: 100%; } .loa... 效果图: 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片预加载</title> </head> <style> .content { width: 600px; margin: auto; } img { max-width: 100%; } .loa...
- <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></tit... <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></tit...
- <!doctype html><html> <head> <meta charset="UTF-8"> <title>文字滚动:公众号AlbertYang</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> <style type="text... <!doctype html><html> <head> <meta charset="UTF-8"> <title>文字滚动:公众号AlbertYang</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> <style type="text...
- 效果: 标题 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style type="text/css"> * { paddin... 效果: 标题 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style type="text/css"> * { paddin...
- B站视频:https://www.bilibili.com/video/BV1Kp4y167iX 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器 今天带大家实现了一个炫酷的透明计算器,实现的过程中需要用到vanillatiltjs,一个平滑的3D倾斜javascript库,具体的使用和下载地址如下:https://micku7zu.g... B站视频:https://www.bilibili.com/video/BV1Kp4y167iX 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器 今天带大家实现了一个炫酷的透明计算器,实现的过程中需要用到vanillatiltjs,一个平滑的3D倾斜javascript库,具体的使用和下载地址如下:https://micku7zu.g...
- 送你一朵小红花,愿你勇敢的面对生活中的苦难,不要放弃爱与希望,蓝天白云,定会如期而至。 视频: B站视频链接:https://www.bilibili.com/video/BV1xX4y1M7yM 送你一朵小红花,CSS实现一朵旋转的小红花 HTML <!DOCTYPE html><html lang="en"> <head&... 送你一朵小红花,愿你勇敢的面对生活中的苦难,不要放弃爱与希望,蓝天白云,定会如期而至。 视频: B站视频链接:https://www.bilibili.com/video/BV1xX4y1M7yM 送你一朵小红花,CSS实现一朵旋转的小红花 HTML <!DOCTYPE html><html lang="en"> <head&...
- 文章目录 目标:使用CSS完成网站首页的优化需求分析:技术分析步骤分析:代码实现:扩展: 使用DIV+CSS完成注册页面的优化需求分析技术分析步骤分析:代码实现: CSS部分的总结:使用JS完成简单的数据校验需求分析技术分析JavaScript概述JS的组成:JS的语法:JS的数据类型:JS的运算符和语句:JS的输出 JS的开发步骤步骤分析:代码实现 使用JS完... 文章目录 目标:使用CSS完成网站首页的优化需求分析:技术分析步骤分析:代码实现:扩展: 使用DIV+CSS完成注册页面的优化需求分析技术分析步骤分析:代码实现: CSS部分的总结:使用JS完成简单的数据校验需求分析技术分析JavaScript概述JS的组成:JS的语法:JS的数据类型:JS的运算符和语句:JS的输出 JS的开发步骤步骤分析:代码实现 使用JS完...
- 目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 CSS3 filter(滤镜) 属性 2.6 CSS3动画(animation) 3 参考代码 3.1 HTML 3.2 CSS 1 视频 视频地址:h... 目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 CSS3 filter(滤镜) 属性 2.6 CSS3动画(animation) 3 参考代码 3.1 HTML 3.2 CSS 1 视频 视频地址:h...
- 视频 视频地址:https://www.bilibili.com/video/BV1v54y1t7zn 十分钟实现元旦祝福动画,CSS+JavaScript实现节日祝福动画,祝大家元旦快乐 视频已同步到我的B站账号欢迎大家关注。https://space.bilibili.com/563010186 参考代码 HTML: <!DOC... 视频 视频地址:https://www.bilibili.com/video/BV1v54y1t7zn 十分钟实现元旦祝福动画,CSS+JavaScript实现节日祝福动画,祝大家元旦快乐 视频已同步到我的B站账号欢迎大家关注。https://space.bilibili.com/563010186 参考代码 HTML: <!DOC...
- 效果: 实现代码(需要引入jquery): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.8.3.js" type="text/javascript"></script> <style type="text/css"> * { paddin... 效果: 实现代码(需要引入jquery): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.8.3.js" type="text/javascript"></script> <style type="text/css"> * { paddin...
- IE9支持的伪类&伪元素 :root:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child:first-of-type:last-of-typenly-childnly-of-type:empty:target:not(s):enabled:disable... IE9支持的伪类&伪元素 :root:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child:first-of-type:last-of-typenly-childnly-of-type:empty:target:not(s):enabled:disable...
- 项目中用了element-ui,有切换主题色的需要。但官方的方式,有几个问题: 1、需要下载整个element-ui的样式css,并替换其中的css样式颜色。文件较大,下载慢且影响性能。2、只能替换element-ui本身的颜色样式,项目中自己写的颜色样式替换不掉。3、全部的element-ui样式都重新覆盖,渲染较慢,且容易导致覆盖已有样式出现意外问题。 其实带颜... 项目中用了element-ui,有切换主题色的需要。但官方的方式,有几个问题: 1、需要下载整个element-ui的样式css,并替换其中的css样式颜色。文件较大,下载慢且影响性能。2、只能替换element-ui本身的颜色样式,项目中自己写的颜色样式替换不掉。3、全部的element-ui样式都重新覆盖,渲染较慢,且容易导致覆盖已有样式出现意外问题。 其实带颜...
- CSS 提供了三种基本的定位机制:普通流、浮动和定位;通过这三种方式可实现页面的排版布局。 普通流 普通流中元素的位置由元素在 (X)HTML 中的位置决定: 块级元素独自占一行,在文本流中从上到下一个接一个地排列;行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列; 浮动 浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。 定... CSS 提供了三种基本的定位机制:普通流、浮动和定位;通过这三种方式可实现页面的排版布局。 普通流 普通流中元素的位置由元素在 (X)HTML 中的位置决定: 块级元素独自占一行,在文本流中从上到下一个接一个地排列;行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列; 浮动 浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。 定...
- padding 设置 p 元素的 4 个内边距: p { padding:2cm 4cm 3cm 4cm; } 1234 所有浏览器都支持 padding 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。 定义和用法 padding 简写属性在一个声明中设置所有内边距属性。 说明 这个简写属... padding 设置 p 元素的 4 个内边距: p { padding:2cm 4cm 3cm 4cm; } 1234 所有浏览器都支持 padding 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。 定义和用法 padding 简写属性在一个声明中设置所有内边距属性。 说明 这个简写属...
上滑加载中
推荐直播
-
AI编码实干派,“码”力全开2026/02/26 周四 15:00-16:30
谈宗玮/于邦旭/丁俊卿/陈云亮/王一男
【中国,深圳,2026年2月26日】,以“AI编码实干派,码力全开”为主题的华为云码道(CodeArts)代码智能体新春发布会在线上成功召开。华为云码道公测版正式发布,为开发者和企业提供具备工程化能力的智能编码解决方案。
回顾中 -
华为云码道-玩转OpenClaw,在线养虾2026/03/11 周三 19:00-21:00
刘昱,华为云高级工程师/谈心,华为云技术专家/李海仑,上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈,华为云码道最新推出 Skill ——开发者只需输入一句口令,即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道,玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力,华为云开发者生态运营总监/姚圣伟,华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发,看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw,让小艺成为你的AI助理。
回顾中
热门标签