html
关注
分享
扫一扫
文章平均质量分 52
七上八下的爆米花
无
展开
-
html动画完成一个环形的照片墙加背景音乐
思路：大致就是让所有盒子绝对定位，然后给每一个盒子设置动画，让其盒子沿y轴方向旋转，并且向z轴移动，盒子之间的动画需要有一定的延迟时间，让所有盒子旋转到一定位置时，让其父级进行关于y轴的旋转<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title&am原创 2018-06-25 17:22:44 · 2488 阅读 · 0 评论 -
html动画的基本知识点，用动画做出一个轮播图
定义动画关键帧方案 @keyframe 动画名{ 0%(from){ 样式 } 100%(to){ 样式 }}设置动画名称(关键帧)animation-name:动画名;动画播放时间animation-duration: 2s;动画播放完成后的停止位置 默认是backwards:播放完成后回到第一个关键帧样式forwards：播放完成后回到最后一个关键帧样式animatio...原创 2018-06-25 17:11:53 · 2681 阅读 · 0 评论 -
html中css3之3d基本知识点 完成一个立方体的并且让其旋转
1.开启该盒子的3d视图，让其内部的子级进行3d变化时，可见transform-style: preserve-3d;2.设置观察者距离：设置了观察者和变形盒子之间的距离，盒子在沿z轴变化时，将在设置的距离上按照近大远小的规律变化perspective: 500px;3.设置3d观察者的角度 perspective-origin：center center （中心） perspective-ori...原创 2018-06-25 17:00:26 · 2359 阅读 · 0 评论 -
html中的音频和视频标签
音频标签<audio controls="" autoplay="" src="./audio/haha.mp3">你的浏览器不支持，请更新浏览器为避免兼容性这些后缀的文件都需要写<source src="./audio/haha.mp3" type=""><source src="./audio/haha.ogg" t原创 2018-06-23 14:28:00 · 5345 阅读 · 0 评论 -
html编写移动端界面时常用的弹性盒子的基础知识点
弹性盒子在pc端存在兼容性问题，在移动端不存在，是编写移动端项目时大量使用的布局方式弹性盒子display:flex;设置子级排列的方向 flex-direction:row;默认情况下是水平为row从左向右row-reverse 从右向左column 列分布 从上向下column-reverse 列分布 从下向上设置子级盒子是否强制换行 flex-wrap:wrap;默认是nowrap不换行wr...原创 2018-06-23 11:01:18 · 1499 阅读 · 0 评论 -
关于a标签的伪类选择器使用顺序
链接被访问之前选中a:link{ color: red; }链接被访问之后选中a:visited{ color: black; }鼠标悬停被选中a:hover{ color: green; }链接被按下之后a:active{ color: yellow; }由于样式的叠加特性和用户的操作先后顺序影响， 以上四个伪类选择器在书写时尽量按照 link vistied hove...原创 2018-06-23 10:58:01 · 5108 阅读 · 0 评论 -
html中的css3中过渡的使用
重点：只有属性的值是数值类型时，该属性才能响应过渡效果display:none;会中断所有的过渡效果，后期可以通过js来解决 /*过渡总时间*/ transition-duration: 2s; /*响应过渡属性设置*/ transition-property:width background; text...原创 2018-06-14 11:07:35 · 521 阅读 · 0 评论 -
html中 CSS3 :nth-child() 选择器
:nth-child(n)选择器匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。n 可以是一个数字，一个关键字，或者一个公式。该选择器匹配同类型中的第n个同级兄弟元素。指定每个p元素匹配父元素中的第2个子元素的背景色：p:nth-child(2){ background:#ff0000;}奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）...原创 2018-06-13 10:21:54 · 5575 阅读 · 1 评论 -
CSS :first-line 伪元素 用来指定选择器第一行的样式。
first-line选择器用来指定选择器第一行的样式。:first-line是伪元素，它生成包含元素的第一个格式化行的伪元素。:first-line样式表示元素中的第一行文本，无论该行中可能出现多少个词。:first-line只能附加到块级元素。可以应用到首字母的属性是有限的。注意: :first-line选择器可以使用以下属性： font propertiescolor properties b...原创 2018-06-13 10:02:16 · 5058 阅读 · 0 评论 -
CSS :first-letter 伪元素 指定元素第一个字母的样式
:first-letter选择器用来指定元素第一个字母的样式。:first-letter是伪元素，它生成包含元素的第一个字母的伪元素。:first-letter样式是元素的第一个字母。任何引导标点符号都应与第一个字母一起设置样式。在CSS2.1之前，:first-letter可以只附加到块级元素。CSS2.1扩展其范围，包括块，列表项，表调用，表标题和内联块元素。可以应用到首字母的属性是有限的。h...原创 2018-06-13 09:57:17 · 5828 阅读 · 0 评论 -
html中媒体查询技术和引用方式
有三种引入方式 1.在样式表的所有选择器后通过@media screen and (条件1) and (条件2){ 样式表 } 有条件的引入，如果屏幕尺寸到达范围内后某个盒子样式不能被改变，从样式优先级和叠加 特性角度去检查 2写在Link标签中，根据屏幕宽度有条件的引入外部样式表 <link rel="stylesheet" href="" media =" screen and (条...原创 2018-06-11 14:10:38 · 5572 阅读 · 0 评论 -
html中关于form表单的基本知识点
表单输入框采集的信息：提交给后端，是通过form标签的action属性来完成的， 其中的Method属性设置了请求提交方式，默认情况是get, 发送的数据都是以 name=value对形式发送， 以字符串的形式凭借在接口地址之后。 post:加密发送，出来可以发送数据，也可以传送文件; input标签中的name是前后端自定义的约定好的字符，必须填写 input标签...原创 2018-06-11 14:07:45 · 816 阅读 · 0 评论 -
html中关于table的简单介绍合并表格等
表格结构 tr:table row th:table head td:table date 表格完整结构： table 内3个子级 thead:语义化标签，用来表示表头内容 tbody:语义化标签，用来表示表数据内容 tfoot:语义化标签，用来表示表尾内容 tr :表示表中的一行 th :表示每行的单元个体，一般用于表头行，默认样式让文字加粗并居中显示 td ...原创 2018-06-11 14:04:01 · 1382 阅读 · 0 评论 -
html5编写一个手机app的首页
头部和底部固定不动，用fixed固定定位中间用overflow:scroll;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width&am原创 2018-06-09 10:15:32 · 27155 阅读 · 4 评论 -
html编写一个手机app的的订单页面
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me原创 2018-06-09 10:10:25 · 17403 阅读 · 3 评论 -
html5写一个简单的手机app的设置界面
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me原创 2018-06-09 10:08:05 · 24745 阅读 · 4 评论 -
html中关于BFC的概念和应用场景
BFC概念和应用场景BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化） Context（上下文）==块级格式化上下文 的概念。 BFC(Block formatting context)直...原创 2018-06-06 09:09:31 · 783 阅读 · 0 评论 -
html中如何隐藏一个盒子，然后用hover让其显示
1.第一种：opacity: 0;表示透明度为0；此时盒子看不见 当设置opacity: 1;表示盒子完全显示出来2.第二种：display:none;表示盒子被隐藏不存在，display:block;表示盒子存在，被显示出来个人认为第二种好用，合适各种情景，配合hover使用。...原创 2018-06-06 09:02:40 · 13101 阅读 · 0 评论 -
HTML中模仿infini网界面所做的网页界面
HTML中模仿infini网界面所做的网页界面 图片都是从原网站保存的 效果图： 头部用透明色背景进行了固定定位，鼠标向下滑动时，头部固定，并显示在最上面，提高头部的z-index值 让它不会被后面定位的模块所覆盖鼠标点在小图上触发hover效果 下图中央部分，透明的背景和中央的字体都是通过相对定位覆盖在上面的 定位之后隐藏，Hover触发之后进行显示<!DOCTYPE html>...原创 2018-06-02 11:23:15 · 753 阅读 · 0 评论 -
网页设计基本规范
UI设计: 界面设计 交互设计(UE) 平面设计：手册，海报，电商视觉设计，不涉及产品的操作流程，静态，设计区域有限 网页构成： 1.页眉 2.条幅广告区 3.内容区域 4.页脚: 页面的颜色较多，页脚尽量使用深色系，如果使用灰色系是基本通用的，头脚在颜色搭配上要呼应 页面尺寸： 1.页眉 ...原创 2018-06-01 19:09:48 · 9737 阅读 · 0 评论 -
html中CSSReset(样式重置)
语义化标签在不同浏览器上的默认样式会有一些差异，这些差异导致相同的样式表在不同 的浏览器上显示结果不同。换言之在进行布局时，不要依赖标签默认样式进行编写，必须 给用到的语义化标签，设定统一明确的初始样式。这个设定过程称为CSSReset(样式重置) 目前比较流行的时通过normalize.css来完成样式初始化，我们可以修改normalize.css 来适应自己的项目，所有的Html都必...原创 2018-06-01 19:08:08 · 4274 阅读 · 0 评论 -
html中常见类型名称
1.样式表命名习惯，组件化 头部：header.css 公共部分：public.css/base.css 主题：themes.css 字体：font.css 2.选择器 导航：nav 登录：loginBox 表示：logo 侧边栏：sideBar 条幅广告：banner 子导航：subNav 菜单：menu 搜索框：searchBox 滚动框：scrollBox 提示...原创 2018-06-01 19:06:03 · 4182 阅读 · 0 评论 -
html样式表三种引入方式
样式表三种引入方式 1.行间样式，写在开始标签内部，优先级最高，维护性最差，尽量避免使用 2.内部样式表，写在style标签内，优点：一般不会造成样式丢失，缺点：可维护性较低 3.外部样式表，写在.css文件中，在Html中靠Link标签引入，优点：代码分离方便维护，目前 主流样式引入方式 外部样式表和内部样式表，没有优先级关系，选择器优先级相同的情况下，谁写在后谁生效...原创 2018-06-01 19:04:47 · 1676 阅读 · 0 评论 -
html相对定位position:relative;
position:relative; 相对定位：盒子相对于自身原始文本流位置进行定位比原始文本流高半层，依然具有默认文本流盒子特点，由于该 位置属性对原始文本流影响最小，常常用来作为absolute定位盒子的定位父级设置属性 从布局角度，relative的使用场景,往往是对盒子进行一些微调整，希望该盒子的位置的改变不影响其他默认文本流盒子...原创 2018-06-01 16:08:43 · 3702 阅读 · 0 评论 -
html中设置色彩透明度rgba
rgba(0,0,0,0) 前三个是rgb值，0~255，0表示最深，r是red,g是green,b是blue 整个颜色由rgb三色配成 a:透明度0-1; 0:完全透明; 1：完全不透明...原创 2018-06-01 14:24:31 · 15790 阅读 · 0 评论 -
HTML中定位之绝对定位position:absolute;
position: absolute;盒子发生绝对定位，将脱离原来文本，盖在其他盒子之上，进行定位操作时，将按照某一个 父级进行定位，该父级具有以下特点： 1.position 属性是非static一般情况下父级设置相对定位：常作为定位父级标志 position: relative; 2.在文档结构上距离该绝对定位的盒子最近 盒子绝对定位后，其宽高将按照定位...原创 2018-06-01 14:19:36 · 7962 阅读 · 0 评论 -
HTML中关于浮动的知识点
1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级...原创 2018-05-30 22:14:56 · 2801 阅读 · 0 评论 -
html速查列表
HTML 基本文档<!DOCTYPE html><html><head><title>文档标题</title></head><body> 可见文本... </body></html>基本标签（Basic Tags）<h1&g原创 2018-05-26 09:51:04 · 151 阅读 · 0 评论 -
html标签的block、inline分类明细
块元素(block element)m]◎ address - 地址◎ blockquote - 块引用◎ center - 举中对齐块◎ dir - 目录列表◎ div - 常用块级容易，也是css layout的主要标签◎ dl - 定义列表◎ fieldset - form控制组◎ form - 交互表单◎ h1 - 大标题◎ h2 - 副标题◎ h3 - 3级标题◎ h4 - 4级标题◎ ...原创 2018-05-25 22:40:32 · 3148 阅读 · 0 评论 -
HTML中的常见标签
标题标签 h1~h6段落标签 p无序列表 <ul> <li></li> </ul>有序列表 将ul换成ol<b> <strong>对字体有加粗效果 但是strong有语义性 表示强调 <i> <em>对字原创 2018-05-25 22:25:47 · 183 阅读 · 0 评论 -
html编写一个静态的左侧导航页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>汽车配件</title> <style type="text/css"> .content{ width: 900原创 2018-05-25 22:13:12 · 13254 阅读 · 0 评论 -
html中写一个天猫商城的购物模块界面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main{ width: 10原创 2018-05-25 22:10:28 · 10005 阅读 · 2 评论 -
html图片在盒子中下方可能产生间隙,Inline属性导致
方法一：将img设置为block； display：block； 方法二：设置img的竖直对齐； vertical-align: bottom; 方法三：设置父级div的font-size:0; 方法四：设置外层div的行高； line-height:0px; 方法五: 定位 父级：position:relative; ...原创 2018-05-25 22:07:02 · 1838 阅读 · 0 评论 -
html中用盒子模型写一个pc端简单的框架
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .total{ width:原创 2018-05-24 22:36:43 · 2480 阅读 · 2 评论 -
HTML中display:inline-block;特性
display:inline-block;内联级标签:布局特性:1.可以在同行排列2.支持所有的css样式设置3.在不设置宽高大小时,有内容撑开盒子的大小,其内容可以是任意的标签和文字4.垂直方向上,所有的行级标签,在默认情况下手机按照其内部最后一行文字的底线对齐,为了保持其一致性,需要给每个行级标签设置vertical-align属性,保证垂直方向上的对齐设置盒子的对齐基线Middle 将基线设...原创 2018-05-24 21:31:37 · 4887 阅读 · 0 评论 -
HTML中display:inline;特性
display属性inline内嵌式布局特点:1.可以支持同行排列2.不支持宽高的设置,不支持上下margin设置,支持左右margin的设置,大小由内部的文字撑开3.内部的标签的只能是文字或者Inline型标签,项目中的inline主要用来套文字4.浏览器会解析文档中两个inline型标签之间的空白符为间隙,该间隙大小不可控,不同浏览器大小不一致消除该间隙的方法1.为其父级设置font-size...原创 2018-05-24 21:30:52 · 13673 阅读 · 0 评论 -
html中display:block;布局特性
display:block;块级标签:布局特性:1.独占父级标签的一行2.在不设置宽度时,其内容区域的宽度方向,是自动变化margin+border+padding+content等于父级的内容区域大小3.这种盒子支持所有的css样式block块页面布局中,主要是用来将内容从上到下排列的...原创 2018-05-24 21:29:41 · 15028 阅读 · 0 评论 -
html中基础常见样式
背景图background-image:url(图片路径);图片的路径:是指从该资源的文档为起点(URL为起点)查找资源文件的过程所形成的路径如果是上级目录../如果是同级目录./项目文件夹,文件都不要使用中文 空格背景图片平铺设置repeat:平铺.一般应用场景,利用一小块图案进行平铺background-repeat:no-repeat;不平铺背景图定位:background-position...原创 2018-05-24 21:28:43 · 1085 阅读 · 0 评论 -
HTML中用盒子模型写windows预警框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>windows预警框</title> <style type="text/css"> *{ margin: 0px原创 2018-05-23 22:09:08 · 259 阅读 · 0 评论 -
HTML中用盒子模型写右键菜单项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型做右键菜单</title> <style type="text/css"> .box{ width: 20原创 2018-05-23 22:07:58 · 310 阅读 · 0 评论