- 博客(13)
- 收藏
- 关注
RSS订阅原创 使用rem设置移动端页面尺寸
如果浏览器视窗宽度为750px，那么html的font-size为100px。如果浏览器视窗宽度为375px，那么html的font-size为50px。通过js文件，根据浏览器的视窗宽度设置html元素的fontsize值。1rem代表30px;10rem代表300px;em：相对于父级的font-size值。<script src=''地址''>二、可以通过设置百分比解决。图片通过百分比来设置宽度。三、设置百分比计算繁琐。结果为：7.5rem；结果为：7.5rem；
2024-12-05 19:48:48
203
原创 响应式页面
缺点：页面效果不及单独为某一终端定制的页面效果；通过@media定义样式，浏览器窗口满足指定条件，才会应用此样式。同一套静态页面代码，在不同的设备中展现出不同的效果。总结：大部分项目不会整体才有响应式页面的解决方案。优点：一套页面适应多端设备，提升开发效率。/*小于指定宽度，样式生效*/响应式页面的优点与缺点。
2024-12-05 19:47:03
220
原创 grid布局
grid-column 属性（设置start和end）justify-items 属性（水平方向对齐方式）align-items 属性（垂直方向的对齐方式）grid-auto-columns属性。grid-column-start属性。单元格在整个grid容器中的对齐方式。grid-column-end 属性。justify-content属性。grid-auto-rows 属性。grid-row-start 属性。grid-row-end 属性。justify-self属性。
2024-12-05 19:45:28
251
原创 flex布局
align-self:flex项目的对其方式(auto | flex-start | flex-end | center | baseline |stretch)flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis：主轴排列为宽度，交叉轴排列为高度，设置px，默认值是auto。flex-grow：属性定义项目的放大比例，默认为0，空间充足，等比例补全。容器内部的元素为flex元素或者叫flex项目（flex-item）元素会变为一个flex容器。
2024-12-05 19:43:18
234
原创 动画效果
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。animation-name:规定需要绑定到选择器的keyframe名称。animation-iteration-cout:规定动画应该播放的次数。animation-timing-function:规定动画的速度曲线。但是将0%与100%执行的变为一样的话效果更好，会使动画更平滑。animation-delay:规定在动画开始之前的延迟。animation：动画名 秒数 函数 执行次数。keyframe定义一个动画。
2024-12-05 19:41:32
120
原创 过渡效果
transition-property 过度属性（例如transform旋转）transition-duration 过度持续时间（例如1s）transition-timing-function 过度函数。ease-in-out:和ease类似，但比ease幅度大。transition-delay 过度延迟时间。transition：属性 秒数 函数 延迟；transition:属性 秒数 过度函数；ease-out：结束慢。层级选择器如果只要这一层。ease-in：开始慢。over flow属性。
2024-11-27 19:58:30
223
原创 html5新增标签，CSS新增样式
不可以这样写，后面的transform会把前面的覆盖掉，应该把两个合起来写，放在同一个transform里面。参数分别表示：x轴偏移量，y轴偏移量，模糊半径，阴影颜色（不设置颜色为黑色）如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下。border-radius:左上，右上，右下，左下（顺时针）三、画布（<canvas>）例如刮刮乐。一、controls（音频自动播放）二、autoplay（视频自动播放）三、muted（静音，用在视频播放）三、形变：旋转、缩放、位移。四、SVG（定义矢量图）
2024-11-27 19:54:18
465
原创 树状结构，CSS定位，还原设计稿
默认下边框在盒子外部所以会把下面的内容挤跑，所以要加一个box-sizing:border-box;让网页增加了滚动条，但是固定元素位置不变（随着浏览器视窗动而动，始终在某一位置显示）container高度不用设置，但是宽度要设置,因为网页的内容如果多了会变化。绝对元素的父级设置一个相对定位元素，则在改元素上面显示的元素的位置就不会改变。根节点：每一个树状结构都有一个没有父级的节点，也被称为根节点。父级为定位元素，子级的绝对定位元素会以父级为参照物。希望谁在前面就将谁设置为更大的值。
2024-11-22 09:34:09
446
原创 盒子模型，浮动布局
行内元素（内联元素，行级元素）：不可以设置宽度和高度，不独立成行。内边距：padding(-top\-right\-botton\-left)外边距：margin(-top\-right\-bottom\-left)行内块元素：可以设置宽度和高度，不独立成行img,input,button。将元素设置为浮动元素(float)，块元素可以在同一行显示。块元素：可设置宽度和高度，独立成行。首先把所有元素的外边距设成0，然后把所有的内边距也设成0。
2024-11-17 19:30:57
501
原创 选择器进阶
不同选择器：ID（100）>CLASS（10）>element(1)伪类选择器（增加行为）:selector:hover。层级选择器:selector1 selector2。组合选择器:selector1,selector2。相同选择器：权重相同的话后面的会覆盖前面的。在选择器后面里面加上!表单里面添加一个按钮让鼠标移动之后变色。style里面写h1,h2(比如）外部样式（实际开发中大部分都是用）可以一边html一边css随意分配。通过css在页面上添加新的元素。内联样式（开发一般不用）
2024-11-11 00:26:33
293
原创 CSS选择器与常用属性
类选择器（常用）：在body里面写一个class,然后style里面通过.+class后面的名字找到标签。文本行高（垂直居中）：line-height（一行的高度）如果是一行文本则可以实现垂直居中的功能。区别id不能重复，一个id选择器只能指定一个，但是类选择器可以多个。在head标签里面加上一个style标签，在style标签里面写。字体大小：font-size（单位px，像素单位）文本水平居中：text-align：center。首先写一个选择器，对应的是下面的标签。id选择器：#+id的名字。
2024-11-03 21:57:31
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人