- 博客(17)
- 收藏
- 关注
原创 使用rem设置移动端页面
而对于不同的手机的像素大小的不同,则可以通过js来检测,并通过一定的换算规则来确定html的font-size大小,从而使得页面能够适应各个像素大小的手机。子级大小width:5em;----则子级为350px。rem:相对于html标签的font-size大小。例如:父级为font-size:70px;em:相对于父级的font-size大小。
2025-01-26 20:54:13
99
原创 响应式页面
media screen and (min-width:像素大小) and (max-width:像素大小){@media screen and (min-width:像素大小){--------或者max-width。}-----当检测到页面大小在此范围内,则执行此内部的语句。}-------当页面大小满足条件时,执行语句。同样也可以只写一个条件。
2025-01-26 20:33:22
194
原创 grid布局
通过display:grid;来将其变为grid布局grid-template-columns:第一列宽度 第二列宽度 第三列宽度;-----这样设置宽度grid-template-rows:第一行高度 第二行高度 第三行高度;
2025-01-26 20:21:42
391
原创 flex布局
将元素设置display:flex;会将其变为flex容器,该容器内的元素叫flex元素或flex项目。而该容器内的flex项目并不是如浮动布局一样的独立成行,而是排成一行。(在默认情况下)并且项目占用整个容器的高度,如:flex布局中可分为两个:一个是主轴横向的;另一个是交叉轴纵向的;
2025-01-19 21:26:24
312
原创 css3动画效果
keyframes 动画名称{0%{代码} -------动画初始时的样式100%{代码} -------动画结束时的样式调用这个动画则是在css属性中加入animation:动画名称 持续时间 过渡函数 延迟时间 动画次数;如:若是动画次数加上infinte,则表示无限循环。animation-name:规定需要绑定到选择器上的动画名称animation-duration:规定持续时间animation-timing-function:过渡函数(速度曲线)
2025-01-12 20:35:49
234
原创 css3过渡效果
transition-property ------过渡属性transition-duration-------过渡持续时间transition-timing-function-------过渡函数transition-delay------过渡延迟时间除了像上面那样写还可以简写,使用最多的也是简写简写:transition:属性 秒数 函数 延迟;
2024-12-15 12:48:03
205
原创 css 3新增样式(边框圆角、阴影、形变)
语法:border-radius:左上 右上 右下 左下;(若只设置两个值、则第一个值为左上和右下;第二个值表示左下和右上)内部值的含义为圆角的圆的半径。
2024-12-10 19:22:38
367
原创 HTNL5新增标签
布局元素相当于一个有语义的div。header:网页头部nav:导航栏aside:侧边栏article:显示文章section:布局的一部分footer:网页页脚。
2024-12-08 17:03:52
148
原创 css定位
特性:脱离文档流、默认参照物为网页左上角。例如:相对定位:relative特性:不脱离文档流、默认参照物为原位置的左上角。例如:固定定位:fixed特性:脱离文档流、随着视窗移动而移动。例如网页中常见的回到顶部,这个就是固定定位。top、left、right、bottom、z-index(起到控制z轴的作用)z-index的语法及作用: z-index:z轴的大小该属性可以定义这个标签在立体中z轴的位置,来确定那个标签显示在上面。如 此时u1的z轴坐标为2而u2的z轴坐标为1,所以显示的是u1,也就是黄
2024-12-01 19:44:49
189
原创 HTML的树状结构
另外若将标签及标签属性都写在一个文件里较为繁琐,所以可以通过建立一个.css后缀的文件并将标签属性写于其中,然后以link+tab的方式引出<link rel="stylesheet" href="使用树状结构进行剖析可以更直观地看出各个标签的关系,对于HTML开发有着较大帮助。中写上.css后缀的文件地址完成两个文件的连接。树状结构在HTML里作为分析其结构的重要方式,
2024-11-28 19:30:34
390
原创 选择器的优先级
此时有一个class选择器和一个id选择器,依据其权重大小,可知字体颜色应为蓝色。此时上方的的权重为class选择器(10)加id选择器(100)在相同的选择器下,靠后的选择器将会覆盖靠前的选择器。不同的选择器的权重不同,选择器作用依据于该权重规则。此时字体颜色将为红色,红色将原来的蓝色覆盖。层级选择器的优先级为各个选择器的权重的和。而下方的仅为class选择器(10)则规则和相同选择器一样。因此字体颜色为红色。
2024-11-14 23:03:18
169
原创 更多选择器
color:red;-------(此处括号内的是可以进一步确定作用的 对象)例:—— -----(1.1)则省略号部分内容前后都将加“---------”的效果。
2024-11-10 13:25:01
360
原创 CSS选择器和与常用属性
注:text-align为水平对齐,后面加center为居中。(3)id选择器:#+idName。文本行高(垂直居中):line-height ((2) 类选择器:.+className。1.css选择器格式(css控制网页的样式)1.css选择器格式(css控制网页的样式)背景色: background-color。(1)元素选择器:h1,img,p。文本水平居中:text-align。字体大小:font-size。(4)通配符选择器:*{则可以:.text{字体颜色:color。
2024-11-02 20:22:12
256
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人