DIV CSS布局流程小結

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>

動手小練習

使用 <div> 標簽定義一段文本內容
在第一題的基礎上對內容進行樣式的設置，然后在瀏覽器中顯示出來

在線咨詢

上一篇：View Source：在 iOS 上輕松查看網頁源
下一篇：HTML 簡單的<textarea&a

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

DIV CSS布局流程小結

、前言

二、需求

三、解決

四、小結

您的項目需求

、前言

三、解決