div+css網頁粗略佈局

時間 2019-11-12

標籤 div+css div css 網頁粗略佈局欄目 HTML 简体版

原文原文鏈接

咱們打開瀏覽器看到各大網站的導航首頁如圖，是怎麼作出來的呢？css

好比就拿素描來講吧，看到一個參照物首先不是一開始就畫，而是先肯定幾何構物線，肯定物體大體範圍比例框架。網頁也是的，這就是div+css佈局。html

這時打開ide或是notepad++之類的編輯工具，開始編寫代碼瀏覽器

以及截圖測量工具faststone capture，用於取色，測量等框架

咱們先別急着編碼，咱們畫個大體的框架，更好方便咱們佈局ide

有了設計圖以後，便開始按比例尺寸編寫div+css佈局工具

打開測量工具，取出標尺，以及編輯工具佈局

編寫html代碼，作個相似草稿的效果，再建立一個.css，過會編寫網站

<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css"/>             <!--外聯css的固有格式，href指向調用的.css文件-->
<meta http-equiv="content-type"type="text/html charset=utf-8"/>      <!--字符編碼設置成utf-8-->
<title>home</title>                                                  <!--標題設置-->
</head>
<body>
<div id="spe">火狐主頁</div>                                          <!--div+css盒子模型,id選擇器複用性低，但優先級高，class選擇器，反之亦然-->
<div id="sea">搜索欄</div>
<div id="ads">廣告</div>
<div class="diva">
<div class="div1">網頁導航</div>
<div class="div2">洋蔥新聞</div>
<div class="div1">官方新聞</div>
<div class="div2">讀書推薦</div>
</div>
<div id="spt">關於咱們</div>
</body>
</html>

如今開始編寫.css文件ui

*{
margin:0px;                       /*外邊距初始值置0*/
padding:0px;                     /*內邊距初始值置0*/
}

測量工做開始了，主頁條的寬度和高度編碼

#spe{                               /*id選擇器以#打頭*/
width:1366px;
height:39px;
border:1px solid black;            /*邊框爲1px，黑色*/
background:#00A2E8;                /*顏色的hex值，16進制*/
}

測量搜索欄

#sea{
width:1366px;
height:109px;
border:1px solid black;
background:#99D9EA;
}

測量廣告位

#ads{
width:1016px;
height:63px;
border:1px solid black;
background:#ED1C24;
}

咱們發現廣告盒子偏離了，原先的預想，這時就用到盒子的外邊距margin-left

測量出左邊距到目標位像素距離

#ads{
width:1016px;
height:63px;
border:1px solid black;
background:#ED1C24;
margin-left:169px;
}

設定一個大的DC盒子,用於放置其餘盒子

.diva{                               /*class選擇器以.開頭*/
width:1016px;
height:583px;
border:1px solid black;
margin-left:169px;               /*外邊距右移*/
}

設計四個小盒子

.div1{
width:700px;
height:250px;
border:1px solid black;
background:#FFC90E;
margin-top:10px;
float:left;             /*左浮動，因爲div是塊元素會佔行因此使用左浮動*/
}
.div2{
width:250px;
height:250px;
border:1px solid black;
background:silver;
margin-left:740px;
margin-top:10px;        /*外邊距下移*/
}

再寫最後一個DC盒子

#spt{
width:1366px;
height:120px;
border:1px solid black;
background:#00A2E8;
}

總體效果就出來了

css的總體代碼

*{
    margin:0px;
    padding:0px;
    }
#spe{
    height:36px;
    width:1366px;
    border:1px solid black;
    background:#00A2E8;
}
#sea{
width:1366px;
height:109px;
border:1px solid black;
background:#99D9EA;
}
#ads{
width:1016px;
height:63px;
border:1px solid black;
background:#ED1C24;
margin-left:169px;
}
.diva{
width:1016px;
height:583px;
border:1px solid black;
margin-left:169px;
}
.div1{
width:700px;
height:250px;
border:1px solid black;
background:#FFC90E;
margin-top:10px;
float:left;
}
.div2{
width:250px;
height:250px;
border:1px solid black;
background:silver;
margin-left:740px;
margin-top:10px;
}
#spt{
width:1366px;
height:120px;
border:1px solid black;
background:#00A2E8;
}

關於盒子的概念，我作了一個ppt如圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。