web前端开发入门之网站布局

最新推荐文章于 2023-05-02 14:29:50 发布

心境空明

最新推荐文章于 2023-05-02 14:29:50 发布

阅读量299

点赞数 1

分类专栏： web前端开发文章标签： web前端开发布局

本文链接：https://blog.csdn.net/qq_22325387/article/details/50803034

版权

web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

</pre>简单的网页布局<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>首页布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="心境空明 http://blog.csdn.net/qq_22325387" />
<style>
 #container{
  height: 1000px;
  width: 1000px;
  background: grey;
 }
#head{
  height: 240px;
  background: blue;
}
#main{
  height: 480px;
  background: red;
}
#lside{
  height: 480px;
  width: 500px;
  float: left;
  background: purple;
}
#rside{
  height: 480px;
  width: 500px;
  float: right;
  background: green;
}
#foot{
  height: 240px;
  background: yellow;
}
</style>
</head>
    <body>
      <div id="container">
        <div id="head" ></div>
        <div id="main">
                <div id="lside"></div>
                <div id="rside"></div>
      </div>
    <div id="foot"></div>
    </body>
</html>

效果如图：

心境空明

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端开发入门之网站布局

简单的网页布局首页布局 #container{ height: 1000px; width: 1000px; background: grey; }#head{ height: 240px; background: blue;}#main{ height: 480px; background: red;}#lside{ height: 48
复制链接

扫一扫