HTML+CSS 練習

我們來看光敏電阻的範例，把 <body></body>裡面改成以下內容：





    <h1>STEAM 冬令營</h1>
    <p>教學範例：光敏電阻用來檢測週遭環境的光線</p>
    <p>目前環境的光照度為：<span id="demo-area-01-show">123</span>
  
    <p>小朋友，你可以試試看，用手把開發板遮住，光照度就會跟著改變喔！</p>

得到的畫面如下：

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

是不是有點單調呢？

我們把HTML內容稍微改一下，







  <h1>STEAM 冬令營</h1>
  <br>
  <p><span class="title">教學範例</span>：光敏電阻用來檢測週遭環境的光線</p>
  <br>
  <p>目前環境的光照度為：<span id="demo-area-01-show">123</span>
  <br><br>
  <p>小朋友，你可以試試看，<span>用手把開發板遮住</span>，光照度就會跟著改變喔！</p>

然後加上幾個簡單的CSS設定：

h1 {
  background: blue;
  color: white;
  text-align: center;
  padding: 5px;
  margin: 10px;
}

p {
  text-align: center;
}

span {
  border: 2px;
  padding: 6px;
  border-style:solid;
  border-color:#888888;
  padding: 2px;  
}

.title {
  background: #FF8811;
  color: #0000FF;
  font-size: 120%;
  padding: 4px;
}

#demo-area-01-show {
  font-size: 32px;
  background: yellow;
  color: blue;
  padding: 6px;
  pointer-events: auto!important;
}

畫面是不是變得有趣多了呢？

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →