# 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)