自定义博客皮肤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)
  • 收藏
  • 关注

原创 移动端布局

准备工作:设置Meta标签width=device-width:布局视口的宽度等于当前设备视口的宽度initial-scale:初始的缩放比例(默认设置为1.0)minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)1.rem/em的区别:em:宽高大小根据字体大小有关系优先执行自身元素的大小/字体大小..

2021-08-04 20:31:52 123

原创 弹性盒 多列 媒体查询

一,css3多列属性(属性要加前缀)1、column-count:分栏的个数2、column-width:分栏的宽度3、column-gap:分栏的间距4、column-rule:分栏的边框设置或检索对象的列与列之间的边框。复合属性。 column-rule-color规定列之间规则的颜色。 column-rule-style规定列之间规则的样式。 ...

2021-08-03 21:06:55 90

原创 css弹性盒

一,怪异盒模型 box-sizing用来设置盒模型的解析规则的 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 content-box(按标准盒模型的规则解析)这是由CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box(按怪异盒模型的规则解析)为元素...

2021-08-02 20:36:25 78

原创 2D 转换

一,转换transform transform翻译成汉语具有"变换"或者"改变"的意思。 通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果 最能体现transform 属性强大实力的是实现元素的3D变换效果 2D 2D变换,是在一个平面对元素进行的操作。 可以对元素进行水平或者垂直位移、旋转或者拉伸变形属性:transform的所有属性值 1、transform:none;默认...

2021-07-30 20:04:02 188

原创 css3渐变/过渡

一,css3浏览器前缀 -ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 -moz- -moz-box-shadow 所有基于Gecko引擎的浏览器(如Firefox)专属的CSS属性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性需添加...

2021-07-29 19:35:50 229

原创 H5相关的标签和表单

一,H5的发展历史. HTML5草案的前身名为Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。 HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了 2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台...

2021-07-28 20:47:22 118

原创 css选择器

一,基本选择器 1,通配符 :“*”星号 2,class选择器:必须在元素中定义class属性, .class值 3,id选择器:必须在元素中定义id值, #id、 4,元素选择器:标签选择器 标签名 5,群组选择器:选择器之间用逗号“,”分离,有相同元素的可以放到一起,减少代码量二,层次选择器 1,包含选择器(后代选择器): E F选择匹配的F元素,且匹配的F元素被包含在E元素内(选择所有的带有...

2021-07-27 19:58:56 64

原创 BFC概念

BFCBFC的概念 BFC即block formatting contexts(块级格式化上下文),通俗一点来讲,可以把BFC理解为一个封闭的大箱子,箱子内的元素无论如何翻江倒海,都不会影响外部。BFC的触发条件 1,根元素html默认就是一个BFC 2 ,float的值不为none 单纯的div不是BFC,如果添加了浮动就是BFC 3,ov...

2021-07-27 19:14:55 113

原创 表单000

一、表单作用:收集用户信息表单的组成:表单域form 表单控件input 提示信息label表单域form属性及属性值表单名称 name 表单的提交方式方法method=”get默认/post”【get与post的区别】Get:从服务器上获取数据,会将用户名密码放置在地址栏,安全性低 ,效率高,用于数据查询Post:向服务器上传数据,安全性高,效率低,一些机密性高的使用表单的提交路径 action=“地址”表单提交是否在当前窗口 target=”_blank”表单控件input

2021-07-26 22:32:14 56

原创 表格 表单 BFC

一、表格的相关属性1、 border-spacing:20px; 单元格间距 单元格间距(该属性必须给table添加)表示单元格边框之间的距离,不可取负值2、 border-collapse:separate/collapse; 合并相邻单元格 合并相邻单元格边框(该属性必须给table添加) separate(边框分开)默认值;collapse(边框合并)3、empty-cells:show/hide 无

2021-07-23 22:19:49 88

原创 宽高自适应

一、自适应的概念网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。二、宽度自适应方式1、宽度不写一般给的是最大的盒子2、宽度的单位不用px,用相对单位比如%;—般都是里面的容器3、用min-width、max-width设置。用在响应式布局上三、高度自适应1、高度不写,存在问题:如果子元素浮动,父元素会高度塌陷。(高度塌陷)2、高度的

2021-07-23 21:42:03 96

原创 定位之锚点 透明

一、position相关属性值1、position:static ; 默认值2、 position: absolute; 绝对定位 脱离文档流 当没有父元素或父元素没有定位时,参照物是浏览器的第一屏 ;有父元素且父元素有定位3、position:relative; 相对定位 不脱离文档流 自己的初始位置4、position:fixed; 固定定位 脱离文档流 浏览器的当前窗口5、position:sticky

2021-07-23 21:19:26 150

原创 文本溢出相关属性

一 、单行文本溢出显示省略号要实现单行文本溢出时产生省略号的效果还需定义:1、容器宽度: width: value;2、强制文本在一行内显示:white-space: nowrap;3、溢出内容为隐藏: overflow: hidden;4、溢出文本显示省略号: text-overflow: ellipsis;...

2021-07-23 20:42:26 1603

原创 定位position

1定义:给定元素一定的位置作用:实现侧边导航栏,网页中的广告【】1.固定定位语法: position: fixed+便偏移量【left/top/right/bottom】才能让元素达到自己想要的位置应用:参考小小千实现效果: div或者某些元素固定在页面的某个位置2.粘性定位语法:position: sticky应用:参考工商银行导航栏实现效果:如果前面有元素,并且元素有高度,那么他会滑过元素高度之后再执行固定定位;如果前面元素没有或者元素的高度之和小于top后面的属性值他直接

2021-07-20 20:47:21 126

原创 关于元素之间相互转化的总结

元素之间的相互转化:1.什么是元素之间的相互转化: 元素类型之间的相互变化2.为什么:优化用户体验a标签转化为可以设置宽度高度的元素;b.解决浮动的能解决的一部分问题3.怎么进行元素之间的相互转化:display:inline[行内元素]/block[块级元素]/inline-block[行内块级元素]元素的分类:块级元素:div p ul li ol li dl dt dd h1-h6特点:1.独自占据一行2.可以设置宽度和高度3.可以设置text...

2021-07-19 20:53:05 1062

原创 CSS的浮动属性和盒子模型

一,css浮动属性 1,浮动 float:left 元素靠左边浮动 float:right 元素靠右边浮动 float:none 元素不浮动 浮动的作用 (1)定义网页中其他文本如何环绕该元素显示 ...

2021-07-18 16:16:56 219

原创 day04 css的核心属性

一,文本1,字体大小 font-size 单位:px,pt,em等,16pt=12px=1em 浏览器默认16px,设计图默认12px。2,字体颜色 color color加颜色;16进位颜色表;color:rgb 16进位颜色表/ egb: https://www.sioe.cn/yingyong/yanse-rgb-16/3,字体 font-family(楷体 宋体... ...)4,字体样式 ...

2021-07-15 20:48:32 74

原创 表单 css 总结

一.表格表单.form表单:用来收集用户信息,常用在【用户的登录注册界面】基本的语法结构:<form></form>;文本框:input type="text";密码框:input type="password";按钮:input type="button" value="";提交按钮:input type="submit" value="";重置按钮:input type="reset" value="":图片按钮:input type="ima

2021-07-14 20:42:35 269

空空如也

空空如也

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

TA关注的人

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