手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >DIV+CSS通用样式布局实例代码
DIV+CSS通用样式布局实例代码
摘要:一下是一个非常简单易懂的通用样式布局,希望对于刚开始接触DIV+CSS的同学有帮助。先看效果图:我们可以看出通常的页面布局有以下几个部分:头...

一下是一个非常简单易懂的通用样式布局,希望对于刚开始接触DIV+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=gbk" />

<title>DIV+CSS practice</title>

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

</head>

<body>

<>

<div id="head">

</div>

<>

<>

<div id="container">

<>

<div id="content">

</div>

<>

<>

<div id="side">

</div>

<>

</div>

<>

<div></div>

<>

<div id="foot">

</div>

<>

</body>

</html>

common.css样式文件:

*{

margin:0;

padding:0;

}

body{

background-color:gray;

}

.clear{

clear:both;

}

/*head*/

#head{

background-color:blue;

height:150px;

}

/*container*/

#container{

background-color:red;

width:960px;

height:800px;

margin:20px auto;

}

/*content*/

#content{

background-color:yellow;

float:left;

width:685px;

height:100%;

}

/*side*/

#side{

background-color:green;

float:right;

width:255px;

height:100%;

}

/*foot*/

#foot{

background-color:white;

height:150px;

width:960px;

margin:20px auto;

}

大致布局很简单了,首先要有这个大局观,然后再完善其中的细节,学习PHP或者其他语言同样如此,首先要有一个思想,知道每一步做什么,怎么做,这样才能把知识灵活运用。

【DIV+CSS通用样式布局实例代码】相关文章:

Div+CSS布局入门

DIV+CSS 全屏垂直居中的一个办法

CSS绿色导航菜单制作实例

采用DIV+CSS布局的好处

css美化Div边框的样式实例

Div+CSS布局入门教程

DIV+CSS常用网页制作布局技术技巧

CSS各种文字对齐方式代码

Div+CSS网页制作布局入门

用css实现十字的布局示例代码

精品推荐
分类导航