DIV+CSS通用样式布局实例代码_ Div+Css教程-查字典教程网
DIV+CSS通用样式布局实例代码
DIV+CSS通用样式布局实例代码
发布时间:2017-01-07 来源:查字典编辑
摘要:一下是一个非常简单易懂的通用样式布局,希望对于刚开始接触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教程学习
    网页设计子分类