CSS 3 流水賬

CSS3

菜鳥教程-CSS3教程

CSS 選擇器

  1. 元素選擇器
  • div { background-color: gray; font: italic normal bold 14pt normal 楷體_GB2312; }
  1. 屬性選擇器:
  • div[id]:所有含有id屬性的div元素;
  • div[id=xx]id屬性值為xxdiv元素;
  • div[id ~= xx]id屬性值為以空格隔開的系列值,其中某個值為xx;
  • div[id |= xx]id屬性值為|隔開的系列值,其中某個值為xx;
  • div[id*=xx]id屬性包含xxdiv元素;
  • div[id^=xx]id屬性以xx開始的div元素;
  • div[id$=xx]id屬性以xx結束的div元素;
  • div[id^=xx]id屬性以xx開始的div元素;
  1. ID 選擇器:#idValue { ... }
  2. class 選擇器:.myclass,對所有 classmyclass 的元素起作用;div.myclass,對 classmyclassdiv 起作用;
  3. 包含選擇器selector1 selector2 { ... },滿足 selector1內部的,再滿足selector2的元素:div .adiv內部,classa的元素;
  4. 子選擇器selector1 > selector2 { ... },滿足selector1的元素的,直接子元素中,再滿足selector2的元素:div > .adiv的子元素中,classa的;
  5. 選擇器組合:有些時候,我們需要讓一份 CSS 樣式對多個選擇器起作用,那就可以利用選擇器組合來實現了。語法如下:
    selector1, selector2, selector3, ... { ... }
    div, .a, #abc:對div元素、classa的元素、idabc的元素都起作用。

CSS 3.0 新增的偽類選擇器

  • first-child, last-child, nth-child, nth-last-child
  • first-of-type, last-of-type, nth-of-type, nth-last-of-type
  • link, visited, active, hover, focus, enabled, disabled, checked, default, read-only, read-write, selection

其他

  • text-align:文本對其方式,left, right, center, justify, 左右中間兩邊;
  • word-break:設置目標組件中文本內容的換行方式:
    • normal:靠瀏覽器的默認規則進行換行。通常,瀏覽器的處理規則是,對于英文單詞,瀏覽器只會在半角空格、連字符等地方進行換行,不會在單詞中間換行;對于中文來說,瀏覽器可以在任何一個中文字符后換行;
    • keep-all:只能在半角空格或連字符處換行;
    • break-all:允許在任何單詞(中文&英文)中間換行;

組件的居中對齊方式呢?

style="margin: auto; width=800px or 70%"

CSS 3 盒子模型

CSS 3 盒子模型

style.display: none:隱藏元素且不占空間;
style.visibility: visible/hidden:顯示/隱藏元素,但始終占空間;

CSS 3 分頁

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    <!-- 過渡動畫 -->
    transition: background-color .3s;
    border: 1px solid #ddd;
    <!-- 加上圓角 -->
    <!-- border-radius: 5px; -->
}

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>CSS3 分頁實例</h2>
<ul class="pagination">
  <li><a href="#">?</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">?</a></li>
</ul>

</body>
</html>
CSS3 分頁實例

CSS3 動畫

CSS3 也是可以制作動畫的,可以取代部分動態圖片和 JavaScript。
菜鳥教程連接

CSS 媒體查詢 @media

1、什么是媒體查詢
媒體查詢可以讓我們根據設備顯示器的特性(如視口寬度、屏幕比例、設備方向:橫向或縱向)為其設定CSS樣式,媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內容的情況下,為特定的一些輸出設備定制顯示效果。

2、為什么響應式設計需要媒體查詢
如果沒有CSS3的媒體查詢模塊,就不能針對設備特性(如視口寬度)設置特定的CSS樣式

媒體查詢例子:

如果瀏覽器窗口小于 500px, 背景將變為淺藍色:

@media only screen and (max-width: 500px) {    
body { 
    background-color: lightblue; 
}}

Try It!Amazing!

圖片的響應式設計

img {
    <!-- 圖片可能會超過其原始大小 -->
    <!-- width: 100%; -->
    <!-- 用 max-width 就行了 -->
    max-width: 100%;
    height: auto;
}

菜鳥教程-響應式 Web 設計

viewport

什么是 Viewport?
viewport 是用戶網頁的可視區域。

viewport 翻譯為中文可以叫做"視區"。
手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),用戶可以通過平移和縮放來看網頁的不同部分。

一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

響應式 Web 設計框架

Bootstrap

其他

<meta http-equiv="X-UA-Compatible" content="IE=edge">

這是一個文檔兼容模式的定義。Edge 模式告訴 IE 以最高級模式渲染文檔,也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染,避免版本升級造成的影響。

來自 Bootstrap 的說明:

Bootstrap 不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運行最新的渲染模式下,建議將此 <meta> 標簽加入到你的頁面中:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 鍵打開 IE 的調試工具,就可以看到 IE 當前的渲染模式是什么。
此 meta 標簽被包含在了所有 Bootstrap 文檔和實例頁面中,為的就是在每個被支持的 IE 版本中擁有最好的繪制效果。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區別? (1)、<...
    clark124閱讀 3,570評論 1 19
  • 第一章 導論 1.經濟學的核心問題是什么?(什么是經濟學) 實現稀缺資源的最優配置 經濟學的成本:機會成本(為了得...
    鵬之翼閱讀 564評論 0 3
  • “你覺得最美好的愛情是怎樣的?” “初戀到老?!? 很多年以前,你心里對愛情還存有最初的幻想。你不了解...
    黎小語閱讀 249評論 0 0
  • ?Allure報告中提供了關聯bug管理系統及用例管理系統的功能,原理類似,都是通過url鏈接的方式關聯。 用到的...
    許你一枝花閱讀 1,106評論 0 0