html+css学习
救救孩子吧8༼⍤༽
这个作者很懒,什么都没留下…
展开
-
Bootstrap
Bootstrap是前端UI框架,提供了大量编写好的CSS样式。原创 2023-10-23 16:33:29 · 77 阅读 · 0 评论 -
HTML+CSS空间转换
像素单位取值;百分比(参照盒子自身尺寸计算结果)电脑是平面的,默认情况下无法观察Z轴的平移效果3d 写法小括号里必须逗号隔开三个数。原创 2023-09-26 12:58:15 · 156 阅读 · 0 评论 -
平面转换-transform
属性:background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,....);单独设置X或Y轴移动距离:translateX()或translateY()transform:scale(X轴缩放倍数,Y轴缩放倍数);通常,只为scale(设置一个值,表示X轴和Y轴等比列缩放)属性:transform:translate(X轴移动距离,Y轴移动距离);取值:像素单位数值、百分比(参照盒子自身尺寸计算结果)、正负均可。取值:渐变方向:可选。原创 2023-09-23 16:03:16 · 57 阅读 · 0 评论 -
SEO三大标签+Favicon图标
搜索引擎优化,提升网站百度搜索排名。原创 2023-09-23 08:10:30 · 64 阅读 · 0 评论 -
光标类型cursor
原创 2023-09-20 16:37:33 · 31 阅读 · 0 评论 -
透明度opacity
作用:设置整个元素的透明度(包含背景和内容)0:完全透明(元素不可见)属性名:opacity。0-1之间小数:半透明。原创 2023-09-20 16:33:42 · 27 阅读 · 0 评论 -
过渡transition
作用:可以为一个元素在不同状态间切换添加过渡效果。属性名:transition (复合属性)属性值:过渡的属性 花费时间(s)原创 2023-09-20 16:28:29 · 20 阅读 · 0 评论 -
垂直对齐方式vertical-align
浏览器默认将行内块当文字处理,所以文字底部有空白。原创 2023-09-20 16:18:52 · 25 阅读 · 0 评论 -
字体图标+使用
icon-xxx:图标对应的类名(打开iconfont文件夹里的.html文件)iconfont:字体图标基本样式(字体名,字体大小等等)使用时要注意选择器的优先级,如果要调整字号大小,选择器的优先级要高于iconfont类。引入字体样式表(iconfont.css)作用:在网页中添加简单的、颜色单一的图标。字体图标:展示的是图标,本质是字体。标签使用字体图标类名。原创 2023-09-20 15:59:28 · 27 阅读 · 0 评论 -
CSS精灵
也叫CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position精准的定位出背景图片的位置。取负数坐标为background-position属性值(向左上移动图片位置)添加background-position属性,改变背景图位置。使用PxCook测量小图片左上角坐标。优点:减少服务器被请求次数,减少服务器的压力,创建盒子,盒子尺寸与小图尺寸相同。设置盒子背景图为精灵图。原创 2023-09-20 14:55:59 · 20 阅读 · 0 评论 -
HTML+CSS定位
作用:灵活的改变盒子在网页中的位置实现:position:relative特点: 1. 改变位置的参照物是 自己原来的位置 2. 不脱标,占位 3. 标签显示模式特点 不变position:absolute使用场景:子级绝对定位,父级相对定位(子绝父相)特点: 1.脱标,不占位置 2. 参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器可视区改位置 3. 显示模式特点改变:宽高生效(具备了行内块的特点)实现步骤:固定定位pos原创 2023-09-20 14:43:42 · 53 阅读 · 0 评论 -
处理行内块和行内垂直方向对齐方式 +更改placehider属性文字样式 +背景透明 +去掉表单控件的焦点框
专门用来处理行内块和行内垂直方向对齐方式。原创 2023-09-19 12:19:58 · 20 阅读 · 0 评论 -
Flex布局
设置方式:给父元素设置display:flex,子元素可以自动挤压或拉伸。原创 2023-09-17 20:25:56 · 27 阅读 · 0 评论 -
HTML+CSS浮动、清除浮动
left:左对齐right:右对齐。原创 2023-09-17 16:09:51 · 35 阅读 · 0 评论 -
盒子模型-圆角+阴影
默认是外阴影,内阴影需要添加inset。x轴偏移量和y轴偏移量必须书写。原创 2023-09-17 10:52:54 · 77 阅读 · 0 评论 -
行内元素-内外边距问题
场景:行内元素添加margin和padding,无法改变元素垂直位置。解决方法:给行内元素添加line-height可以改变垂直位置。原创 2023-09-17 10:30:43 · 36 阅读 · 0 评论 -
外边距问题
场景:垂直排列的兄弟元素,上下margin会合并现象:取两个margin的较大值。原创 2023-09-17 10:20:51 · 33 阅读 · 0 评论 -
盒子模型-元素溢出
scroll:溢出滚动(无论是否溢出,都显示滚动条位置)auto:溢出滚动(溢出才显示滚动条位置)hidden:溢出隐藏。原创 2023-09-17 10:04:15 · 33 阅读 · 0 评论 -
HTML+CSS清除默认样式
清除标签默认的样式,比如:默认的内外边距。原创 2023-09-17 09:57:19 · 380 阅读 · 0 评论 -
HTML+CSS版心居中
属性: margin: 0 auto;原创 2023-09-17 09:50:42 · 656 阅读 · 0 评论 -
HTML+CSS盒子模型
属性名:border-方位名词(bd+方向名词首字母)內减模式:box-sizing:border-box。属性值:边框线粗细 线条样式 颜色 (不去区分顺序)手动做减法,减掉border/pading的尺寸。solid--线条样式。dottted--点线。dashed--虚线。原创 2023-09-17 09:46:47 · 203 阅读 · 0 评论 -
伪元素选择器
作用:创建虚拟元素(伪元素),用来摆放装饰性的内容。原创 2023-09-16 08:46:51 · 23 阅读 · 0 评论 -
结构伪类选择器
作用:根据元素的结构关系查找元素。原创 2023-09-16 08:33:43 · 24 阅读 · 0 评论 -
标签显示模式
inline-block:行内块。原创 2023-09-15 10:23:16 · 30 阅读 · 0 评论 -
CSS背景
背景颜色默认值是透明:rgba(0,0,0,0)、transparent背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色。原创 2023-09-15 09:57:05 · 28 阅读 · 0 评论 -
Emmet写法
Emmet写法:代码的简写方法,输入缩写VS Code会自动生成对应的代码。原创 2023-09-14 22:40:20 · 20 阅读 · 0 评论 -
CSS特性
CSS特性:化简代码/定位问题,并解决维妮塔。原创 2023-09-14 22:27:04 · 16 阅读 · 0 评论 -
CSS复合选择器
由两个或者多个基础选择器,通过不同的方式组合而成。原创 2023-09-14 21:01:46 · 27 阅读 · 0 评论 -
CSS文字属性
十六进制表示法:#RRGGBB,#000000,#ffcc00,简写:#000,#fc0。rgb表示法:rgb(r,g,b),r,g,b表示红绿蓝三原色,取值:0-255。rgba表示法:rgba(r,g,b,a),a表示透明度,取值0-1。行高:上间距+文本高度+下间距(一行文字的最顶端到下一行文字的最顶端)作用:控制内容水平对齐方式(居中的是内容不是标签)正常(不倾斜):normal。原创 2023-09-14 19:53:03 · 26 阅读 · 0 评论 -
CSS画盒子-设置宽、高、背景色
目标:使用合适的选择器画盒子。原创 2023-09-14 11:53:38 · 346 阅读 · 1 评论 -
CSS选择器
查找标签,设置样式。原创 2023-09-14 11:46:32 · 25 阅读 · 1 评论 -
CSS引入方式
CSS代码写在style标签里面。原创 2023-09-14 11:16:42 · 20 阅读 · 1 评论 -
HTML表单
收集用户信息。原创 2023-09-14 09:22:55 · 22 阅读 · 1 评论 -
HTML表格标签
网页中的表格与Excel相似,用来展示数据。原创 2023-09-14 06:56:49 · 29 阅读 · 1 评论 -
HTML音频标签+视频标签
audio src="音频的URL"></audio>原创 2023-09-13 14:07:04 · 95 阅读 · 1 评论 -
HTML超链接
【代码】HTML超链接。原创 2023-09-13 10:29:57 · 33 阅读 · 1 评论 -
HTML路径
Windows电脑从。Mac电脑从根目录(表示进入某个文件夹里面。当前文件上一级文件夹。原创 2023-09-13 10:16:20 · 29 阅读 · 1 评论 -
HTML图像标签
title:提示文本,鼠标悬停在图片上的时候显示文字。alt:替换文本,图片无法显示的时候显示的文字。height:图片的高度,值为数字,没有单位。width:图片的宽度,值为数字,没有单位。原创 2023-09-13 09:43:39 · 32 阅读 · 1 评论 -
HTML文本格式化标签
实现效果:原创 2023-09-11 16:30:52 · 57 阅读 · 0 评论 -
HTML换行与水平线标签
br>(单标签)原创 2023-09-11 16:16:25 · 53 阅读 · 0 评论