week4.md - jenny126/wp109b GitHub Wiki

Combinators

space

<!DOCTYPE html>
<html>
    <head>
        <style>
            div p {
                color: cornflowerblue;
            }
        </style>
        <p>156166</p>
        <div>
            <p>00000</p>
            <section><p>123123</p></section>
        </div>
        <p>null</p>
    </head>
</html>

0401

> (section中的文字不套用格式)

<!DOCTYPE html>
<html>
    <head>
        <style>
            div >p {
                color: cornflowerblue;
            }
        </style>
        <p>156166</p>
        <div>
            <p>00000</p>
            <section><p>123123</p></section>
            <p>21221211212121</p>
        </div>
        <p>null</p>
        <P>kfpokvvpfodkkvpod</P>
    </head>
</html>

0402

+ (div下一行套用格式)

<!DOCTYPE html>
<html>
    <head>
        <style>
            div +p {
                color: cornflowerblue;
            }
        </style>
        <p>156166</p>
        <div>
            <p>00000</p>
            <section><p>123123</p></section>
            <p>21221211212121</p>
        </div>
        <p>null</p>
        <P>kfpokvvpfodkkvpod</P>
    </head>
</html>

0403

~ (div後都套用格式)

<!DOCTYPE html>
<html>
    <head>
        <style>
            div ~p {
                color: cornflowerblue;
            }
        </style>
        <p>156166</p>
        <div>
            <p>00000</p>
            <section><p>123123</p></section>
            <p>21221211212121</p>
        </div>
        <p>null</p>
        <P>kfpokvvpfodkkvpod</P>
    </head>
</html>

0404

overflow

overflow: visible

<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                background-color: cornflowerblue;
                width: 100px;
                height: 200px;
            border: 15px dotted blueviolet;
            overflow: visible;
            }
        </style>
        <div>
        <p>
            this is my code</p>
        </div>
    </head>
</html>

0405

overflow: hidden

<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                background-color: cornflowerblue;
                width: 100px;
                height: 200px;
            border: 15px dotted blueviolet;
            overflow: hidden;
            }
        </style>
        <div>
        <p>
            this is my code</p>
        </div>
    </head>
</html>

0406

overflow: scroll

<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                background-color: cornflowerblue;
                width: 100px;
                height: 200px;
            border: 15px dotted blueviolet;
            overflow: scroll;
            }
        </style>
        <div>
        <p>
            this is my code</p>
        </div>
    </head>
</html>

0407

overflow: auto

<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                background-color: cornflowerblue;
                width: 100px;
                height: 200px;
            border: 15px dotted blueviolet;
            overflow: auto;
            }
        </style>
        <div>
        <p>
            this is my code</p>
        </div>
    </head>
</html>

0408

float

float: right 圖片在右邊(跟文字一起)

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                float: right;
            }
        </style>
        <p>
            this is my code
            <img src="https://github.com/jenny126/wp109b/blob/main/pic/egpic.jpg?raw=true"width:auto;height:auto;>
            this is my code
            </p>
    </head>
</html>

0409

float: left 圖片在左邊 (跟文字一起)

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                float: left;
            }
        </style>
        <p>
            this is my code
            <img src="https://github.com/jenny126/wp109b/blob/main/pic/egpic.jpg?raw=true"width:auto;height:auto;>
            this is my code
            </p>
    </head>
</html>

0410

No float 圖片不跟文字混在一起

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                float: none;
            }
        </style>
        <p>
            this is my code
            <img src="https://github.com/jenny126/wp109b/blob/main/pic/egpic.jpg?raw=true"width:auto;height:auto;>
            this is my code
            </p>
    </head>
</html>

0411

clear

  • clear: left; 左邊必須淨空
  • clear: right; 右邊必須淨空

The clearfix Hack

  overflow: auto;

添加overflow使物件不會溢出範圍

Float Examples

inline-block

  • display: inline; 在行文之間的方框，不會干擾版面的配置
  • display: inline-block; 根據設定的長寬而干擾版面配置的方框(干擾行距)
  • display: block; 直接按照設置的長寬設置文字方框，並且會自動換行
<!DOCTYPE html>
<html>
    <head>
        <style>
            span.a{
                display: inline;
                width: 50px;
                height: 50px;
                padding: 2px;
                border: 1px solid green;
                background-color: aqua;  
            }
            span.b{
                display: inline-block;
                width: 50px;
                height: 50px;
                padding: 2px;
                border: 1px solid green;
                background-color: aqua;  
            }
            span.c{
                display: block;
                width: 50px;
                height: 50px;
                padding: 2px;
                border: 1px solid green;
                background-color: aqua;  
            }
        </style>
    </head>
    <body>
        <h1>display: inline</h1>
        <div>display: inlinedisplay: inlinedisplay: inlinedisplay: inlinedisplay: inlinedisplay: inlinedisplay: inlinedisplay: inlinedisplay: inline<span class="a">display: inline</span><span class="a">display: inline</span> display: inline</div>
        <h1>display: inline-block</h1>
        <div>display: inline-blockdisplay: inline-block<span class="b">display: inline-block</span>k<span class="b">display: inline-block</span>display: inline-block</div>
        <h1>display: block</h1>
        <div>display: blockdisplay: block<span class="c">display: block</span><span class="c">display: block</span>display: block</div>
    </body>
</html>

0413 補充:display的32種寫法

Pseudo-classes 虛擬類別(一個冒號)

ex. hover(將滑鼠移動到範圍內) a.highlight:hover or div:hover

Pseudo-elements(兩個冒號)

Pseudo-classes和Pseudo-elements說明

Opacity / Transparency

Transparent Box

Navigation Bar

Image Gallery 圖片牆<放置圖片，視窗大小更改時跟著移動

Attribute Selectors

Website Layout

Rounded Corners

border-radius: xxpx;

利用此讓矩形得直角變得有弧度

border-radius: 15px 50px 30px 5px;

輸入多於一種的值，讓不同直角產生不同弧線

Transitions

很帥的東西，一個延遲伸長(?)的部分，雖然很帥但我應該暫時不會用

資料及參考來源:
陳鍾誠老師的個人網頁
陳鍾誠老師的GITLAB
W3SCHOOL

⚠️ **GitHub.com Fallback** ⚠️