自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(24)
  • 收藏
  • 关注

原创 响应式设计

也叫响应式布局,响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的。

2022-10-26 19:35:00 66 1

原创 CSS和HTML帧动画

css3动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、旋转(rotateIn|rotateOut)、翻转(flip)、淡入淡出(fadeIn|fadeOut)等动画效果。animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态。- 允许负值,(-2s 使动画马上开始,但跳过 2 秒进入动画)2.ease 默认值 慢速度开始--速度变快--慢速度结束。5.ease-in-out 以慢速度开始和结束的过渡效果。

2022-10-25 21:03:52 164

原创 CSS3动画 3D基础知识

a 指的是一个旋转角度值,如果为正值,元素围绕 Z 轴顺时针旋转;- a 指的是一个旋转角度值,如果为正值,元素围绕X轴顺时针旋转;反之,如果为负值,元素围绕X轴逆时针旋转。- a 指的是一个旋转角度值,如果为正值,元素围绕Y轴顺时针旋转;- transform: translate3d(x,y,z) 沿着x、y、z轴方向位移。angle:一个角度值,指定在 3D 空间旋转角度,正值顺时针旋转,反之元素逆时。z:是一个 0 到1之间的数值,主要用来描述元素围绕 Z 轴旋转的矢量值。

2022-10-24 20:17:00 134

原创 CSS3 动画 2D基础知识

一个值(沿着水平方向位移),两个值 像素px transform: translateX();一个值(沿着水平方向倾斜)、两个值 deg角度 transform: skewX();- transform: translate(x,y) 沿着x轴和y轴移动。- transform: scale(x,y) 沿着x轴和y轴缩放。

2022-10-24 20:15:26 61

原创 弹性盒子基础知识

space-evenly:弹性项目平均分布在该行上,相邻项目的间隔,项目与容器之间空间相等。- align-self属性:调整自身在侧轴的对齐方式,弹性容器中被选中子项的对齐方式(设置在子元素中)- justify-content 属性:设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,- justify-content: flex-start;主轴方向为垂直方向,起点在上方。

2022-10-17 17:31:27 110

原创 新增表单元素和表单属性

min、max、step属性 最小值、最大值、合法的数字间隔 用于包含数字的input类型,规定数值范围,如:input的number类型等。用于输入电话号码的文本输入域,服务于触屏网页开发,在电脑网页中无效,在触屏网页中点击输入域,显示虚拟电话键盘(0-9、*、#)包含访问协议的完整路径的输入域,在提交表单时,自动验证url域的值。step属性:步长,合法的数字间隔,默认步长为1。

2022-10-13 21:11:05 139

原创 Html5新特性

html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用。

2022-10-13 21:07:08 66

原创 等高布局、圣杯布局、双飞翼布局

5、移动right盒,通过margin-left: -200px,配合相对定位position: reLative;4、移动Left盒,通过margin-Left: -100%;3、每一列固定padding-bottom,同时指定一个margin负值,抵消padding的占位4、给父元素overfLow: hidden;5、将Left、center、right通过margin负值移到相对应的背景即可。4、移动Left盒子,通过margin-Left: -100%;

2022-10-12 16:12:07 120

原创 阴影、边圆角

spread 阴影大小 正数扩大(阴影大小大于盒子的大小),负数阴影缩小(阴影大小小于盒子的大小)可选。blur 模糊值 阴影的模糊程度 不可为负数 可选。h-shadow x轴偏移量 正右负左 必须属性。h-shadow x轴偏移量 正右负左 必须属性。单角:border-top-left-radius。两个值:左上 右下、右上 左下。四个值:左上、右上、右下、左下。三个值:左上、右上左下、右下。

2022-10-09 20:10:26 52

原创 HTML表单

表单的作用:用于搜集不同类型的用户输入。表单的组成:表单元素(控件)、表单区域。

2022-09-30 17:26:45 78

原创 CSS属性

webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。内部的Box会在垂直方向,一个接一个地放置 Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),

2022-09-29 16:55:52 46

原创 CSS精灵图

为了使特殊形状的背景使能够自由拉伸滑动,以适应元素内部的文本内容,出现了CSS滑动门技术。最常见于各种导航栏的滑动门。

2022-09-28 20:53:56 64

原创 CSS布局

如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的,那么元素的“height”和“width”将隐式地由偏移量决定。浮动元素: 使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本、图片、表单标签依然会为这个元素让出位置,环绕在周围。相对于元素在正常的文档流中的位置移动它,把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。表示“将元素放在文档布局流的默认位置,HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

2022-09-27 20:09:11 42

原创 CSS浮动

网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。1、浮动的概念浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。2、浮动属性floatleft 左浮动right 右浮动float:none 不浮动(默认值)3、浮动的基本特性可以使块元素在一行排列脱离文档流提升层级4、浮动的问题(为什么要清浮动)子元素浮动导致父元素高度塌陷影响之后元素的布局。

2022-09-26 17:50:56 48

原创 CSS显示模式

概述:显示模式是指元素以什么方式显示,如div默认独占一行,span默认可以多个在一行排列,了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素三大显示模式。特殊情况下我们需要进行元素的模式转换,改变默认元素模式使其拥有另一种元素模式的特性,使用display属性能够将三者任意转换。常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol。在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度。常见行级元素:span,strong,em,i,a,b。

2022-09-26 17:47:28 101

原创 CSS背景

CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。background-color属性,设置元素的背景颜色。常用的值:color_name 规定颜色值为颜色名称的背景颜色(比如red)hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))transparent 默认,背景颜色为透明。

2022-09-22 17:17:49 50

原创 CSS三大特性

样式不冲突,优先级没有意义。概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ,这个过程就叫做层叠。当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上,内部和外部样式遵循就近原则。

2022-09-22 17:13:38 126

原创 CSS六大复合选择器

span1是子元素span2是子元素的子元素

2022-09-22 17:06:48 422

原创 CSS盒模型

CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距、边框、填充、和实际内容。(即装东西的容器)所有 HTML 标签可以看作盒子,在 CSS 中,"box model" 这一术语是用来设计和布局时使用的。(即网页布局就是利用 CSS 摆盒子)正在上传…重新上传取消正在上传…重新上传取消。

2022-09-21 21:31:56 62

原创 CSS字体 ,文本属性

可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color。白色: rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色: rgb(255,0,0) 、绿色: rgb(0,255,0) 、蓝色: rgb(0,0,255)/*font-family:"宋体","微软雅黑";/*font-family:"微软雅黑","宋体";

2022-09-20 17:10:56 87

原创 CSS基础

全称:Cascading Style Sheets,通常称为CSS样式表或层叠样式表(级联样式表)。为HTML标记语言提供了一种样式描述,即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容(字体、大小、对齐方式等)、图片的外形(宽、高、边框等)。CSS选择器是CSS规则的第一部分,每个CSS规则都以一个选择器或一组选择器为开始CSS选择器即用于“查找”(或选取)要设置样式的 HTML 元素的模式选择器可以分为基础选择器、复合选择器。

2022-09-19 19:19:22 78

原创 HTML5基础

表格由table标签来定义。每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)。类比:excel表格&网页中的表格未定宽度的表格、单元格适应内容同一行只识别一个高,取最大值同一列只识别一个宽,取最大值表格可以包含其他HTML标签以及表格。

2022-09-19 19:00:58 122

原创 Html5标签(列表、行级、文本格式、字符实体、语义化)

页面中的图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候再查找图像,就需要通过路径的来描述图像文件的位置。绝对路径文件在目录中的绝对位置完整描述,常见的绝对路径一种由其在网络上的绝对位置定义的位置,一种是本地从盘符出发的绝对位置。概述:相对路径是指由这个文件所在位置为参考基础,而建立出的目录关系,常用的相对路径包括当前目录,上一级目录,下一级目录。链接到另一个网站时,需要使用绝对链接。为了强调重要的词,在口语方面我们往往用重音强调,在文字方面则是用粗体字来达到强调的效果。

2022-09-16 17:57:20 367

原创 Htlm5入门基础

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言。通过HTML标记(标签)对网页中的文本、图片、多媒体等内容进行描述。“超文本”:不仅能承载简单的文字、还能包含超链接、图片、音频、视频等。“标记语言”:标记语言是由一套标记标签组成的。

2022-09-15 19:55:14 252

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除