HTML连载59-子绝父相
2019-12-27 16:00:33来源:博客园 阅读 ()
一、子绝父相
1.只使用相对定位,对图片的位置进行精准定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } ul{ list-style:none; width:800px; height:50px; background-color: red; margin:0 auto; } ul li{ float:left; width:100px; height: 50px; text-align:center; background-color: yellow; line-height: 50px; } ul li:nth-of-type(4){ /*这里复习了同类标签选择第几个进行设置它的样式*/ background-color: blue; } ul li img{ position:relative; left: -30px; top: -14px; width: 20px; height: 16px; /*这里可以先写个大概的数字,然后利用谷歌开发者定位进行滚动数据调节*/ } </style> </head> <body> <ul> <li>拍卖金融</li> <li>美妆馆</li> <li>京东超市</li> <li> 全球购<img src="bear.jpg"> </li> <li>闪购</li> <li>团购</li> <li>拍卖</li> <li></li> </ul> </body> </html>
这种方式的的缺点:可以看到虽然利用相对定位进行了数据调节来达到让图片定位的效果,但是由于相对定位是在标准流的基础上进行调节,所以原来图片的位置(也就是全球购后面的那块区域)依然是被占用着的。
2.下面只使用绝对定位来进行试验。
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
?这种方式的缺点:上次连载说到,绝对定位会以首屏来进行定位,因此当改变网页大小的时候,将会造成变形,定位到了?不合理的地方。
3.因此要同时运用绝对定位和相对定位进行编排才最合理
ul li:nth-of-type(4){
/*这里复习了同类标签选择第几个进行设置它的样式*/
background-color: blue;
position:relative;
}
ul li img{
/*介绍一个方法:子绝父相,即子元素使用绝对定位,父元素使用相对定位*/
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}
三、源码:
D153_SubAbsoluteFathRelative.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html?
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
原文链接:https://www.cnblogs.com/ruigege0000/p/12105221.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML5
下一篇:Web基础了解版08-JSTL
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash