前言：
此刻各位老铁们对“css图片横向拉伸”大约比较关切，大家都想要学习一些“css图片横向拉伸”的相关资讯。那么小编同时在网络上汇集了一些有关“css图片横向拉伸””的相关资讯，希望看官们能喜欢，你们快快来学习一下吧！大学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dropdown { position: relative; display: inline-block; } .dropdown button { font-size: 18px; color: #f8f8f8; padding: 10px; background-color: #35be2e; box-shadow: #d1fb2a; cursor: pointer; } .dropdown button:hover { background-color: #55be9d; } .dropdown-content { display: none; position: absolute; /**绝对定位 修改这个属性体验absolute*/ background-color: #ff8158; min-width: 95px; } /*鼠标滑过显示另外一个组件**/ .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { display: block; text-decoration: none; text-align: center; /*margin: 10px; margin 外边距 修改外边距时候,a的内部文字下划线不能跟着横向拉伸*/ /*padding: 10px; padding内边距 修改内边距达到文字行间隔效果 下划线是跟着padding一起拉伸*/ padding: 10px; border-bottom-style: solid; border-bottom-color: white; } </style></head><body><div class="dropdown"> <button class="button"> 下拉菜单</button> <div class="dropdown-content"> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> </div></div><div style="position: absolute;margin-top: 200px"> <pre> /**css滑过一个组件 修改另外一个样式内容**/ /*鼠标滑过显示另外一个组件**/ .dropdown:hover .dropdown-content { display: none; } /**.dropdown-content a 修改文字内边距和外边距进行文字间隔,体验下划线长度效果*/ /*margin: 10px; margin 外边距 修改外边距时候,a的内部文字下划线不能跟着横向拉伸*/ /*padding: 10px; padding内边距 修改内边距达到文字行间隔效果 下划线是跟着padding一起拉伸*/ padding: 10px; </pre></div></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css图片横向拉伸
