HTML5 and CSS3
文章平均质量分 86
语言的学习与应用
~嘘~禁止想象~
~嘘
展开
-
HTML和HTML5的简单区别
html5原创 2021-05-08 15:31:40 · 4799 阅读 · 0 评论 -
selfInformation(修改版本)
selfInformation:https://download.csdn.net/download/weixin_45773503/12322985经过与老师和学长的交流学习之后,对上次的进行了修改,感觉整体上有了较大的改观字体包大小的缩小匹配模板色网页制作的完整性通过这次的网页制作让我对 html5 和 css3的属性值有了更加深入的学习,部分属性应用更加的熟练加油!!!...原创 2020-04-12 12:42:19 · 210 阅读 · 0 评论 -
self-introduction的简易网页
链接:https://download.csdn.net/download/weixin_45773503/12295523summarize:花了两天制作了一个简易的自我介绍的页面,在这次制作过程中,对 css3 和html5 的掌握更加深刻了,还有 js 的选择器效果的学习。最重要的是认识到了身体健康的重要性222333333,以后一定要加强锻炼身体。...原创 2020-04-02 13:48:15 · 174 阅读 · 0 评论 -
一起学习 HTML5
文章目录HTML51. 什么是HTML52. 新增语义标签(部分)3. H5新增多媒体标签HTML51. 什么是HTML5是html5,css3,js新版的总称2. 新增语义标签(部分)1. <header></header> 头部标签2. <nav></nav> 导航标签3. <article>...原创 2020-04-02 12:36:02 · 374 阅读 · 0 评论 -
旋转的相册(css3)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-02 11:49:32 · 213 阅读 · 0 评论 -
3d简易导航栏
3d简易导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2020-03-29 15:25:59 · 179 阅读 · 0 评论 -
CSS3实现翻转盒子
CSS3实现翻转盒子练习一下3d旋转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2020-03-29 15:24:41 · 868 阅读 · 0 评论 -
CSS3 box-reflect 属性
1. 语法box-reflect:none | direction | offset | mask-box-imagedirection = above | below | left | rightoffset = length | percentagemask-box-image = none | url | linear-gradient | radial-gradient |...原创 2020-03-26 15:49:12 · 261 阅读 · 0 评论 -
CSS3 filter(滤镜) 属性的学习
filter(滤镜) 属性<!DOCTYPE html><html><head> <style> div { width: 450px; } img { width: 33%; height: au...原创 2020-03-25 23:49:50 · 257 阅读 · 0 评论 -
帮助理解animation-timimg-function中steps()的小案例
animation-timimg-function1. 打字机效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2020-03-19 13:03:16 · 260 阅读 · 0 评论 -
热点图(CSS3)
热点图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...原创 2020-03-18 14:04:39 · 293 阅读 · 0 评论 -
关于img(前端)
文章目录1. map 图(图中图)2. figure元素(有利于搜索引擎搜索)1. map 图(图中图) <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank"> <img usemap="#solorMap...原创 2020-03-17 13:06:08 · 1564 阅读 · 0 评论 -
啥是css3的伪元素::after和::before
1. 啥是::after 和 ::before,要用来干啥呢?emmmm,它是伪元素。。。用来装饰当前元素;最重要的是实现语义化,如果要创建一些没有实际内容的节点,或者加入辅助样式的文本,那用它就对了。选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容注意:before 和 after 必须有 content 属性...原创 2020-03-16 11:13:36 · 251 阅读 · 0 评论 -
css鼠标样式
css鼠标样式 <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <ul> <li style="cursor:auto">Auto</li><br />/*跟text相同*/ <li style="cursor:crosshair">Crosshair...原创 2020-03-14 21:26:06 · 405 阅读 · 0 评论 -
太极图(纯css3)
太极图会动哦!html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...原创 2020-03-14 11:30:43 · 245 阅读 · 0 评论 -
用float,grid,flex,练习简单导航栏
用float,grid,flex,练习简单导航栏HTML相同(需要引入reset文件)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-03-14 11:17:57 · 239 阅读 · 0 评论 -
Visual Studio Code常用插件(前端)
Visual Studio Code常用插件(前端)插件作用Chinese (Simplified) Language Pack for Visual Studio Code中文包open in browser使用右键在默认浏览器打开JS-CSS-HTML Formatter保存格式化(对齐)Auto Rename Tag自动重命名匹配,只用改一个标...原创 2020-03-13 19:04:08 · 728 阅读 · 0 评论 -
旋转立方体CSS3
旋转立方体css3的学习html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-07 13:15:47 · 186 阅读 · 0 评论 -
轮播图(纯CSS3)
轮播图咋实现:把 n 张照片放在一个盒子里(这个盒子宽度要能装下所有照片,高度跟第二点的盒子一样高).再把这个盒子放在一个你想要实现轮播图的定宽高的盒子里因为里面的盒子比外面的大,所以要使外面的盒子overflow:hidden这样让我们只能看到一张照片。注意:动画效果分为两部分:切换和停留。动画的偏移值和图片大小相关。使用css3实现轮播特效的原理首先必须...原创 2020-03-07 12:18:09 · 1050 阅读 · 0 评论 -
grid布局
概述目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。基本概念在学习grid布局之前,我们需要了解一些基本概念1.容器和项目采用网格布局的区域,称为“容器”。容器内部的采用网格定位的子元素称为“项目” 1 2 3 上面的代码中,wrapper就是容器...原创 2020-02-29 18:50:31 · 413 阅读 · 0 评论 -
认识Bootstrap.
第一个项目在桌面创建项目的文件夹;把项目的文件夹拖入vscode;把bootstrap导入文件夹;新建html 文件夹;创建index.html 文件;给index文件导入 html 的基本样式;给index文件导入Bootstrap的 css 基本样式 2个;给index文件导入Bootstrap的 js 基本样式;下载 jQuery 并导入;...原创 2020-01-31 17:47:49 · 364 阅读 · 0 评论 -
flex布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它...转载 2020-02-18 18:37:00 · 171 阅读 · 0 评论