DIV+CSS—菜鳥分享學習心得!入門篇

來源:互聯網
上載者:User

是菜鳥,可能寫的不好,不夠明朗,還忘大蝦提點,也希望可以和新手一起學習

首先申明,我覺得div+css樣式布局 入門是非常簡單的,只是簡單的屬性,與屬性值而已。但是要想用好他,我覺得那是一門藝術,速成不了。

DIV+CSS遵循的是網頁標準設計,也就是web標準,而web標準最注重的就是:“結構的語義化”(分別定義,區塊分明,強化重用,代碼易讀)。

 

DIV排版的核心:即CSS盒子模式

 

CSS 每個div盒子模式包括:內容(content)、填充(padding)、邊框(border)、邊界(margin)

 

 

 

 

用DIV+CSS設計思路是這樣的:

 1.用div來定義語義結構;給頁面分塊。

2.然後用CSS來美化網頁,如加入背景、線條邊框、對齊屬性等;

3.最後在這個CSS定義的盒子內加上內容,如文字、圖片等

代碼示範:(簡單分塊)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

</head>

<style type="text/css">

body{

       background-color:#FFCCFF;

       margin:1px 0px 0px 0px;

       padding:0px;

       font-size:12px;

       font-family:Arial, Helvetica, sans-serif;

}

#container{

       position:relative;

       margin:0px auto 0px auto;

       width:400px;

       text-align:center;

       height:900px;

}

#header{

       width:auto;

       margin:0 auto;

       height:100px;

       background:#FFCC99;

       border:1px solid #0000FF;

}

 

#main{

       width:auto;

       margin:0 auto;

       height:200px;

       background:#FFFFCC;

       border:1px solid #FF0000;

}

#Footer{

       width:auto;

       margin:0 auto;

       height:100px;

       background:#00FFFF;

       border:1px solid #9999FF;

}

 

</style>

<body>

<div id="container">

 

<div id="header">頭部分 包括導航等box</div>

 

<div id="main">內容部分 包括頁面上的一切內容/box(文字,圖片,資訊,諮詢......)</div>

 

 <div id="Footer">著作權部分 網站作者 著作權 許可證以及超級串連)</div>

 

 

</div>

</body>

</html>

顯示效果:

 

 

 

然後就可以具體按塊(或者說是box)給每個塊 進行一個css的屬性設定。比如background-color背景顏色設定 background-image背景圖案,font-size:字型大小,color:字型顏色等 都可以達到很不一般的效果哦。

 

 

在製作網頁的時候:CSS中的盒子寬度計算,最好的瀏覽效果是960-970px(參考sina、阿里吧吧、雅虎等大網站都是這個寬度,不過只要設定寬度在1004px之內,顯示都是正常的)

其次,就是在寫CSS的時候,要注意IE瀏覽器和FF瀏覽器的相容問題,要考慮到使用者在瀏覽我們網站時候,他瀏覽器的顯示效果。

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.