自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 CSS 盒模型

1.边框围绕着内容和内填充区域的线 1.border-width:边框的宽度 单位:像素 注意:只写一个border-width设置不上边框的宽的,得写上边框的线型 2.border-style:边框的线型 1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状边框 5.none 没有边框

2022-10-09 09:58:55 51 1

原创 css3基础

1、什么是css3?是css技术的升级版本,在css2的基础上,新增了许多特性,弥补了css2的不足,使web页面的开发变得更加高效、便捷css3按模块化进行设计,比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点: CSS3是完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。

2022-10-09 09:57:37 77

原创 前端 HTML表单

表单:采集不同类型用户输入的数据,然后发送给服务器,实现用户与服务器之间的数据交互一个完整的表单包含:表单域,表单控件(表单元素),提示信息,共三个部分;生活中的表单:

2022-10-09 09:56:31 78

原创 前段 子绝父相

注意:子元素设置绝对定位,父元素可以设置相对定位、绝对定位、固定定位, 这三种情况,参照元素都是父元素**

2022-10-09 08:44:49 47

原创 前端 定位

position:absolute绝对定位没有定位父级时相对于html进行定位,有定位父级时相对于最近的定位父级进行定位特性特性: 1.元素脱离正常文档流,不占位(也脱离文本流,全脱) 2.有定位父级相对于定位父级发生定位偏移 3.如果没有定位父级相对于浏览器窗口发生定位偏移(如果其父亲没有相对定位,会一直往上找,直到相对于html) 4.能使不能设置宽高的行级元素设置宽高 5.提升层级 6.如果没有定

2022-10-09 08:42:40 100

原创 前端 浮动特性应用实例

总结:浮动脱离文档流不脱离文本流最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动

2022-10-09 08:41:09 60

原创 前端 css层叠性

概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ,这个过程就叫做层叠当一个标签被相同的选择器 选择到的时候,相同的样式会发生层叠,遵循就近原则。不同的样式不会有影响总结css的层叠性是通过继承性 和 优先级实现样式声明不冲突 (同时应用于元素)样式声明冲突同级选择器,css样式中最后定义的声明应用于元素(就近原则)不同级选择器,由选择器优先级决定

2022-10-09 08:40:09 100

原创 前端 CSS 盒模型

1.边框围绕着内容和内填充区域的线 1.border-width:边框的宽度 单位:像素 注意:只写一个border-width设置不上边框的宽的,得写上边框的线型 2.border-style:边框的线型 1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状边框 5.none 没有边框

2022-10-09 08:35:37 29

原创 前端 表格CSS 属性

一、表格CSS 属性1、表格边框指定 CSS 表格边框,使用 border 属性,通常定义td,th的边框属性表格会呈现双边框,是因为表和 th / td 元素有独立的边界。table存在默认属性border-collapse:separate

2022-10-08 16:01:57 691

原创 前端 初识CSS

1、什么是CSS?全称Cascading Style Sheets 通常称为CSS样式表或层叠样式表(级联样式表)作用为HTML标记语言提供了一种样式描述即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容(字体、大小、对齐方式等)、图片的外形(宽、高、边框等)

2022-10-08 16:00:27 36

原创 前端 HTML列表

1、无序列表各列表项之间没有次序,各项之间为并列关系语法 列表项 列表项 列表项 特性ul 和 li 标签都是块级标签宽度默认撑满整个父元素高度默认由内容撑开独立成行自带外间距自带内填充自带列表符,去掉自带列表符 li{ list-style: none; }css属性list-style-type

2022-10-08 15:59:29 186

原创 前端 浏览器及内核

1、浏览器及内核web浏览器是用于读取HTML文件,并将其作为网页显示浏览器最重要的部分或其核心是渲染引擎,我们一般称为内核;内核的作用负责对网页语法的解释并渲染网页;五大浏览器:chrome、safari、Firefox、Opera、IE1.chrome 谷歌浏览器生产商:Google内核:webkit、blink2.Firefox 火狐浏览器生产商:Mozilla内核:gecko3.Safari 苹果浏览器生产商:苹果公司内核:webkit4.ope

2022-10-08 15:57:30 158

原创 前端 什么是响应式设计

7、响应式文字相对单位在文字的应用可以一定程度上提升效率精简代码 @media screen and (orientation:landscape) { .box { width: 300px; height: 300px; background-color: azure; font-size: 24px; }

2022-10-08 15:46:26 1151

原创 前端 帧动画

一、帧动画1、定义关键帧@keyframes 动画名称(英文) { 0% { /* 动画的开始 */ }​ 25% { /* 在25%的时候进行的一个动画 */ }​ 50% { /* 在50%的时候进行的一个动画 */ }​ 100%

2022-10-08 15:44:31 265

原创 前端 css3动画&2D|3D

一、css3的transform属性2d坐标轴(图示)x轴:水平,向右为正,向左为负y轴:垂直,向下为正,向上为负2d转换的方法1、2D变形:平移、旋转、缩放、倾斜1) transform: translate()平移transform: translate(x,y) 沿着x轴和y轴移动transform: translateX(x) 沿着x轴移动transform: translateY(y) 沿着y轴移动取值:

2022-10-08 15:43:19 184

原创 前端 一、calc()函数

2、rem布局rem是css3新增单位,它是相对于根元素的字号大小的单位rem原理:rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。在布局过程中只要使用 rem 设置元素的尺寸,在改变 rem 的基准值 html 的字体大小的时候,页面上的元素将等比例缩放实现适配。比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem,则 div 的 width大小为100px相对单位 : rem

2022-10-08 15:41:32 1988

原创 前端 一、弹性盒子

1、什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景 : 移动端

2022-10-08 15:40:15 89

原创 前端 css3基础

什么是css3?是css技术的升级版本,在css2的基础上,新增了许多特性,弥补了css2的不足,使web页面的开发变得更加高效、便捷css3按模块化进行设计,比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点: CSS3是完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。

2022-10-08 15:38:48 162

空空如也

空空如也

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

TA关注的人

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