m0_65354176 2022-04-14 13:27 采纳率: 25%
浏览 72
已结题

这个网页如何做，已给出了图片，我作为刚学web前端的大学生，求大家解决这个网页

img

img

img

img

img

img


不知道图片如何放在左上方，菜单不知道如何放在右上方，用了表格做菜单，文字总是在中间一行，求解决方案

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-04-14 13:46
    关注

    表格的话拆分成2列，第一列放图片align=left，菜单align=right就行，大概如下，题主自己调整下宽度什么的

    img

    <!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>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 4月22日
  • 已采纳回答 4月14日
  • 创建了问题 4月14日

悬赏问题

  • ¥50 求解vmware的网络模式问题 别拿AI回答
  • ¥24 EFS加密后，在同一台电脑解密出错，证书界面找不到对应指纹的证书，未备份证书，求在原电脑解密的方法，可行即采纳
  • ¥15 springboot 3.0 实现Security 6.x版本集成
  • ¥15 PHP-8.1 镜像无法用dockerfile里的CMD命令启动 只能进入容器启动，如何解决？(操作系统-ubuntu)
  • ¥30 请帮我解决一下下面六个代码
  • ¥15 关于资源监视工具的e-care有知道的嘛
  • ¥35 MIMO天线稀疏阵列排布问题
  • ¥60 用visual studio编写程序，利用间接平差求解水准网
  • ¥15 Llama如何调用shell或者Python
  • ¥20 谁能帮我挨个解读这个php语言编的代码什么意思？