CSS3與頁面佈局學習總結（一）——概要、選擇器、特殊性與刻度單位

来源:http://www.cnblogs.com/best/archive/2016/11/23/6093144.html
-Advertisement-
Play Games

web前端開發者最最註的內容是三個：HTML、CSS與JavaScript，他們分別在不同方面發揮自己的作用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。當然內容與用戶資源也是不能忽視的。儘量不要跨職責範圍使用，有點“SRP單一職責”的意思，如字 ...


web前端開發者最最註的內容是三個：HTML、CSS與JavaScript，他們分別在不同方面發揮自己的作用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。當然內容與用戶資源也是不能忽視的。儘量不要跨職責範圍使用，有點“SRP單一職責”的意思，如字體大小應該是CSS控制的，就不應該使用HTML標簽完成，如果CSS能解決的問題儘量不要用JavaScript完成。

一、CSS3概要

CSS（Cascading Style Sheet）是層疊樣式表的意思，CSS3就是在CSS2.1的基礎上升級的CSS新版本，屬於HTML5的一部分。它可以有效地對頁面的佈局、字體、顏色、背景、動畫和其它效果實現。CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規範作為一個模塊實在是太龐大而且比較複雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。

1.1、特點

1.2、效果演示

純CSS3畫出小黃人並實現動畫效果

HTML頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drawLittleHuang</title>
    <link rel="stylesheet" type="text/css" href="drawLittleHuang.css">
</head>
<body>
    <div class="wrapper"><!-- 容器 -->
        <div class="littleH"><!-- 小黃人 -->
            <div class="bodyH"><!-- 身體 -->
                <div class="trousers"><!-- 褲子 -->
                    <div class="condoleBelt"><!-- 吊帶 -->
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                    <div class="trousers_top"></div><!-- 褲子突出的矩形部分 -->
                    <div class="pocket"></div><!-- 褲袋 -->
                    <!-- 三條線 -->
                    <span class="line_left"></span>
                    <span class="line_right"></span>
                    <span class="line_bottom"></span>
                </div>
            </div>
            <div class="hair"><!-- 頭髮 -->
                <span class="left_hair_one"></span>
                <span class="left_hair_two"></span>
            </div>
            <div class="eyes"><!-- 眼睛 -->
                <div class="leftEye"><!-- 左眼 -->
                    <div class="left_blackEye">
                        <div class="left_white"></div>
                    </div>
                </div>
                <div class="rightEye"><!-- 右眼 -->
                    <div class="right_blackEye">
                        <div class="right_white"></div>
                    </div>
                </div>
            </div>
            <div class="mouse"><!-- 嘴巴 -->
                <div class="mouse_shape"></div>
            </div>
            <div class="hands"><!-- 雙手 -->
                <div class="leftHand"></div>
                <div class="rightHand"></div>
            </div>
            <div class="feet"><!-- 雙腳 -->
                <div class="left_foot"></div>
                <div class="right_foot"></div>
            </div>
            <div class="groundShadow"></div><!-- 腳底陰影 -->
        </div>
    </div>
</body>
</html>
View Code

CSS樣式：

@charset "utf-8";

body{
    margin: 0;
    padding:0;
}
.wrapper{
    width: 300px;
    margin:100px auto;
}
.litteH{
    position: relative;
}
.bodyH{
    position: absolute;
    width: 240px;
    height: 400px;
    border:5px solid #000;
    border-radius: 115px;
    background: rgb(249,217,70);
    overflow: hidden;
    z-index: 2;
}
.bodyH .condoleBelt{
    position: absolute;
}
.bodyH .condoleBelt .left,
.bodyH .condoleBelt .right{
    width: 100px;
    height: 16px;
    border:5px solid #000;
    background: rgb(32,116,160);
    position: absolute;
    top:-90px;
    left:-35px;
    z-index: 2;
    -webkit-transform:rotate(45deg);
}
.bodyH .condoleBelt .left{
    top:-88px;
    left:165px;
    -webkit-transform:rotate(-45deg);
}
.bodyH .condoleBelt .left:after,
.bodyH .condoleBelt .right:after{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:4px;
    left:88px;
}

.bodyH .condoleBelt .left:after{
    left:5px;
}
.bodyH .trousers{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    border-top: 6px solid #000;
    background: rgb(32,116,160);
}
.trousers_top{
    width: 160px;
    height: 60px;
    border:6px solid #000;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    background: rgb(32,116,160);
    position: absolute;
    bottom: 100px;
    left:34px;
}
.pocket{
    width: 60px;
    height: 45px;
    border:6px solid #000;
    border-radius: 0px 0px 25px 25px;
    position: absolute;
    bottom:65px;
    left:84px;
}
.line_right{
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 100px;
    border-bottom:6px solid #000;
    border-left:6px solid #000;
    position: absolute;
    left: 0;
    bottom:60px;
    -webkit-transform:rotate(-75deg);
}
.line_left{
    width: 30px;
    height: 30px;
    border-bottom-right-radius: 100px;
    border-bottom:6px solid #000;
    border-right:6px solid #000;
    position: absolute;
    right: 0;
    bottom:63px;
    -webkit-transform:rotate(75deg);
}
.line_bottom{
    height: 40px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:118px;
    bottom: 0px;
}
.hair{
    position: relative;
}
.left_hair_one{
    width: 130px;
    height: 100px;
    border-radius: 50%;
    border-top:8px solid #000;
    position: absolute;
    left:17px;
    top:-17px;
    -webkit-transform:rotate(27deg);
    -webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
    0%,25%,31%,100%{
    }
    30%{
        -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
    }
}
.left_hair_two{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-top:6px solid #000;
    position: absolute;
    left:45px;
    top:-10px;
    -webkit-transform:rotate(15deg);
}
.eyes{
    position: relative;
    z-index: 3;
}
.eyes .leftEye,.eyes .rightEye{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border:6px solid #000;
    background: #fff;
    position: absolute;
    top:60px;
    left: 27px;
}
.eyes .leftEye{
    left: 124px;
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:24px;
    left:22px;
    -webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye{
    0%,20%,50%,70%,100%{
        -webkit-transform: translateX(0px);
    }
    30%,40%{
        -webkit-transform: translateX(15px);
    }
    80%,90%{
        -webkit-transform: translateX(-15px);
    }
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top:7px;
    left:17px;
    -webkit-animation: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye{
    0%,20%,50%,70%,100%{
        -webkit-transform: translateX(0px);
    }
    30%,40%{
        -webkit-transform: translate3d(3px,4px,0);
    }
    80%,90%{
        -webkit-transform: translate3d(-15px,4px,0);
    }
}
.eyes .leftEye .left_blackEye .left_white{
    top:4px;
    left:17px;
}
.eyes .leftEye:after,
.eyes .rightEye:after{
    content: '';
    width: 28px;
    height: 18px;
    background: #000;
    position: absolute;
    left:-30px;
    top:37px;
    -webkit-transform:skewX(20deg) rotate(7deg);
}
.eyes .leftEye:after{
    left:89px;
    top:37px;
    -webkit-transform:skewX(-20deg) rotate(-7deg);
}
.mouse{
    position: relative;
}
.mouse .mouse_shape{
    width: 55px;
    height: 35px;
    border:5px solid #000;
    border-bottom-left-radius: 30px;
    background: #fff;
    position: absolute;
    top:175px;
    left:98px;
    z-index: 3;
    -webkit-transform:rotate(-35deg);
    -webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
    40%,43%{
        width: 45px;
        height: 25px;
        top:180px;
    }
    0%,35%,48%,100%{
        width: 55px;
        height: 35px;
        top:175px;
        -webkit-transform:rotate(-35deg);
    }
}
.mouse .mouse_shape:after{
    content: '';
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: rgb(249,217,70);
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_mask{
    40%,43%{
        width: 60.5px;
        top:-19.3px;
        left:1.5px;
    }
    0%,35%,48%,100%{
        width: 70px;
        top:-16px;
        left:3px;
        -webkit-transform:rotate(33deg);
    }
}
.hands{
    position: relative;
}
.hands .leftHand,
.hands .rightHand{
    width: 80px;
    height: 80px;
    border:6px solid #000;
    border-radius: 25px;
    background: rgb(249,217,70);
    position: absolute;
    top:220px;
    left:-23px;
    -webkit-transform:rotate(40deg);
    -webkit-animation:rightHand .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand{
    0%,50%,100%{
        -webkit-transform: rotate(40deg);
    }
    30%{
        -webkit-transform: rotate(37deg) translateX(1px);
    }
}
.hands .leftHand{
    left:182px;
    top:220px;
    -webkit-transform:rotate(-40deg);
    -webkit-animation:leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand{
    0%,50%,100%{
        -webkit-transform: rotate(-40deg);
    }
    80%{
        -webkit-transform: rotate(-37deg) translateX(-1px);
    }
}
.hands .leftHand:after,
.hands .rightHand:after{
    content: '';
    width: 6px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:13px;
    top:50px;
    -webkit-transform:rotate(90deg);
}

.hands .leftHand:after{
    left:53px;
    top:50px;
    -webkit-transform:rotate(-90deg);
}
.feet{
    position: relative;
}
.feet .left_foot,
.feet .right_foot{
    width: 36px;
    height: 50px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 9px;
    background: #000;
    position: absolute;
    top: 406px;
    left:88px;
    -webkit-transform-origin: right top;
    -webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }
    80%{
        -webkit-transform: rotate(10deg);
    }
}
.feet .left_foot{
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 6px;
    left:130px;
    -webkit-transform-origin: left top;
    -webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }

    30%{
        -webkit-transform: rotate(-10deg);
    }
}
.feet .left_foot:after,
.feet .right_foot:after{
    content: '';
    width: 60px;
    height: 35px;
    border-radius: 20px 10px 21px 15px;
    background: #000;
    position: absolute;
    left:-36px;
    top:14.4px;
    -webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
    border-radius: 10px 20px 15px 21px;
    left:13px;
    -webkit-transform:rotate(-5deg);
}
.groundShadow{
    width: 200px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    top: 455px;
    left:25px;
}
View Code

 

相冊演示的代碼可以在示例中下載到。

1.3、幫助文檔與學習

權威的幫助文檔是最好的學習資料，CSS2的幫助，非常詳細：

CSS3的幫助文檔：

點擊下載幫助文檔

二、選擇器

在使用CSS時我們首先要做的事情是找到元素，在寫相應的樣式，在CSS2.1中最常使用的是三種選擇器：

a)、ID選擇器：以#開始，引用時使用id，如id="div1"

#div1

{

   color:red;

}

b)、類選擇器：以.開始，使用class屬性引用，可以有多個，如class="cls1 cls2 cls3"

.cls1

{

   background-color:#99ccff;

}

c)、標簽選擇器：以標簽名稱開始，如p,span,div,*

div span

{

   font-size:14px;

}

當然還有如偽類選擇，a:hover，a:link，a:visted，a:active。

在CSS3中新增了很多的選擇器，如果大家會jQuery，jQuery中多數選擇器在CSS3中都可以直接使用。

1.1、基礎的選擇器

紅色字體中選擇器的區別是：p.info的意思是p元素中必須有class="info"屬性將被選擇，p .info是選擇後代元素，示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>選擇器</title>
        <style type="text/css">
            p.info{
                color: red;
            }
            p .info{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>選擇器</h2>
        <p class="info">p1</p>
        <p>
                <span class="info">span1</span>
                <p>p3</p>
        </p>
    </body>
</html>

 運行結果：

1.2、組合選擇器

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>組合選擇器</title>
        <style type="text/css">
             #div1 span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>組合選擇器</h2>
        <div id="div1">
            <span>span1</span>
            <div id="div2">
                <span>span2</span>
            </div>
        </div>
        <span>span3</span>
    </body>
</html>

運行結果：

 示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>組合選擇器</title>
        <style type="text/css">
             #div1 > span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>組合選擇器</h2>
        <div id="div1">
            <span>span1</span>
            <div id="div2">
                <span>span2</span>
            </div>
        </div>
        <span>span3</span>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>組合選擇器</title>
        <style type="text/css">
             #div1 + span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>組合選擇器</h2>
        <div id="div1">
            <span>span1</span>
            <div id="div2">
                <span>span2</
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • APP多版本共存，服務端如何相容？
    做過APP產品的技術人員都知道，APP應用屬於一種C/S架構的，所以在做多版本相容，升級等處理則比較麻煩，不像web應用那麼容易。下麵將帶大家分析幾種常見的情況和應對方式： 小改動或者新加功能的 這種情況，資料庫結構和API程式一般是可以相容多版本的，所以不用強制升級，可以坐到多版本共存。 儘量採用 ...
  • 3種web會話管理的方式
    http是無狀態的，一次請求結束，連接斷開，下次伺服器再收到請求，它就不知道這個請求是哪個用戶發過來的。當然它知道是哪個客戶端地址發過來的，但是對於我們的應用來說，我們是靠用戶來管理，而不是靠客戶端。所以對我們的應用而言，它是需要有狀態管理的，以便服務端能夠準確的知道http請求是哪個用戶發起的，從 ...
  • 面向對象之理解
    面向對象之理解 1.簡單舉例: 我們可以看到一個超市有收銀員,採購員,配貨員等. 收銀員之間:有不同的姓名,年齡,工號等,但有相同的行為方法,即掃描貨物,收錢,找錢等. 採購員之間:有不同的姓名,年齡,工號等,但有相同的行為方法,即統計缺貨數量,進行採購行為等. 配貨員之間:有不同的姓名,年齡,工號 ...
  • 工廠方法
    接上篇簡單工廠模式進行改進。 由於簡單工廠模式違背開-閉原則，彈性太弱，例如增加一種鳥類，會造成修改類（工廠類） 好的實現應該是增加一種鳥類不影響現有類的修改。 思路： 在簡單工廠的基礎上我們增加一個抽象類（基礎抽象類），並且在基礎抽象工廠類中必須要定義一個抽象方法用來獲取所有鳥類的抽象基類，然後使 ...
  • ABP領域層
    1、實體Entites 1.1 概念 實體是DDD（領域驅動設計）的核心概念之一。 實體是具有唯一標識的ID且存儲在資料庫總。實體通常被映射成資料庫中的一個表。 在ABP中，實體繼承自Entity類。 Id是所有繼承自Entity類的實體主鍵。 Id數據類型可以被更改，預設是int(int32)類型 ...
  • PHP設計模式（二）工廠方法模式（Factory Method For PHP）
    簡單工廠簡述： 簡單工廠模式實現了生產產品類的代碼跟客戶端代碼分離，在工廠類中你可以添加需要生成長跑的邏輯代碼（new 產品類），但是問題來了，優秀的代碼是符合“開閉原則”如果你要加一個C類產品，你就要修改工廠類裡面的代碼，也就是說要增加條件語句如：switch case。對於這個問題，接下來的工廠 ...
  • 極光推送和友盟推送，ios端和安卓端的後端調試設置
    我是最後端的，這兩天搞了一個app項目，前端安卓使用友盟很方便，調試比較順利，然後ios就遇到各種問題了，證書、發送成功推送不成功，測試時用的TestMode(),ios上架之後就必須用productionMode(),糾結了幾天，還是換成jpush,很快就調試成功了。 趁著中午休息的時間，兩個平臺 ...
  • PHP 設計模式（一）簡單工廠模式 （Simple Factory For PHP）
    最近天氣變化無常，身為程式猿的寡人！~終究難耐天氣的挑戰，病倒了，果然，程式猿還需多保養自己的身體，有句話這麼說：一生只有兩件事能報複你：不夠努力的辜負和過度消耗身體的後患。話不多說，開始吧。 一、什麼是簡單工廠模式 簡單工廠 （Simple Factory）又稱靜態工廠方法模式（Static Fa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類