欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

前端入门CSS(3)

发布时间：2024/9/5 HTML 45 豆豆
生活随笔 收集整理的这篇文章主要介绍了 前端入门CSS(3) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

day60

 

不透明度

opacity()\

 

 opacity (不透明度)
            1. 取值0~1
            2. 和rgba()的区别:
                1. opacity改变元素\子元素的透明度效果
                2. rgba()只改变背景颜色的透明度效果

 

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>透明度示例</title><style>.c1,.c2{height: 400px;width: 400px;color: red;}.c1{/*背景和子标签都变淡*/background-color: black;opacity: 0.5;}.c2{/*只改变背景颜色透明度*/background-color: rgba(0,0,0,0.5);}</style> </head> <body><div class="c1">我是c1类的div标签</div> <div class="c2">我是c2类的div标签</div></body> </html>

效果：

 c1中内容根据背景透明度改变而改变，c2只有背景透明度改变。

 

z-index

1. 数值越大,越靠近你
 2. 只能作用于定位过的元素
 3. 自定义的模态框示例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>z-index</title><style>*{/*页面不留边界*/padding: 0;margin: 0;}.c1{height: 150px;width: 150px;background-color: red;/*虽然位置不变，但是属于定位过的元素*/position: relative;/*z-index只作用于定位过的元素*//*数值越大,越靠近你 */z-index: 2;}.c2{height: 200px;width: 200px;background-color: green;position: relative;top: -150px;}</style> </head> <body><div class="c1"></div> <!--c2覆盖c1,因为c2在后面，需要用z-index调整--> <div class="c2"></div></body> </html>

效果：

红色不会被覆盖。

 

模态框：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>青春版模态框示例</title><style>.cover{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5);}.modal{width: 600px;height: 400px;background-color: white;position: fixed;top: 50%;left: 50%;/*往左上角挪*/margin-top: -200px;margin-left: -300px;}</style> </head> <body><div class="cover"></div> <!--modal覆盖cover,因为modal在后面--> <div class="modal"></div></body> </html>

效果：

 

小米导航条

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小米商城导航条示例</title><style>*{margin: 0;padding: 0;}/*将列表前的点去掉*/ul{list-style-type: none;}/*使导航条横着*/.nav-left li{float:left;padding-right: 20px;}.nav-right {float: right;}.nav{/*左右都浮动，没有内容撑起，需要内容撑起*/background-color: #79aec8;}.c1{clear:left;clear:right;}</style> </head> <body><div class="nav"><div class="nav-left"><ul><!--li*8>a tab--><li><a href="">玉米商城</a></li><li><a href="">大米</a></li><li><a href="">豆浆</a></li><li><a href="">腰果</a></li><li><a href="">橘子</a></li><li><a href="">柚子</a></li><li><a href="">黑米</a></li><li><a href="">橙子</a></li></ul></div><div class="nav-right"><a href="">登录</a><a href="">注册</a><a href="">购物车</a></div><!--作用为撑起内容，因为清除左右浮动，所以另起一行，但是没有内容，所以只撑起背景色--><div class="c1"></div> </div></body> </html>

效果：

转载于:https://www.cnblogs.com/112358nizhipeng/p/10164868.html

总结

以上是生活随笔为你收集整理的前端入门CSS(3)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。