當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS_DIV学习记录2(用背景颜色实现一个网页的完整布局)

發布時間：2024/1/17 CSS 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS_DIV学习记录2(用背景颜色实现一个网页的完整布局) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近幾天我試著用CSS+DIV完成了幾個靜態頁面的布局，通過總結，我發現對于一個初學者來說，一開始就用CSS+DIV實現完整的實際效果布局有點難度，而且在這個過程中一旦出現錯誤，排錯很難，應該一步一步來。我認為首先，可以單純的使用網頁背景顏色的方式來實現完整布局，然后再局部細化，實現最終效果。

1.最終效果：

2.本實驗所實現的初步效果：

3.default.html:

<!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=UTF-8"?/>?

????<title></title>?

????<link?rel="stylesheet"?type="text/css"?href="default.css"?media="all"?/>?

</head>?

<body>?

<div?id="banner"></div>?

<div?id="main">?

????<div?id="left">?

????????<div?id="left1"></div>?

????????<div?id="left2"></div>?

????????<div?id="left3"></div>?

????????<div?id="left4"></div>?

????</div>?

????<div?id="right">?

????????<div?id="right1">?

????????????<div?id="right1_left"></div>?

????????????<div?id="right1_right"></div>?

????????</div>?

????????<div?id="right2"></div>?

????????<div?id="right3"></div>?

????????<div?id="right4"></div>?

????????<div?id="right5"></div>?

????????<div?id="right6"></div>?

????????<div?id="right7">?

????????????<div?id="right7_left"></div>?

????????????<div?id="right7_right"></div>?

????????</div>?

????</div>?

</div>?

<div?id="banquan"></div>?

</div>?

</body>?

</html>?

4.default.css:

#banner{ ?

width:960px; ?

height:303px; ?

margin:0?auto; ?

background-color:#f00; ?

} ?

#main{ ?

width:960px; ?

height:911px; ?

background-color:#0f0; ?

margin:0?auto; ?

} ?

#banquan{ ?

width:960px; ?

height:89px; ?

background-color:#00f; ?

margin:0?auto; ?

} ?

#left{ ?

width:321px; ?

height:911px; ?

background-color:#0ff; ?

float:left; ?

} ?

#right{ ?

width:639px; ?

height:911px; ?

background-color:#0aa; ?

float:left; ?

} ?

#left1{ ?

width:321px; ?

height:151px; ?

background-color:#03f; ?

} ?

#left2{ ?

width:321px; ?

height:347px; ?

background-color:#06f; ?

} ?

#left3{ ?

width:321px; ?

height:219px; ?

background-color:#09f; ?

} ?

#left4{ ?

width:321px; ?

height:194px; ?

background-color:#0cf; ?

} ?

#right1{ ?

width:639px; ?

height:59px; ?

background-color:#23a; ?

} ?

#right2{ ?

width:639px; ?

height:51px; ?

background-color:#43a; ?

} ?

#right3{ ?

width:639px; ?

height:164px; ?

background-color:#63a; ?

} ?

#right4{ ?

width:639px; ?

height:69px; ?

background-color:#83a; ?

} ?

#right5{ ?

width:639px; ?

height:51px; ?

background-color:#a6a; ?

} ?

#right6{ ?

width:639px; ?

height:176px; ?

background-color:#c3a; ?

} ?

#right7{ ?

width:639px; ?

height:341px; ?

background-color:#e3a; ?

} ?

#right1_left{ ?

width:388px; ?

height:59px; ?

background-color:#26a; ?

} ?

#right1_right{ ?

width:388px; ?

height:251px; ?

background-color:#29a; ?

} ?

#right7_left{ ?

width:388px; ?

height:341px; ?

background-color:#e6a; ?

float:left; ?

} ?

#right7_right{ ?

width:251px; ?

height:341px; ?

background-color:#e9a; ?

float:left; ?

} ?

轉載于:https://blog.51cto.com/zbliangc/768016

總結

以上是生活随笔為你收集整理的CSS_DIV学习记录2(用背景颜色实现一个网页的完整布局)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JAVA中利用DOM解析XML文档
下一篇：在冬夜中燃起的火把