Skip to content

學習檔案

HTML 程式碼

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF -8"></meta>
        <title>測試網站</title>
        <link rel="stylesheet" href="style.css">
        <!--style另一種寫法-->
        <!-- <style>
          p{
            color :blue;
          }
          h1{
            color: red;

          }
        </style> -->
    </head>
    <body>
        <!--FIRST CSS-->
        <div style="color: red; font-size:20px;">
            <h1 style="color:blue;">h1標題</h1>
            <p style="background-color: yellow;">這是一個段落1</p>
            <p style="border: 5px dashed green; max-width:200px;">這是一個段落2</p>
        </div>
        <br/>
        <br/>

        <!--padding & margin-->
        <h1>標題</h1>
        <div style="padding : 40px 50px 60px 70px;margin : 40;background-color: lightblue;border:1px solid black;">
          <!--可寫padding-top/-right/-left/-button-->
          <!--margin可寫負，但padding不可-->
          測試文字
        </div>
        <br/>
        <br/>

        <!--float & display-->
        <img src="photo.jpg" width="200" style="float:left"/>
        <p>12312312312312123123123123123123123123123123123123123123123123</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <p style="display:inline">你好</p>
        <p style="display:inline">哈哈</p>
        <span style="display:block">span1</span>
        <span style="display:block">span2</span>
        <!--position-->
        <div style="position: relative; left:30px;top:30px;width:80px;height: 80px; background-color: blue;"></div>
        <div style="width:120px;height: 120px; background-color:red;"></div>

        <br/>
        <div style="position: relative;padding: 30px ;border:5px solid red;">
          <div style="position: relative;padding: 30px ;border:5px solid red;">
            <div style="position: absolute; top:0px;right:0px;width: 40px; height: 40px; background-color: blue;"></div>
          </div>
        </div>

        <!--opacity & border-radius-->
        <div style="position: relative; left:25px;top:65px;">你好</div>
        <div style="opacity:0.5;border-radius:20px 30px 40px 50px ;width:80px;height: 80px; background-color: blue;"></div>

        <!--class & id-->
        <h1 id="css-h1">標題</h1>
        <p class="food background-grey">食物1</p>
        <p class="food">食物2</p>
        <p class="food">食物3</p>
        <p class="person background-grey">人1</p>
        <p class="person">人2</p>
        <p class="person">人3</p>

        <!--flex-->
        <div class = "container">
            <div class = "box-1">區塊一</div>
            <div class = "box-2">區塊二</div>
            <div class = "box-3">區塊三</div>
        </div>

        <!--animation-->
        <div class="box box-animation"></div>

      </body>
</html>

CSS 程式碼

p{   
    color :blue;
}
h1{
    color: red;
}
.food{
    color:green;
}
.person{
    color:gold;
}
.background-grey{
    background-color: gray;
}
#css-h1{
    color : purple;
}
ul a{
    color : pink;
}
[type] {
    color : gray;
}
h1:hover{
    background-color: gray;
}

.container{
    display : flex;
    flex-wrap: wrap;
    flex-direction: row;
    height:300px;
    border:1px solid red;
    justify-content: center;
    align-items: center;
}

.container div{
    border: 1px solid rgb(202,201,201);
    padding : 10px;
    width:100px;
    height:20px;

}

.box-1{

}

.box-2{

}

.box-3{

}

@keyframes change-color {
    0% {background-color: red;top:10px;left:10px}
    20% {background-color: blue;top:20px;left:20px}
    40% {background-color: red;top:30px;left:30px}
    60% {background-color: blue;top:40px;left:40px}
    80% {background-color: red;top:50px;left:50px}
    100% {background-color: blue;top:60px;left:60px}

}

.box{
    width:200px;
    height:200px;
    background-color: gray;
    position: relative;
}

.box-animation{
    animation: change-color;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

網頁結果