2020年10月29日 星期四

[Web]CSS html編輯器

 

Brackets - 免費的編輯網頁必備神器

https://medium.com/misa-design-%E5%A0%AF%E8%88%9C%E8%A8%AD%E8%A8%88/brackets-%E5%85%8D%E8%B2%BB%E7%9A%84%E7%B7%A8%E8%BC%AF%E7%B6%B2%E9%A0%81%E5%BF%85%E5%82%99%E7%A5%9E%E5%99%A8-8b4494a5cd05

Thimble by Mozilla 線上程式碼編輯器,讓你輕鬆學習編寫 HTML、CSS 和 JavaScript

https://free.com.tw/thimble-by-mozilla/

[Web]Part-1-Ch2

 

2020年10月27日 星期二

[Web]Part-1-Ch1-2

1.新增如下結構
2.在css資料夾裡新增下面兩個檔案
3.編輯index.html

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>
</body>

</html>

效果


4.編輯index.html
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="header">
</header>
<div class="wrapper">
<main class="main">
</main>
<div class="sidemenu">
</div>
</div>
<footer class="footer">
</footer>
</body>

</html>

5. index.html
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="header">
</header>
<div class="wrapper clearfix">
<main class="main">
</main>
<div class="sidemenu">
</div>
</div>
<footer class="footer">
</footer>
</body>

</html>

6. style.css

.header{
width: 100%;
}
.wrapper{
width: 970px;
margin: 30px auto 40px;
}

.main{
display: block;
float: left;
width: 660px;
}

.sidemenu{
float: right;
width: 275px;
}

.footer{
width: 100%;
}

.header, .main, .sidemenu, .footer{
border: 1px solid #aaa;
background-color:#ccc;
}
.header, .footer{
height: 100px;
}
.main, .sidemenu{
height: 500px;
}



.clearfix::after{
content: '';
display: block;
clear: both;
background-color:lightgreen;
}

=============
注意:
.clearfix::after{
content: '';   <---''是兩個單引號而非一個"雙引號
display: block;
clear: both;
background-color:lightgreen;
}
=============







[Sensor]MPU92/65

MPU92/65是很久以前買的感測器 基本上有加速度計、陀螺儀、電子羅盤、溫度計 以下是該電子商城的介紹 https://www.factoryforward.com/product/gy-87-mpu-9265-3-axis-9-dof-attitude-gyro-magnet...