简述htmlDIV +CSS网页布局原理

html-css012

简述htmlDIV +CSS网页布局原理,第1张

方法/步骤

一个网页设计时，我们可以将一个页面设置为头部，中间，和底部三部分； 头部有分为店招（logo）和导航等

中间既内容部分，内容也可一个整体，也可左右分离，

底部来页面结尾，一般写版权信息，友情链接等

END

头部编辑

店招：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">导航</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

导航：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

a,ul,li,div,span,td{ padding:0margin:0}

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

#nav{ width:100%height:30pxbackground:#300}

a{ text-decoration: nonedisplay:blockden}

ul li{list-style: none}

#nav>ul>li{ float:leftmargin-left: 50pxline-height:30px}

#nav>ul>li>a{ color:#FFFfont-weight:900px}

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">

<ul>

<li><a href="" title="" target="_blank">淘宝</a></li>

<li><a href="" title="" target="_blank">图片</a></li>

<li><a href="" title="" target="_blank">视频</a></li>

<li><a href="" title="" target="_blank">资料下载</a></li>

<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>

</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

END

内容

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

a,ul,li,div,span,td{ padding:0margin:0}

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

#nav{ width:100%height:30pxbackground:#300}

a{ text-decoration: nonedisplay:block}

ul li{list-style: none}

#nav>ul>li{ float:leftmargin-left: 50pxline-height:30px}

#nav>ul>li>a{ color:#FFFfont-weight:900px}

/*******===================头====================************/

#centre{ margin:0 autowidth:1200pxheight:auto}

#centreLeft{ float:leftwidth:70%height:500pxborder:1px #333333 solid}

#centreRight{ float: rightwidth:27%height:400pxborder:1px #333333 solid}

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">

<ul>

<li><a href="" title="" target="_blank">淘宝</a></li>

<li><a href="" title="" target="_blank">图片</a></li>

<li><a href="" title="" target="_blank">视频</a></li>

<li><a href="" title="" target="_blank">资料下载</a></li>

<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>

</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

END

底部

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>淘宝助手网</title>

<style>

a,ul,li,div,span,td{ padding:0margin:0}

#top{ width:1200pxheight: automargin:0 autocolor:#FFF}

#logo{ width:100%height:100pxbackground: #003}

#nav{ width:100%height:30pxbackground:#300}

a{ text-decoration: nonedisplay:block}

ul li{list-style: none}

#nav>ul>li{ float:leftmargin-left: 50pxline-height:30px}

#nav>ul>li>a{ color:#FFFfont-weight:900px}

/*******===================头====================************/

#centre{ margin:0 autowidth:1200pxheight:autooverflow: hidden }

#centreLeft{ float:leftwidth:70%height:500pxborder:1px #333333 solid}

#centreRight{ float: rightwidth:27%height:400pxborder:1px #333333 solid}

/***********==============内容===================*******/

#bottom{ margin:0 autowidth:1200pxheight:200pxborder:1px #333333 solidmargin-top:20px}

/***********==============底部===================*******/

</style>

</head>

<body>

<div id="top">

<div id="logo">店招</div>

<div id="nav">

<ul>

<li><a href="" title="" target="_blank">淘宝</a></li>

<li><a href="" title="" target="_blank">图片</a></li>

<li><a href="" title="" target="_blank">视频</a></li>

<li><a href="" title="" target="_blank">资料下载</a></li>

<li><a href="" title="" target="_blank">视频下载</a></li>

</ul>

</div>

</div>

<!--------头部------------>

<div id="centre">

<div id="centreLeft">内容左</div>

<div id="centreRight">内容右</div>

</div>

<!--------中间------------->

<div id="bottom">底部</div>

<!-----------底部---------------->

</body>

</html>

一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关；

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

扩展资料

css优先权。

多个css样式可集中在单个html标签里，出现这种情况时，一般按优先权划分：

1、浏览器默认设置 （最低）

2、外部样式表

3、内部样式表（写在html的<head>标签内部）

4、内联样式（写在html的标签里，即style属性）（最高）

css的语法。

css由两个主要部分组成，选择器，一条或多条声明。

选择器是指css样式的名字“.seletor”，名字前面要带上一点“.”。声明是由属性和值组成，给个例子“margin: 0 auto”，冒号前面是属性，后面是值，该例子是定义元素居中显示。