前端基础知识
html,HTML5,css,CSS3
你好y
这个作者很懒,什么都没留下…
展开
-
Html基础
Html基础 这是我从一开始学html 自己写的笔记,都是最基础的知识点。今天是开学第一天,这学期也刚好要学这个,整理一下. Web标准有三层结构:结构(html),表现(css)和行为(javascript) Html语言的语法骨架格式 <html> //根标签 <head> //文档头部 <title></title>...原创 2020-02-24 16:17:11 · 1083 阅读 · 0 评论 -
HTML5页面元素及属性
HTML5页面元素及属性 列表元素 对于有序列表ol,序号可以改变: 以A,B,C开头: <ol type="A"> <li>春</li> </ol> 倒序排列: <ol reversed> <li>春</li> </ol> 以指定的某数开始排列: <ol start="20"> <l...原创 2020-03-20 20:11:09 · 488 阅读 · 0 评论 -
HTML5新增多媒体标签
音频标签 视频标签 音频标签 < audio>音频标签常见属性 属性 值 描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上插放。 controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频秸柬时重新开始播放。 src url 要播放的音频的URL. ...原创 2020-03-31 09:20:33 · 484 阅读 · 0 评论 -
VSCode插件安装
1.点击拓展工具 2.搜索你要安装的插件名称,并选择安装。 3.关闭重新打开VSCode或者点重新加载。原创 2020-03-25 16:06:37 · 188 阅读 · 0 评论 -
HTML5新增input元素
HTML5新增input元素 (1) 数值输入域–number 将input标记中的type属性设置为number,可以在表单中插入数值输入域。提交表单时,会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内,则会出现错误提示。 <input name="" type=" number" min=" " max="" step="" value="" />...原创 2020-03-27 21:13:50 · 1381 阅读 · 0 评论 -
HTML5表格之邮箱会员注册
实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...原创 2020-03-23 16:11:43 · 615 阅读 · 0 评论 -
CSS3之选择器
属性选择器原创 2020-03-29 20:41:50 · 84 阅读 · 0 评论 -
CSS3D转换(坐标与transfrom)
1.移动 沿着x轴,y轴和z轴移动,可分开写,也可在一起写。 transform:translateX() translateY() translateZ(); 3D移动简写: transform:translate3d(x,y,z); 其中x,y,z不能省略,没有就写0 2.透视 如果想在网页中产生3D效果就需要透视(理解为3D物体投影在2D平面内),其单位px 透视要写在被观察元素的父...原创 2020-05-10 20:33:44 · 586 阅读 · 0 评论 -
CSS3之动画基本知识和相关属性
动画 动画的基本使用 制作动画分为两步: 1.先定义动画 2.再使用(调用)动画 1.用keyframes定义动画(类似定义类选择器) @keyframes动画名称{ 出 0%{ width: 100px; 100号{ width: 200px; 2.元素使用动画 div ( width: 200px; height: 200px; background-color: aqua; margin:...原创 2020-04-04 21:12:00 · 189 阅读 · 0 评论 -
CSS3之2D转换相关基本知识
2D转换之位移 二维坐标系: 移动位置的方法有 : 定位, margin 1.语法 transform: translate(x,y); 或者分开写 transform: translateX(n) ; //在x 轴方向上变动 transform: translateY (n) ; // 在y 轴上 变动 2.重点 定义2D转换中的移动,沿着x和Y轴移动元素 translate最大的优点:不...原创 2020-04-02 17:10:59 · 222 阅读 · 0 评论 -
css小技巧
display的显示与隐藏(隐藏后不在占有位置): display:none;(隐藏元素) display:block;(除了转换为块状元素以外,还可以显示元素) visibility的显示与隐藏(隐藏后保留位置): visibility:hidden(隐藏元素) visibility:visible(显示元素) overflow溢出 显示与隐藏总结 属性 区别 用途 displ...原创 2020-03-01 18:36:06 · 102 阅读 · 0 评论 -
css盒子模型
css盒子模型 盒子模型由内容,边框(border),内边距(padding),外边距(margain)组成 边框(border): 属性:边框粗细(border-width),边框样式(border-style),边框颜色(border-color) 边框的样式 none:没有边框(默认值) solid:边框为实线 dashed:边框为虚线 dotted:边框为点线 边框的综合型写法 ...原创 2020-02-09 10:50:07 · 540 阅读 · 0 评论 -
CSS案例之小米首页样面
小米首页样面 学了几天的css,做了一个小实例。那先来说说感受:发现做一个页面说简单也简单,说不简单也不简单。对于刚开始学习的我,里面的每个小数据都要经过几次修改(无奈)。有的时候看着视频里的老师做的那么轻松简单,我都有一种复杂的感情(捂脸哭)。我发现这个没法插入表情真的不太好哎。在制作的过程中有一个小地方真的要把我气吐血了,就是有的时候呢父盒子不好定高度,而子盒子又浮动,所以导致父盒子高度就变成...原创 2020-02-19 21:04:49 · 495 阅读 · 0 评论 -
CSS浮动(清除浮动)
CSS浮动 css有三种机制来设置盒子的摆放位置,分别为普通流,浮动和定位 普通流: 1.块状元素独自占一行,从上而下排序。 常见元素:div, hr, p, h1-h6, ul, ol, dl, form, table 2.行内元素从左到右排序 常见元素:span,a,i,em 等 浮动: 1.让多个块级盒子在一行显示 2.实现盒子的左右对齐 3.控制图片,实现文字环绕图片的效果 定位:将盒子定...原创 2020-02-11 17:39:19 · 230 阅读 · 0 评论 -
CSS之定位
CSS定位 定位 = 定位模式 + 边偏移 边偏移:top,bottom,left,right 定位模式(position): 值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 静态定位:(无定位)无边偏移,(了解) 相对定位(自恋型): 1.是相对于自己原来的位置移动。 2.原来占有的区域继续占有,后...原创 2020-02-24 15:40:54 · 152 阅读 · 0 评论