溢出属性、定位属性、z-index 和网页编辑
2022/4/28 6:15:44
本文主要是介绍溢出属性、定位属性、z-index 和网页编辑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
-
溢出属性
-
定位
-
z-index
-
网页编写小练习
-
JavaScript简介
-
溢出属性
# 当文本内容超出了标签了最大范围 overflow:hidden; ———— 直接隐藏多出来的文本内容 overflow:auto; ————— 提供滚轮条查看(滚轮条较宽) overflow:scroll; ————— 提供滚轮条查看(滚轮条较窄) # 头像实操 div { height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; overflow: hidden; } div img { width: 100%; }
-
定位属性
# 定位的状态 1、静态定位 ———— static 所有的标签默认都是静态标签, 也就是不能通过定位操作改变位置 2、相对定位 ———— relative 相对于原来的标签位置进行定位 3、绝对定位 ———— absolute 相对于已经定位过得父标签做定位 4、固定定位 ———— fixed 相对于浏览器窗口做定位 # 定位操作 position (后面跟定位属性单词) left\right\top\bottom(上下左右设置参数) 绝对定位 当没有父标签或者父标签没有定位时,则以body为准,相当于变成了相对定位 固定定位 右下方回到底部 position: fixed; right: 0; bottom: 50px;
-
z-index属性
""" 前端的页面可以看成三维坐标系, Z轴指向用户 """ 动态弹出的分层界面, 我们称之为模态框 # 调整颜色透明度 rgba(128,128,128,0.5) 最后一个参数就是透明度的度数
.modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; /* 透明度设置成50%*/ background-color: rgba(128,128,128,0.5); /* z轴为10 */ z-index: 10; } .cover { height: 200px; width: 400px; background-color: white; /* z轴为11, 必须比上面的大, 因为小的话, 就在坐标下方了 */ z-index: 11; position: fixed; left: 50%; top: 50%; margin-left: -200px; margin-top: -100px; }
-
网页编写
1.先用div和span勾勒出页面轮廓 标签的class和id值最好也做到见名知意 2.再编写html 3.最后编写css
# html <div class="blog-left"> <div class="blog-avatar"> <img src="https://img1.baidu.com/it/u=423358990,2953490635&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt=""> </div> <div class="blog-title"> <span>菠萝泥d博客</span> </div> <div class="blog-desc"> <span>草莓蓝莓蔓越莓, 碰见你我可真倒霉</span> </div> <div class="blog-link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微信公众号</a></li> <li><a href="">小红薯</a></li> </ul> </div> <div class="blog-info"> <ul> <li><a href="">#python</a></li> <li><a href="">#Golang</a></li> <li><a href="">#JavaScript</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article-list"> <div class="article-title"> <span class="title">美女成长日记</span> <span class="data">2022-04-27</span> </div> <div class="article-desc"> <span class="desc">关于一个美女一天八顿的日记</span> </div> <div class="article-info"> <span class="food">#美女秘籍</span> <span class="sport">#美女圈</span> </div> </div> </div>
# css /* 网页通用设置*/ /* 给页面添加颜色*/ body { margin: 0; background-color: #bcc4e5; } /* a标签去取下划线*/ a { text-decoration: none; } /* 列表修改,去取小圆点和页面距离为0*/ ul { list-style-type: none; padding-left: 0 } /* 左侧修改样式*/ .blog-left { float: left; height: 100%; width: 20%; position: fixed; left: 0; top: 0; background-color: #f6eae2; } /* 头像框*/ .blog-avatar { height: 200px; width: 200px; border-radius: 50%; border: 5px solid #f5dbf2; overflow: hidden; margin:20px auto; } .blog-avatar img { width: 100%; } /* 修改简介*/ .blog-title { color: #2c51c4; text-align: center; font-weight:bolder; margin: 20px auto; } .blog-desc { color: #2c51c4; text-align: center; margin: 20px auto; } .blog-link,.blog-info { font-weight: lighter; font-size: 25px; text-align: center; margin: 100px auto; } .blog-link a,.blog-info a { color: #8381ef; } .blog-link a:hover,.blog-info a:hover { color: white; } /* 右侧的样式*/ /* 比例调整*/ .blog-right { float:right; width: 78%; } .article-list{ background-color: white; margin: 30px 50px 30px 10px ; box-shadow: 6px 6px 6px rgba(28,28,70,0.5); } .article-title{ border-left:10px solid blueviolet; } .article-title .title { font-size: 36px; padding-left: 10px; } .article-title .data { float:right; margin: 20px 30px; font-weight: bolder; } .article-desc { padding-top: 10px; font-size: 26px; text-indent: 20px; border-bottom: 1px solid #161645; } .article-info { font-size: 18px; padding-left: 20px; padding-top:15px; padding-bottom: 15px; }
这篇关于溢出属性、定位属性、z-index 和网页编辑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南