CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?水平&垂直對齊
元素居中對齊
.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;
} 文本居中對齊
.center {text-align: center;border: 3px solid green;
} 圖片居中對齊
左右對齊——position定位
左右對齊——float
?
?垂直居中對齊
?
?
?組合選擇符
后代選擇器(以空格分隔)
-
div p {background-color:yellow; }子元素選擇器(以大于號分隔）-
div>p {background-color:yellow; }
-
div+p {background-color:yellow; }
-
div~p {background-color:yellow; }
-
?
?
?偽類
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */ 可以和css類配合使用
?:first-child偽類【選擇父元素的第一個子元素】
?
?所有<p>元素中的第一個<i>元素
?所有作為第一個子元素的<p>中的所有<i>元素
:lang 偽類【為不同的語言定義特殊的規則】
<style> q:lang(no) {quotes: "++++" "++++"; } </style> </head><body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> <p>在這個例子中,:lang定義了q元素的值為lang =“no”</p> <p><b>注意:</b> 僅當 !DOCTYPE 已經聲明時 IE8 支持 :lang.</p>
?
所有CSS偽類/元素
?
?
?
?偽元素
?添加一些選擇器的特殊效果
?
文本的首行設置特殊樣式
文本的首字母設置特殊樣式
多個偽元素
?:before?在元素的內容前面插入新內容
:after 在元素之后插入新的內容
所有CSS偽類/元素
?
?
導航欄
?
?觸發激活導航欄
給導航欄添加邊框
全屏導航欄
鏈接右對齊+添加分割線
固定導航條
響應式導航欄
?
?
下拉菜單
完整實例
?
轉載于:https://www.cnblogs.com/expedition/p/10925098.html
總結
以上是生活随笔為你收集整理的CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python Day26：多态、封装、内
- 下一篇： [洛谷1383]高级打字机 题解