自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 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:"微软雅黑","宋体";

2023-02-26 17:10:43 115

原创 什么是响应式设计

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

2023-02-26 17:03:48 139

原创 响应式web开发

响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成,包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。背景:移动互联网的发展,为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生,

2023-02-26 16:58:58 668

原创 CSS Grid(网格) 布局

CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上,进而快速、便捷的对页面结构进行布局,提高工作效率“flexbox” 是一维的布局,是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局,一行或者一列。相比较 “Grid网格布局”,则是二维布局可以同时处理行和列上的布局通常适用于布局页面主要的区域布局或小型组件。

2023-02-26 16:55:30 146

原创 css3过渡动画——transition属性

语法transition: css样式 动画的执行时间 速度类型 动画的延迟时间;多个css属性用逗号隔开​注意:谁发生了属性的改变 就加在谁身上属性css样式:参与过渡的css属性名称|all表示所有属性动画执行时间:默认0s,s|ms(毫秒) 1s=1000ms速度类型。

2023-02-26 16:52:49 1098

原创 阿里矢量图标(字体图标)

随着互联网技术的快速发展,加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。移动端Web主要指运行在移动端(手机、ipad)的web页面, 因为具备HTML5特性也叫H5页面、Web App等。【H5页面、微网页、微站、wap站、webAPP】如:京东商城手机版,淘宝触屏版,苏宁易购手机版相关阅读:WebApp与Native App的区别?在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;

2023-02-26 16:50:17 366

原创 html弹性盒子

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

2023-02-26 16:47:14 418

原创 CSS3阴影

contain:包含,等比例缩放背景图片到完整显示在盒子中,有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满(宽高给大点)正数阴影扩大(阴影大小大于盒子大小),负数阴影缩小(阴影大小小于盒子大小),0阴影与盒子同等大小。/* contain:包含,等比例缩放背景图片到完整显示在盒子中,但是背景图可能在区域范围内铺不满(宽高给大点) */background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);

2023-02-26 16:44:11 273

原创 **HTML5**

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

2023-02-25 13:45:14 37

原创 css.布局技巧

当前,新冠疫情的防疫已进入新常态新阶段,如何防患于未然,把基层常态化防控的藩篱扎得更牢,显得愈加重要。当前,新冠疫情的防疫已进入新常态新阶段,如何防患于未然,把基层常态化防控的藩篱扎得更牢,显得愈加重要。当前,新冠疫情的防疫已进入新常态

2023-02-25 13:41:21 63

原创 HTML 书写规范

小U课堂。

2023-02-25 13:39:24 741

原创 CSS 精灵

Adobe Photoshop,简称“PS”],是由Adobe 开发和发行的[图像处理软件]。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。ps有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。

2023-02-25 13:37:08 186

原创 CSS 定位布局

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

2023-02-25 13:34:35 104

原创 CSS 布局

网页中有很多布局效果,标准流没有办法完成,使用可以利用浮动改变元素默认的排列方式,举例说明(如网页中横向排列的模块或者一左一右排列的模块)。1.1、浮动的概念浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】。1.2、浮动属性floatleft 左浮动right 右浮动float:none 不浮动(默认值)1.3、浮动的基本特性可以使块元素在一行排列脱离文档流提升层级。

2023-02-25 13:32:22 36

原创 html表单

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

2023-02-25 13:30:22 29

原创 CSS盒模型

问题描述:当父元素没有padding,margin,border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值,负值取绝对值较大的值。问题描述:当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并,最终结果是正值取两者中的较大值,负值取绝对值较大的值。常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol。在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度。

2023-02-25 13:22:16 26

原创 CSS选择器

2.1 继承性2.1.1 概念父元素向后代元素传递属性的机制。2.1.2、表现后代元素会继承父元素的属性。2.1.3、总结常用可继承的属性font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等2.1.4、强制继承每个CSS属性都接受这些值inherit,表示强制开启了继承”。2.1.5、作用恰当地使用继承可以简化代码,降低CSS样式的复杂性。3.2、优先级。

2023-02-25 13:18:16 41

原创 CSS 盒模型

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

2023-02-25 13:09:03 53

原创 css文本以及属性

1、css字体1.1 font-family作用:设置文本的字体系列语法:font-family:字体名称;常用值:一个字体名称或系列名称(介绍常用字体名称、字体系列)微软雅黑 Microsoft YaHei宋体 SimSun黑体 HeiTi楷体 KaiTi多个字体名称逗号分开 如果浏览器不支持第一个字体,则会尝试下一个(回退机制).box{ /*font-family:"微软雅黑","宋体";*/ /*font-family:"宋体","

2022-11-07 19:33:13 57

原创 html表格

1、表格简介表格由 table标签来定义。每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)。 类比:excel表格&网页中的表格2、表格的作用之前,web开发人员过去也常常使用表格来完成整个网页布局,结构嵌套复杂修改维护困难,现在已经被DIV+CSS布局所取代。现在,用于显示、展示数据。(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)注意:现在HTML表格应该用于展现表格数据,而不是用来实现网页布局!3、表格基本标签table

2022-11-07 19:29:20 91

原创 html列表

步骤一步骤二李美丽苹果香蕉苹果香蕉姓名生日加入我们

2022-11-02 21:49:27 42

原创 html介绍

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

2022-11-02 21:47:05 928

空空如也

空空如也

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

TA关注的人

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