表格的话拆分成2列,第一列放图片align=left,菜单align=right就行,大概如下,题主自己调整下宽度什么的
<!doctype html>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer">
<style>
body,table{padding:0;margin:0;width:100%}
.head {
background: #58afd0 url(https://img-mid.csdnimg.cn/release/static/image/mid/ask/202628319946144.jpg) no-repeat center;
height: 279px
}
.wrap{width:941px;margin:0 auto}
.menu a{color:#fff;border-right:solid 1px #fff;display:inline-block;padding:0 10px;line-height:18px;margin-top:10px}
.menu a:last-of-type{border-right:none}
.body{background:#0067a0;color:#fff;padding:20px 0}
</style>
<div class="head">
<div class="wrap">
<table>
<tr>
<td><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/783708319946173.jpg" /></td>
<td align="right" class="menu" valign="top">
<a href="#">网站首页</a>
<a href="#">网上预定</a>
<a href="#">联系我们</a>
</td>
</tr>
</table>
</div>
</div>
<div class="body">
<div class="wrap">
<table>
<tr>
<td width="635px">
<strong>奶源介绍</strong>
</td>
<td valign="top"><strong>奶品推荐</strong></td>
</tr>
<tr>
<td>
<br />
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/537118319946179.jpg" width="100%" /><br />
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
</td>
<td>
<ul>
<li>巴拉巴拉巴拉巴拉巴拉巴拉</li>
<li>巴拉巴拉巴拉巴拉巴拉巴拉</li>
<li>巴拉巴拉巴拉巴拉巴拉巴拉</li>
</ul>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td width="175px">
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/688618319946116.jpg" width="100%" />
</td>
<td width="300px">
<strong>热销奶品</strong><br />
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
</td>
<td width="175px">
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/688618319946116.jpg" />
</td>
<td>
<strong>最新奶品</strong><br />
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
</td>
</tr>
</table>
</div>
</div>
刚学习的,可以看一下基础教学的视频,网上很多,简单的页面布局都会有教,
页面里需要用到的知识点,大概是 position定位 ,flex布局或者 float布局,实在是想简单, 也可table