整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
hinkcss給大家分享下 DIV CSS布局流程
CSS代碼布局
第一步驟：分析網頁美工圖
第二步驟：建立項目文件夾（包括用于放圖片、CSS文件、JS文件等文件夾）
為了節約時間推薦使用thinkcss初始化模板，直接解壓即可使用。
第三步驟：PS軟件切出圖片素材（可以先切出一部分圖片素材，待布局中再根據需求再切出需要圖片素材）
第四步驟：將先切出圖片放入images文件夾中，包括布局中切出圖片依然放入此文件夾中
以下操作中ThinkCSS初始化模板基礎上進行。
第五步驟：修改初始化模板HTML文件與CSS文件，將對應文件代碼修改調整為當前項目實用的，比如背景、文字大小、文字顏色、超鏈接文字顏色等CSS樣式。
第六步驟：根據分析 從頭到尾開始 著手布局，一般布局時推薦布局時注意測試HTML兼容性，再繼續布局，直到布局完成HTML。
CSS中最常見的塊元素，便是 div，每一個都將獨立為一行。而最常見的內聯元素，便是 span了，每一個都默認從左到右排列連接起來。
有時候我們需要 div 的結構，但是是需要 span 的效果，如何將這個特點一起利用起來呢？
想把上圖的京東·技術與數據中臺，和logo為一行，初始代碼如下，初始效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
<div class="position-name">京東</div>
<div class="position-desc">技術與數據中臺</div>
</div>
</body>
</html>加上 display: inline-block，使之為內聯元素，而非塊元素即可，修改后的代碼如下，修改后的效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position {
/* 融合為塊元素 */
display: inline-block;
margin-left: 8px;
}
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
<div class="position-name">京東</div>
<div class="position-desc">技術與數據中臺</div>
</div>
</body>
</html>利用好 CSS 提供的 display: inline-block 屬性即可。
義：HTML文檔中的分隔或者是部分，常用于組合塊級元素，以便通過樣式表來對元素進行格式化。
<div> 是一個塊級元素，也就是說它的內容自動的開始一個新行，換行是它固有的特定格式表現，同時它也是一個雙向標簽。
它應用于樣式表，有多種屬性：Class、Style、title、ID等。
小實例：
在div中給定id或者是類選擇器：
<h1>俠課島</h1>
<div class="content1">第一段文本內容....</div>
<div class="content2">第二段文本內容....</div>
<div class="content3">第三段文本內容....</div>
<div id="main">第四段文本內容.....</div>直接在div中添加設置樣式屬性：
<div style="color:#777;">
<h2>定義文本內容顏色</h2>
</div>動手小練習
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
