前端入门CSS(3)
生活随笔
收集整理的這篇文章主要介紹了
前端入门CSS(3)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
day60
?
不透明度
opacity()\
?
?opacity (不透明度)
?? ??? ??? ?1. 取值0~1
?? ??? ??? ?2. 和rgba()的區(qū)別:
?? ??? ??? ??? ?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中內(nèi)容根據(jù)背景透明度改變而改變，c2只有背景透明度改變。
?
z-index
1. 數(shù)值越大,越靠近你
?2. 只能作用于定位過的元素
?3. 自定義的模態(tài)框示例
效果：
紅色不會被覆蓋。
?
模態(tài)框：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>青春版模態(tài)框示例</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>效果：
?
小米導(dǎo)航條
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小米商城導(dǎo)航條示例</title><style>*{margin: 0;padding: 0;}/*將列表前的點去掉*/ul{list-style-type: none;}/*使導(dǎo)航條橫著*/.nav-left li{float:left;padding-right: 20px;}.nav-right {float: right;}.nav{/*左右都浮動，沒有內(nèi)容撐起，需要內(nèi)容撐起*/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="">豆?jié){</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><!--作用為撐起內(nèi)容，因為清除左右浮動，所以另起一行，但是沒有內(nèi)容，所以只撐起背景色--><div class="c1"></div> </div></body> </html>效果：
轉(zhuǎn)載于:https://www.cnblogs.com/112358nizhipeng/p/10164868.html
總結(jié)
以上是生活随笔為你收集整理的前端入门CSS(3)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Golang垃圾回收机制（一）
- 下一篇： HTML表格,table,thead,t