2021-04-28 Web前端编程实验（五）

最新推荐文章于 2023-09-25 12:20:26 发布

Phunsukh_Wangdu

最新推荐文章于 2023-09-25 12:20:26 发布

阅读量465

点赞数

分类专栏： Web前端编程文章标签： html

本文链接：https://blog.csdn.net/APPDREAMER/article/details/116244297

版权

Web前端编程专栏收录该内容

10 篇文章 2 订阅

订阅专栏

Web前端编程实验（五）

前言
本次实验所用编程语言为html，所用编辑文本工具为记事本。

注意事项
（1）前端编程注意html语言的灵活运用。
（2）具体所有实验请参考博客 Web前端编程（一）~（八）。

实验五
1、实验题目。（注：题目如下）

2、代码实现。（注：代码如下）
（实验五.html文件内代码如下）

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>实验五</title>
    <link href="css1.css" rel="stylesheet" type="text/css"/>

</head>

<body>
   
    <div id="container">
    <div id="banner"></div>
    <div id="content"></div>
    <div id="links"></div>
    <div id="footer"></div>
    </div>


</body>
</html>

（css1.css文件内代码如下）

    body{
     margin:10px;
     text-align:center;
    }
    #container{
      width:900px;
     height:700px;
     border:5px solid white;
     background-color:DeepSkyBlue;
    }
    #banner{
     margin-top:80px;
     background-color:SteelBlue;
     border:5px solid white;
     border-left:0px solid white;
     border-right:0px solid white;
     height:10px;
     padding:10px;
     text-align:center;
    }
    #content{
      float:left;
      width:373px;
     height:500px;
     margin-left:70px;
     border:5px solid white;
     border-right:0px solid white;
     border-top:0px solid white;
     border-bottom:0px solid white;
     background-color:PowderBlue;
     text-align:center;
    }
    #links{
     margin-right:70px;
      float:right;
      width:372px;
     height:500px;
     border:5px solid white;
     border-top:0px solid white;
     border-bottom:0px solid white;
     background-color:PowderBlue;
     text-align:center;
    }
    #footer{
       clear:both;
      width:900px;
     height:50px;
     border:5px solid white;
     border-left:0px solid white;
     border-right:0px solid white;
     border-bottom:0px solid white;
     background-color:DeepSkyBlue;
     text-align:center;
    }

3、实验结果如图所示。

Phunsukh_Wangdu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-04-28 Web前端编程实验（五）

Web前端编程实验（五）前言本次实验所用编程语言为html，所用编辑文本工具为记事本。注意事项（1）前端编程注意html语言的灵活运用。（2）具体所有实验请参考博客 Web前端编程（一）~（八）。实验一1、实验题目。（注：题目如下）2、代码实现。（注：代码如下）（实验五.html文件内代码如下）<html><head> <meta http-equiv="Content-Type" content="text/html; charset=g..
复制链接

扫一扫