
Html与Css
文章平均质量分 78
Html与Css学习笔记
小小程序员.¥
努力学习,乐观生活,做更好的自己。
展开
-
CSS进阶空间转换和 less
空间:是从坐标轴角度定义的X,Y,和Z三条坐标轴构成一个立体空间 Z轴位置与视线方向相同。rotate3d(x,y,z):用来自定义旋转轴的位置及旋转的角度。作用:指定了观察者与Z=0平面的距离,为元素添加透视效果。-- 立体呈现 transform-style。属性名:transform-style(给父级加)作用:设置元素的子元素是位于3D空间中还是平面中。属性:(添加给父级,取值范围800-1200)preserve-3d:子级处于3D空间。x,y,z取值为0-1之间的数字。原创 2024-03-12 15:57:57 · 520 阅读 · 0 评论 -
CSS进阶平面转换
单独设置X或Y轴移动距离:translateX()或translateY ()属性:transform:translate(X轴移动距离,Y轴移动距离);transform:scale (x轴缩放倍数,Y轴缩放倍数);注意:旋转会改变坐标轴向,多重转换会以第一种转换形态的坐标轴为准。技巧:通常,只为scale(设置一个值,表示X轴和Y轴等比例缩放。概念:改变盒子在平面内的形态(位移,旋转,缩放,倾斜)属性:transform:rotate(旋转角度);transform:scale(缩放倍数);原创 2024-02-20 16:45:35 · 567 阅读 · 0 评论 -
CSS的定位position,字体图标,修饰
把网页中一些背景图片整合到一张图片文件中,再background-position精确定位出背景图片的位置。2.参照物:先找最近的已经定位的祖先元素,如果所有祖先元素都没有定位,参照浏览器可视区域改位置。登录,素材库,官方图标库,进入图标库,选图标,加入购物车,添加至项目,确定,下载至本地。优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度。z-index取值是整数,默认是0,取值越大显示顺序越靠上。作用:设置定位元素的层级顺序,改变定位元素的显示顺序。原创 2024-02-19 17:00:59 · 619 阅读 · 0 评论 -
CSS的flex弹性布局
空白间距均分在弹性盒子之间 */space-between:弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间。space-between:弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间。space-around:弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧。space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等。space-around:弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧。space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等。原创 2024-01-29 23:16:02 · 596 阅读 · 0 评论 -
CSS的浮动(float)布局效果
原理:有问题的原因是父级无法被子级撑开高度范围,overflow:hidden会检查父级的范围,这样高度就检查到了。1.额外标签法:在父级元素内容的最后添加一个块级元素,设置css属性clear:both(清除两侧浮动的影响)标准流也叫文档流,指的是标签在页面默认的排布规则,例如:块级元素独占一行,行内元素可以一行显示多个。场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能会导致页面布局混乱)注意:加了浮动属性的盒子,会脱标(不会占有标准流的位置)解决方法:清除浮动(清除浮动带来的影响)原创 2024-01-22 17:25:42 · 568 阅读 · 0 评论 -
css新闻列表案例(li标签和a标签各自控制一个背景图片)
G9“带货”背后:亏损面持续扩大,竞争环境激烈“中国天眼”又有新发现 已在《自然》杂志发表原创 2024-01-18 11:16:41 · 648 阅读 · 0 评论 -
CSS的盒子模型
* 内减模式:不需要手动减法也能让盒子大小为设置大小(300*300),加padding和border不会撑大盒子 *//* 内减模式:不需要手动减法也能让盒子大小为设置大小(300*300),加padding和border不会撑大盒子 */padding: 10px(上) 20px(右)30px(下)40px(左)注意:x轴偏移量和y轴偏移量必须书写,默认是外阴影,内阴影需要添加inset。/* 滚动条 (无论是否溢出,都显示滚动条位置) *//* 滚动条 (溢出才显示滚动条位置) */原创 2024-01-18 09:43:16 · 770 阅读 · 0 评论 -
CSS背景属性和显示模式
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)contain:等比例缩放背景图片以完全装入背景图,如果图片的宽高和盒子尺寸相等,可能背景图区部分空白。如果写了100% 图片的宽度跟盒子宽度一样,图片的高度按照图片等比例缩放。cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见,no-repeat:不平铺,盒子左上角显示一张背景图。行内块:一行共存多个,默认尺寸由内容决定,加宽高生效。属性值:水平方向位置,垂直方向位置关键字。原创 2024-01-15 12:18:25 · 478 阅读 · 0 评论 -
CSS的特性与简便写法
</span><span></span><span></div>id选择器:标签名#id名:<div id="box"></div>有内容的标签:div{内容}:<div>text</div> -->同级选择器:div+p:<div>原创 2024-01-04 21:21:28 · 1029 阅读 · 0 评论 -
CSS的进阶
这是在div里面的p里面的(孙子)span</span><span>这是在div里面的p里面的(孙子)span</span><span>这是在div里面的p里面的(孙子)span</span>选择器写法:选择器1,选择器2,...选择器N{CSS},选择器之间用,隔开。选择器写法:父选择器>子代选择器{CSS属性},父选择器之间用 > 隔开。<span>这是在div里面的(儿子)span原创 2024-01-03 00:55:24 · 656 阅读 · 0 评论 -
Css基础内容
p class="text2">上划线aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa。-- <link rel="stylesheet" href="Html5与Css3\CSS\my.css"> -->-- link引入外部样式表:rel:关系.样式表,敲完link直接按回车就行 -->rgb表示法:rgb(r,g,b):r,g,b表示红绿蓝三原色,取值:0-255。rgba表示法:rgb(r,g,b,a):a表示透明度,取值:0-1。原创 2023-12-28 17:59:24 · 819 阅读 · 0 评论 -
Html基础与表单案例
男</label><label>确认密码:</label><input type="password" placeholder="请输入确认密码"><label>密码:</label><input type="password" placeholder="请输入密码"><label>姓名:原创 2023-12-18 17:34:19 · 425 阅读 · 0 评论