<div class="css-shanghai">CSS div 上海</div>

在前端開發中，CSS是一種用于設計和格式化網頁的樣式語言。它使用各種屬性和選擇器來控制HTML元素的外觀和布局。其中，div是一個常用的HTML元素，它可以被用來創建各種不同的布局和樣式。在本文中，我們將探討一些關于CSS div在上海的案例，展示它們在網頁設計中的應用。

案例一：簡單的div樣式

<style>
.container {
width: 400px;
height: 200px;
background-color: #f1f1f1;
padding: 20px;
margin: 0 auto;
}
</style>
<br>
<div class="container">
<p>這是一個簡單的div樣式案例。通過設置width、height、background-color、padding和margin等屬性，我們可以創建一個具有固定寬度和高度、背景顏色為#f1f1f1的div容器。而且，通過設置margin: 0 auto屬性，我們可以使得div在頁面中居中顯示。</p>
</div>

案例二：水平居中的文本

<style>
.container {
width: 400px;
height: 200px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<br>
<div class="container">
<p>這是一個水平居中的文本案例。通過設置display: flex屬性，將.container內的元素以彈性盒子的形式布局。然后，通過設置justify-content: center和align-items: center屬性，我們可以將文本在div內水平垂直居中顯示。</p>
</div>

案例三：響應式布局

<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
<br>
    .item {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
<br>
<div class="container">
<div class="item">項目1</div>
<div class="item">項目2</div>
<div class="item">項目3</div>
<div class="item">項目4</div>
<div class="item">項目5</div>
<div class="item">項目6</div>
</div>

這是一個響應式布局案例。通過設置display: grid屬性，將.container內的元素以網格的形式布局。然后，通過設置grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))屬性，我們可以讓容器中的項目自適應寬度，同時保持最小寬度為200px。通過設置grid-gap: 20px屬性，我們可以定義項目之間的間距。這樣，當屏幕尺寸改變時，項目的布局也會相應地自動調整，從而實現響應式效果。

起來，CSS div在網頁設計中有著廣泛的應用。我們可以根據需要通過設置各種屬性和選擇器來控制div的樣式和布局，從而實現不同的設計效果。在上海，許多網頁設計師和前端開發人員都充分發揮了CSS div的力量，創造了各種各樣獨特而美觀的網頁。