- 博客(15)
- 收藏
- 关注
RSS订阅原创 pink前端基础--定位的使用案列 淘宝焦点图
给子盒子添加相对定位position: absolute;添加top或者left属性来调整在父盒子内的位置。2.1给父盒子添加 position: relative;绝对定位来约束子盒子的位置；要实现一个盒子里面盒子的位置 ，需要用定位来约束位置实现效果。1.先建一个父盒子，在里面添加图片和 左右两个链接a。2.css样式 要消除浮动；
2024-04-09 20:01:11
303
1
原创 pink前端学习--定位
相对于自己原来的位置，保留原来的位置；(默认定位，无定位 与标准流属性相同)定位也是摆放盒子，按照定位方式移动盒子。子级使用绝对定位 不会占有原来的位置，父级要使用相对定位 从而来限制子盒子。固定再浏览器可视区域不变 且不占有原本的位置，常用于搜索栏或者导航栏固定。2、某个元素可以自由的在盒子内移动，并且压住其他的盒子。并且在移动之前的位置继续占有，不会被其余的盒子占有，2. 定位组成 定位=定位模式+ 边移量。后面的盒子仍然以标准流的盒子对待他。1、无祖父元素，以浏览器来定位。2.有父盒子以父盒子定位。
2024-03-31 21:00:00
217
1
原创 pink前端--小知识点汇总 练手小案例
将多个小背景图片整合到一个大照片中 使用backgroung -position :x,y;来实现定位不同图片位置。谁改变给谁加 是让子盒子变化 所有给子盒子加。时间后面一定要加上时间单位s。效果 鼠标经过在后一个盒子 盒子变色。效果 鼠标在盒子上 进度条逐渐增加。使行内或行内块元素垂直居中。行内块元素会和文字的基线对齐。当鼠标经过盒子时 边框均匀变色。效果：使文字 居于图片中间。
2024-03-31 15:46:17
346
1
原创 Pink前端学习--清除浮动篇
清除浮动的本质 就是清除浮动元素造成的影响，因为浮动后子盒子不占有位置 整体父盒子高度就为0，就会影响父元素以外的元素，但是如果父盒子本身有高度就不影响，则不需要清除浮动。想要清除盒子的浮动 找到父元素给它添加overflow:hidden|auto|scroll；2.1 在最后一个浮动子元素后面添加一个盒子（.clear盒子）当作一堵墙 堵住前面浮动的盒子。清除完浮动后，父级就会根据子盒子自动检测高度。但是又不能是其父盒子高度为0 会影响子盒子的排版，所以要清除浮动后 不设置其高度。
2024-03-31 14:45:27
646
1
原创 学习pink前端 常见基本网页格式
1.1 为约束浮动元素位置 ，网页布局一般先使用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置。一般先亮出大盒子的高和宽。
2024-03-18 13:52:42
351
原创 pink前端 关于浮动
2）div是块级元素一般一个盒子占一行 但是加了浮动之后 不保留原来的位置。行内块元素就可以直接给高度和宽度 如下最后一个span盒子。2）如果行内元素有了浮动 则不需要转换成块级元素\。标准流盒子会上来 到浮动盒子原来的位置。1）.多个块级盒子（div）水平排成一行。1）脱离标准普通控制浮移动到指定位置（脱俗）2）.实现两个盒子左右对齐。1）浮动有行内块相似的性质。1.2 排成一行内的效果。
2024-03-18 13:12:24
285
原创 pink前端学习 盒子阴影
h-shadow: 必写 表示阴影的水平位置 为负值阴影水平向左 为正向右。v-shadow：必写 表示阴影的垂直位置 为负向上 为正向下。inset：将外部阴影改成内部阴影 默认外阴影 outset。但是属性只能写inset 写outset没效果不可以写。color：阴影颜色 一般使用rgba 改成半透明。spread：阴影的尺寸。
2024-03-18 12:49:52
131
原创 pink前端基础学习 圆角边框样式
4. 可以设置不同圆角 四个值表示左上角 右上角 右下角 左下角 两个值第一个表示左上右下和第二。2.使正方形变成圆 使radius的大小length等于正方形高度的一半 可以直接写50%个表示右上左下 也可以写成border-top-left-radius 这种形式。3.两边为半圆的圆角矩形 要把radius长度设成矩形高度的一半。我们总是看到这样的半圆的样式 我们该怎么实现它。1.改变radius改变圆角大小。
2024-03-15 08:30:00
197
1
原创 前端基础学习 背景位置方位名词应用
效果是一样的 ，在表方位的background-position:x,y;中x，y不需要在意顺序。1.关于 background-repeat: no-repeat：系统默认background-repeat为repeat， 会使背景图 片铺满背景所以要改成不重复no-repeat;3.背景重复效果：background-repeat :repeat|no-repeat|repeat-x|repeat-y;4.背景图片位置：background-position :x y;
2024-03-14 19:41:34
305
1
原创 学习pink老师前端基础 css实现小米侧边栏效果
2.侧边栏要把行内元素a变成块元素 使其竖着排 使链接单独占一行 并且有高度和宽度。3.鼠标经过链接时要改变颜色 使用伪类选择器a:hover。1.使用7个a标签 生成7个可点击的链接。使用a标签 实现如图效果的侧边栏。
2024-03-07 20:30:58
351
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人