Web开发之html，针对网页开发

要求如下，感谢各位解疑答惑，问题如下，初学者有点难理哭哭

结果如下

属于是正常的一个小作业，总体分为四部分，第一部分可以使用

背景图片 CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: 实例 body {bac..

https://www.runoob.com/css/css-background.html

也可使用

图片标签 HTML 图像实例 Norwegian Mountain Trip 尝试一下 » 在线实例插入图像本例演示如何在网页中显示图像。从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。（可以在本页底端找到更多实例。） HTML 图像- 图像标签（ <img>）和源属性（Src）在 HTML 中，图像由<img> 标签定义。 &a..

https://www.runoob.com/html/html-images.html

，第二部分是

文字样式 CSS 文本格式文本格式 This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters ..

https://www.runoob.com/css/css-text.html

，第三部分是

表格 CSS 表格使用 CSS 可以使 HTML 表格更美观。 Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel..

https://www.runoob.com/css/css-table.html

，第四部分是

图片 HTML 图像实例 Norwegian Mountain Trip 尝试一下 » 在线实例插入图像本例演示如何在网页中显示图像。从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。（可以在本页底端找到更多实例。） HTML 图像- 图像标签（ <img>）和源属性（Src）在 HTML 中，图像由<img> 标签定义。 &a..

https://www.runoob.com/html/html-images.html

加

有序列表 HTML 列表 HTML 支持有序、无序和定义列表: HTML 列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。（可以在本页底端找到更多实例。） HTML无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 &am..

https://www.runoob.com/html/html-lists.html

整体布局的话，可以使用

浮动布局 [myjavascript] function removeElement(numId) { document.getElementById(numId).style.display='none'; } [/myjavascript] [mystyle] .imgbox { float:left; text-align:center; width:120px; height:120px; border:1px so..

https://www.runoob.com/css/css-float.html

也可以使用

弹性布局 CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webk..

https://www.runoob.com/css3/css3-flexbox.html

很基础哦建议自己写。就是标签的应用，table表格和图文，加列表。这个都写不出来，说明还没入门。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .head {
                height: 100px;
                width: 100%;
                background: rebeccapurple;
            }
            
            .body {
                display: flex;
                height: 600px;
                width: 100%;
            }
            
            .body .box_l {
                width: 40%;
                height: 100%;
                background: saddlebrown;
            }
            
            .body .box_c {
                width: 20%;
                height: 100%;
                background: deepskyblue;
            }
            
            .body .box_r {
                width: 40%;
                height: 100%;
                background: khaki;
            }

        </style>
    </head>
    <body>
        <div class="main">
            <div class="head">头部</div>
            <div class="body">
                <div class='box_l'>左侧</div>
                <div class='box_c'>中间</div>
                <div class='box_r'>右侧</div>
            </div>
        </div>
    </body>
</html>

初学者的话，你可以在body里面直接写两个div 第二个div里面再3个div，会用弹性盒子的话就用，不会就浮动，剩下就是一些基础的css了，宽高，字体大小颜色，表格样式，有序列表ol。

这个应该是一个作业,我不确定你们老师是不是还在用传统的DW6软件进行教学,

如果是现在的HTML标签加上Css样式的话,这个页面时比较基础的

第一部分用一张图片就行

后面三个部分是并排的,所以需要用三个盒子,并且让这三个盒子并排起来,按照你们基础的教学,应该是教你们使用浮动,float:left,属性
使用浮动将下面三个部分并排以后,就可以分别对每个部分写内容,
三个部分第一个使用标题标签h1和文本便签p便签完成
第二个使用table表格

第三个使用图片便签和ul li 标签


既然是作业就不能给你贴代码了,不然意义不大 ,给你个思路,自己可以思考下:
思路:设置四个div 分别为 header   left center right
其中 header 的背景为图片设置他的高度为多少个px或者 百分比
 后三个 是三个div 分别为 left center right  思路就是  左和右的div 宽度设置 40% 中间为 20% 全部向左浮\
剩下的就是对最后三个div内容的填充了 在对应的div闭合标签中填写相关的内容
left 其实考察你 <hx> (x为 1 2 3等)标题标签  < br > 换行 以及空格等标签的使用
center div 考察的 <table>标签 的行和列的使用
最后一个是考察图片引入以及<ol> <li> </li></ol>  带序列号标签的使用。
剩下就是样式 在<style>闭合便签中 通过 id 类等选择器修改颜色和样式

分几个模块，加上图片，


<html lang="en">
    <head>
        <meta charset="UTF-16">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .head {
                height: 100px;
                width: 100%;
                background: rebeccapurple;
            }
            
            .body {
                display: flex;
                height: 600px;
                width: 100%;
            }
            
            .body .box_l {
                width: 40%;
                height: 100%;
                background: saddlebrown;
            }
            
            .body .box_c {
                width: 20%;
                height: 100%;
                background: deepskyblue;
            }
            
            .body .box_r {
                width: 40%;
                height: 100%;
                background: khaki;
            }
 
        </style>
    </head>
    <body>
        <div class="main">
            <div class="head">头部</div>
            <div class="body">
                <div class='box_l'>左侧</div>
                <div class='box_c'>中间</div>
                <div class='box_r'>右侧</div>
            </div>
        </div>
    </body>
</html>

很基础哦建议自己写


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex布局</title> 
<script src="./jquery.min.js"></script>
<style>
    *{margin:0;padding:0;}
    body{background-color:#e0e0e0;}
    html,
    body,
    .big-box{height:100%;width:100%;}
    .big-box{display:flex;flex-direction:column;}
    .header{background-color:#fff;height:90px;}
    .content{flex:1;margin-top:5px;display:flex;}
    .content>div{height:100%;background-color:#fff;}
    .left{flex:4;}
    .center{flex:2;margin-left:5px;}
    .right{flex:5;margin-left:5px;}
</style>
<body>
<div class="big-box">
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</div>
</body>
<script>

</script>
</head>
</html>

这个学了不会写你还有必要学下去吗

完成了吗，我的主页里面有类似的作业代码

不懂就问百度

我的建议可以采用layui框架的栅格布局，这样就很轻易的能将网页分为4块用

分

这个是一个静态网页，首先，可以给你思路，但不可以帮你写。网页要看框架，分成几部分，然后每一部分里面的内容是什么，一点一点的添加，静态网页是不难写的。

现在完全可以用flex 来实现了很简单

<div>
  <div class='head'>
  头部内容
</div>
 <div class='content'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<style>
 .head{
  height:100px;
background:orange;
color:#fff;
}
.content{
     display:flex;
justify-content: space-between;
}
.content > div{
  flex:1;
   height:200px;
background:blue;
color:#fff;
font-size:40px;
}
.content > div:nth-child(odd){
background:red;
}
</style>

这个很基础的,作业不难,自己可以慢慢调试,慢慢去,这样才能加深自己的理解

顶部图片是一部分，一个div里面套一个image标签，样式设置为：宽度100%，高度自己定，图片显示不全，图片可以给个背景定位；
诗词是一部分，一个div，标题和句子用p标签裹着，设置不同字体颜色和不同左margin，就行；
图表一部分，一个div，用table标签，里面使用th等标签，写内容；
剩下的一部分，一个div，其中又可以分为两块，四张图片一块，一个div，下面列表一块。
想让诗词，图表，图片在一行，给这三部分的div都加上float:left.

可以多看看视频哦，哔哩哔哩里面很多的，基础的讲的很好的的