# HTML+CSS 練習 我們來看光敏電阻的範例，把 ```<body></body>```裡面改成以下內容： ```htmlembedded= <h1>STEAM 冬令營</h1> <p>教學範例：光敏電阻用來檢測週遭環境的光線</p> <p>目前環境的光照度為：<span id="demo-area-01-show">123</span> <p>小朋友，你可以試試看，用手把開發板遮住，光照度就會跟著改變喔！</p> ``` 得到的畫面如下： ![](https://i.imgur.com/S1pjv8s.png) 是不是有點單調呢？ 我們把HTML內容稍微改一下， ```htmlembedded= <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設定： ```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; } ``` <br> 畫面是不是變得有趣多了呢？ ![](https://i.imgur.com/5YdFCqx.png)