![](https://img-blog.csdnimg.cn/2aa9e6d0f48543b787f273fe40430e3e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5+CSS3
文章平均质量分 56
html5
gxhlh
智慧的获取,能力的提升,创造力的领悟,是基于长期的投资回报周期。
展开
-
用 CSS 画个小企鹅
<style> .penguin { /* 只修改这一行下面的代码 */ --penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange; /* 只修改这一行上面的代码 */ position: relative; margin: auto; display: block; margin-top: 5%; width: 300px;原创 2021-08-01 15:41:32 · 177 阅读 · 0 评论 -
Uncaught TypeError: Cannot set property ‘display‘ of undefined
问题:原因:测试代码<body> <p class="box"></p>111111</p> <p class="box"></p>222222</p> <p class="box"></p>333333</p> <p class="box"></p>444444</p> <p class="box"原创 2021-07-30 00:38:52 · 439 阅读 · 0 评论 -
彻底理解行内元素和块级元素,不必硬背
初窥门径:什么叫行内元素?常见的span、a、lable、strong、b等html标签都是行内元素什么叫块级元素?常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素略知一二:行内元素有:a, span, label, strong, em, br, img, input, select, textarea, cite,块级元素:div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fiel.转载 2021-05-21 01:30:56 · 1255 阅读 · 0 评论 -
前端中使用路径 / ./ ../ ../../ ../../../ 的含义
当我们需要使用图片资源的时候,就涉及到了路径问题,我们来看看基本的几个 / ./ …/ …/…/ …/…/…/ 的含义;第一个 / 这个斜杠代表的是根目录的意思,什么是根目录呢?先看例子:F盘中有个文件夹vue_bamboos和一张图片 test-me.png, vue_bamboos下有一个文件夹 a , a文件夹中有一个文件b;b文件夹下有一个index.html文件; F--------------------------------------转载 2020-08-27 18:07:10 · 1944 阅读 · 0 评论 -
利用CSS3动画让图片动起来
利用CSS3动画让图片动起来原材料:一张png图片实现原理:利用了两个动画bear、move,bear动画让小熊奔跑起来,就是通过控制背景图片的位置让每张小熊图片依次闪过,从而看上去就像跑起来一样,而且可以控制奔跑速度。move动画的作用是让小熊从屏幕边缘跑到屏幕中央的位置。实现代码:<body> <div></div></body&...原创 2020-01-20 18:48:12 · 5372 阅读 · 0 评论 -
CSS3 3D转换
一、 认识 3D 转换1. 3D 的特点近大远小物体和面遮挡不可见2. 三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换1. 3D 转换知识要点3D 位移:translate3d(x, y, z)...原创 2020-01-19 23:33:13 · 202 阅读 · 0 评论 -
CSS3 动画(animation)
一、 动画(animation)1.什么是 CSS3 中的动画?动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果2. 动画的基本使用先定义动画在调用定义好的动画3. 语法格式(定义动画) @keyframes 动画名称 {...原创 2020-01-19 23:11:44 · 470 阅读 · 0 评论 -
CSS3使用一个盒子实现太极图案
使用一个盒子实现太极图案代码如下:<body> <div></div></body>* { margin: 0; padding: 0;}body { background-color: skyblue;}div { width: 200px; height: 400px; background-color: #fff...原创 2020-01-17 18:42:09 · 432 阅读 · 0 评论 -
CSS3实现网站商品展示效果图
html代码<div class="product"> <ul> <li> <div class="pro-img"> <a href="#"> <img src="images/pms_1524883847.49276938!220x220.jpg" alt=""> <...原创 2020-01-17 17:35:15 · 3158 阅读 · 0 评论 -
CSS3伪元素选择器以及2D转换之translate(移动)和rotate(旋转)
一、伪元素选择器1. 伪类选择器2. 伪类选择器注意事项before 和 after 必须有 content 属性before 在内容前面,after 在内容后面before 和 after 创建的是一个元素,但是属于行内元素创建出来的元素在 Dom 中查找不到,所以称为伪元素伪元素和标签选择器一样,权重为 13. 代码示例 <div>爱</div>...原创 2020-01-17 16:51:13 · 1921 阅读 · 0 评论 -
什么是CSS3? CSS3属性选择器和结构伪类选择器的使用
一. 什么是 CSS3CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性...原创 2020-01-17 15:04:33 · 305 阅读 · 0 评论 -
HTML5多媒体音频、视频标签、新增 input表单、表单属性
一、多媒体音频标签1. 多媒体标签有两个,分别是音频 – audio视频 – video2. audio 标签说明可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,但是:播放格式是有限的3. audio 支持的音频格式audio 目前支持三种格式4. audio 的参数5、audio 代码演示<body> <...原创 2020-01-17 12:31:13 · 460 阅读 · 0 评论 -
究竟什么是HTML5`和语义化标签
一、什么是 HTML51. HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML52. HTML5 拓展了哪些内...原创 2020-01-17 12:14:45 · 337 阅读 · 0 评论