网页布局实例

最新推荐文章于 2022-05-29 22:26:39 发布

花果山总钻风

最新推荐文章于 2022-05-29 22:26:39 发布

阅读量443

点赞数 1

分类专栏： HTML/CSS/JS

本文链接：https://blog.csdn.net/dszgf5717/article/details/47031391

版权

HTML/CSS/JS 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

摘自《网页开发手记》

1、效果图：

2、html代码：

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <title>网页布局实例</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #top, #nav, #mid, #footer{
            width: 500px;
            margin: 0px auto
        }
        #top{
            height: 80;
            background-color: #dddddd;
        }
        #nav{
            height: 25px;
            background-color: #fc0;
        }
        #mid{
            height: 300px;
        }
        #left{
            width: 98px;
            height: 298px;
            border: 1px solid #999;
            float: left;
            background-color: #dddddd;
        }
        #right{
            height: 300px;
            background-color: #ccc;
        }
        .content{
            width: 98px;
            height: 148px;
            background-color: #c00;
            border: 1px solid #999;
            float: left;
        }
        #content2{
            background-color: #f60;
        }
        #footer{
            height: 80px;
            background-color: #fc0;
        }
    </style>
</head>
<body>
    <div id="top">顶部广告区</div>
    <div id="nav">导航区</div>
    <div id="mid">
        <div id="left">纵向导航区</div>
        <div id="right">
            <div class="content">内容</div>
            <div class="content" id="content2">内容</div>
            <div class="content">内容</div>
            <div class="content" id="content2">内容</div>
            <div class="content" id="content2">内容</div>
            <div class="content">内容</div>
            <div class="content" id="content2">内容</div>
            <div class="content">内容</div>
        </div>
    </div>
    <div id="footer">底部版权区</div>
</body>
</html>