CSS是一種可以美化網頁的語言，它可以控制HTML標記中要素的展示格式和位置。其中，
div是常見的用于劃分頁面區域的標記，下面我將介紹一些常見的
書簽效果。
第一種效果是實現兩欄布局，其中左側的
寬度為20%，右側的
寬度為80%。代碼如下：
<div class="wrapper">
<div class="left">左側</div>
<div class="right">右側</div>
</div>
.wrapper {
display: flex;
}
.left {
width: 20%;
height: 500px;
background-color: #ccc;
}
.right {
width: 80%;
height: 500px;
background-color: #eee;
}第二種效果是實現固定底部的
，可以在內容區域較少時，保證底部
固定在底部。代碼如下：
<div class="wrapper">
<div class="content">內容區域</div>
<div class="footer">底部區域</div>
</div>
.wrapper {
position: relative;
min-height: 100%;
margin-bottom: -50px;
}
.content {
padding-bottom: 50px; /* 設置底部區域高度 */
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* 底部區域高度 */
background-color: #ccc;
}第三種效果是實現圖片和文字并排的布局，圖片位于文字左側。代碼如下：
<div class="wrapper">
<div class="info">
<img src="image.jpg" alt="圖片">
<p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
</div>
</div>
.info {
display: flex;
}
img {
width: 200px;
height: 150px;
}
p {
margin-left: 20px;
}以上是三種常見的
書簽效果，希望對你的學習有所幫助。
上一篇css li并列樣式
下一篇css3自學視頻