<div class="main">
<div class="title">標題</div>
<div class="content">內容</div>
</div>
<style type="text/css">
.main {
width: 960px;
margin: 0 auto;
}
.title {
width: 100%;
height: 60px;
background-color: #ccc;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.content {
width: 740px;
margin: 20px auto;
background-color: #fff;
font-size: 16px;
line-height: 24px;
}
</style>在此例子中,我們使用了div標簽進行了布局。main類為外層容器,包裹著title類和content類。
title類和content類分別對應PSD或Sketch文件中設計師提供的標題和內容元素。通過給類添加樣式,我們可以將標簽精準切圖,使其與設計圖一致。
通過以上方法,我們可以在前端開發中實現div css精準切圖,提高網站或應用的質量和用戶體驗。
上一篇div css的基礎
下一篇css里面透明漸變