使用绝对定位来实现拉手网上的效果 | 学习笔记

简介: 快速学习使用绝对定位来实现拉手网上的效果。

开发者学堂课程【CSS 快速掌握:使用绝对定位来实现拉手网上的效果】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/611/detail/9203


使用绝对定位来实现拉手网上的效果


内容介绍

一、使用绝对定位来实现拉手网上的效果


一、使用绝对定位来实现拉手网上的效果

<title>使用绝对定位来实现拉手网上的效果

<style type= "text/css">

/*第一步:清除内填充与外边框样式*/}

margin:0;padding:0;}.Box{width:封面图片宽度pxHeight:封面图片高度pxBorder:宽度px solid #000;Morgin:100px auto;父相:/*相对定位*/Position:relative}

.box span{/*绝对定位*/子绝:Position:absolute;/*绝对定位的坐标来实现*/Left:px;top:px;}

<span><img src="./images/标签小图片.png"></span>

<div><img src="./images/封面图片.jpg"alt=""></div></div>

 

相关文章
|
5月前
|
前端开发 JavaScript API
如何让元素在页面中完美居中?看这篇文章就够了!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
22天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
2月前
|
前端开发 容器
揭秘Web前端布局秘籍:浮动,那个让你又爱又恨的布局神器,你真的了解它吗?
【8月更文挑战第23天】在Web前端设计中,浮动是一种关键布局技术,能让元素在文档流中灵活移动,实现文本环绕图片、多列布局等效果。元素通过CSS的 `float` 属性脱离正常文档流并移动到容器边缘,后续非浮动内容则围绕该元素排列。浮动可用于多列布局、导航菜单及图文混排。需注意清除浮动以避免布局问题,并处理可能导致的父元素高度塌陷。
34 0
|
5月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
64 0
|
5月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(中)
【CSS进阶】巧用伪元素before和after制作绚丽效果
34 0
|
5月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(上)
【CSS进阶】巧用伪元素before和after制作绚丽效果
52 0
|
5月前
|
前端开发
【零基础入门前端系列】—浮动(十八)
【零基础入门前端系列】—浮动(十八)
|
前端开发 程序员
第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩
第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩
106 0
|
前端开发
前端知识案例-网页文档流
前端知识案例-网页文档流
56 0
前端知识案例-网页文档流
|
前端开发
前端知识案例学习7-元素居中
前端知识案例学习7-元素居中
53 0
前端知识案例学习7-元素居中