div+css实战,布局出自己的博客首页

假如我们要布局出一个网站首页,就拿我的liang1234.com来说,首先就应该对布局需求进行分析,本次的需求是仿自己的首页,所以第一步打开自己的网站首页。

打开首页后, 我们可以看到body背景颜色是灰白色的, 在body体里, 有一个div, div居中, 并且下移几个像素,div的背景颜色是白色的, 在div里 有一个header, 一个main, 一个footer, 在header中, 包括一个logo和menu, 在main中,是自增的内容区域, 和右边框, 所以main里要给两个边框一左一右, footer里定义尾信息, 那么好, 咱们开始。

为了保证代码简洁性, 所以我们要建立几个目录

css //存储css布局样式一些文件

images //存储布局要用到的一些图片

index.html //首页文件

本次只是示例演示,所以就不用外部样式表了, 用嵌入式的。

<html>
<head>
<title>蜂之花田</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body
{
   margin:0px;
   padding:0px;
   font:14px 宋体;
   background:#c0c0c0;
   text-align:center;
}
#all
{
  float:left;
  margin-top:15px;
  width:940px;
  text-align:left;
  position:absolute;
  left:50%;
  margin-left:-470px;
  background:#FFFAFA;
}
#all #header
{
 float:left;
 width:100%;
 height:198px;
}
#header #logo
{
 float:left;
 width:940px;
 height:198px;
 background:url(images/path.jpg) no-repeat;
}
#header #menu
{
 float:left;
 width:100%;
}
ul
{
  margin:0px;
  padding:0px;
  list-style:none;
}
#menu li
{
  float:left;
  width:50px;
  height:28px;
  text-align:center;
}
#all #main
{
 float:left;
 margin-top:15px;
 width:100%;
}
#main #leftbox
{
   float:left;
   width:530px;
   height:400px;
   background:red;
}
#main #rightbox
{
   float:right;
   width:400px;
   height:400px;
   background:red;
}
#all #footer
{
 float:left;
 width:100%;
 height:80px;
 background:yellow;
}
.nav
{
 float:left;
 width:100%;
 height:8px;
 clear:both;
 overflow:hidden;
}
</style>
</head>
<body>
<div id="all">
    <div id="header">
        <div id="logo">
        </div>
        <div class="nav"></div>
        <div id="menu">
        <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我</a></li>
        <li><a href="#">联系</a></li>
        </ul>
        </div>
    </div>
    <div class="nav"></div>
    <div class="nav"></div>
    <div id="main">
      <div id="leftbox">
      </div>
      <div id="rightbox">
      </div>
    </div>
    <div class="nav"></div>
    <div id="footer">
    </div>
</div>
</body>
</html>

计算大小的时候把宽高给错了, 后来改的, 所以有点小瑕疵, 最终的效果图是这样的

wordpress布局效果

没有调兼容性, 不同的浏览器显示效果是不一样的。

此条目发表在div/css分类目录,贴了, , , , 标签。将固定链接加入收藏夹。