為什麼用margin right或float right只會移動產品介紹,首頁只會放大框,動也動不了
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
/*position: relative;*/
}
header {
background-color: rgb(162, 220, 243);
height: 150px;
position: relative;
}
header img {
border: #369;
width: 100px;
height: 100px;
}
/*header nav a{
background-color: darkblue;
color: #fff;
font-size: 18px;
letter-spacing: 1px;
padding: 10px 20px;
display: block;
float: left;
text-decoration: none;
border-radius: 8px 8px 0 0;
border: 1px solid red;
margin: 0 3px;
margin-top: 20px;
}*/
header .dropdown:hover{
padding-bottom: 30px;
}
body>nav {
background-color: #369;
color: #fff;
height: 60px;
position: sticky;
top: 0;
}
main {
background-color: #e1b8f3;
min-height: 200px;
overflow: hidden;
display: flex;
justify-content: center;
}
main aside {
background-color: #ffd6d6;
float: right;
width: 20%;
padding: 20px;
margin-left: 555px;
}
.content {
background-color: #f8fc9e;
width: 70%;
padding: 20px;
margin: 4%;
}
.content img {
display: block;
margin-bottom: 20px;
}
.content h1 {
font-size: 2em;
margin: 0 0 20px;
margin-top: 20px;
}
.content figure {
letter-spacing: 1px;
line-height: 1.5;
text-align: justify;
margin-top: 3px;
}
.gomore {
background-color: #3498db;
color: white;
padding: 10px;
border: none;
}
footer {
background-color: #d5f3b8;
text-align: center;
padding: 1em;
}
img {
width: 30%;
height: 300px;
margin-top: auto;
margin-bottom: auto;
float: left;
margin: 20px;
}
/* 按鈕樣式 */
.dropbtn {
background-color: #3498db;
color: white;
padding: 10px;
border: none;
}
/* 下拉菜單容器 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉菜單內容(隱藏起來) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* 下拉菜單內容中的選項 */
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 滑鼠懸停時,顯示下拉菜單內容 */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<main>
<div class="content">
<img src="./images/01.jpg" alt="./images/01.jpg">
<h1>BAS建築自動化系統</h1>
<figure>介紹內容 Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit ut fugiat neque. Dolorum voluptatum eum voluptas facere doloribus aliquam, illum officia
aspernatur, ipsam, sit ducimus molestiae sunt dignissimos.
Necessitatibus, nihil.
</figure>
<aside><a href=""><span class="btn">ITsESG</span><span>手冊下載</span></a></aside>
</div>
</main>
<footer>
<p>Copyright © 2023 ITsESG</p>
</footer>
你貼出來的程式碼跟圖片完全沒關聯
如果想要實現下拉式選單,請使用 <select>
https://www.w3schools.com/tags/tag_select.asp
或是可以考慮 dropdown