7.html&css实验7.学习一个通用的布局设计

最新推荐文章于 2023-06-08 00:15:00 发布

清楼小刘

最新推荐文章于 2023-06-08 00:15:00 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.csdn.net/qq_33826977/article/details/69471492

版权

这次的实验主要是一个流程来熟悉网页的设计步骤：

1.基本框架

1) 整个框架分为：header、nav、subnav、mainbody、footer五个部分(div)。

2) 除了main，每个区都定义了高度和宽度，并且宽度均为“998px”，并用样式"margin:0 auto"对中。整个网页定义了背景色"#005825"。

3) 为了以后可以定位内部的logo等元素，header采用“position:relative”，其它4个区均属于正常流。

4) main的背景色为白色"#FFFFFF"，没有定义宽度，让它扩展到整个网页宽，并且包含三个部分：mainbody，quicklinks，sublinks。它的高度是由这三部分的高度决定的。这三个部分的宽度均为“998px”，用样式"margin:0 auto"对中。如图所示：

首先的代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <title>中山大学 SUN YAT-SEN UNIVERSITY </title>
    <script src="js/menu.js"></script>
    <style>
        body {
            font-family: Arial,sans-serif;
            color: #000000;
            font-size: 12px;
            margin: 0px;
            padding: 0px;
            background: #005825;          
        }

        p {
            margin: 0px;
            padding: 0px;
        }

        /* test */
        div {
            border:1px solid blue;
        }

        /* frame */
        #header {
            width: 998px;
            height: 108px;

            margin: 0px auto;
            position: relative;
            padding: 0px;
        }

        #nav {
            width: 998px;
            height: 45px;

            font-size: 14px;
            color: #FFF;

            margin: 0 auto;
            padding: 0px;

            font-weight: bold;
            line-height: 45px;
            text-align: center;
        }

        #subnav {
            width: 998px;
            height: 41px;

            font-size: 13px;
            margin: 0 auto;
            text-align: left;
            color: #006600;
            line-height: 40px;
        }

        #main {
            background-color: #FFFFFF;

            overflow: hidden;
            padding: 0px 0px 5px 0px;
        }

        #mainbody {
            width: 998px;
            height:994px;

            margin: 0px auto;
            padding: 2px;
        }

        #quicklinks {
            width: 998px;
            height: 20px;

            font-size: 14px;
            color: #000000;
            background: #D1D1D1;

            padding: 12px 0px 7px 0px;
            margin: 0px

最低0.47元/天解锁文章

清楼小刘

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
7.html&css实验7.学习一个通用的布局设计

这次的实验主要是一个流程来熟悉网页的设计步骤：1.基本框架1) 整个框架分为：header、nav、subnav、mainbody、footer五个部分(div)。2) 除了main，每个区都定义了高度和宽度，并且宽度均为“998px”，并用样式"margin:0 auto"对中。整个网页定义了背景色"#005825"。3) 为了以后可以定位内部的logo等元素，header采用“
复制链接

扫一扫