m0_65354176 2022-04-14 15:58 采纳率: 25%
浏览 99

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

img

img

img

img

img

img

img

img


我作为初学前端的大学生，暂时还没有学习div的用法和布局，学了表格与列表作为菜单，但不知如何移动图片与文字。

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-04-14 16:35
    关注

    这样?

    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
    }

    .footer {
        background: #092030
    }

    .footer img {
        width: 100%
    }
    .navfoot a{color:forestgreen;display:inline-block;margin-right:100px}
    .navfoot a:last-of-type{margin-right: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>
        <hr style="margin-top:30px" />
        <table>
            <tr>
                <td width="220px">
                    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/681526229946141.jpg" width="100%" />
                </td>
                <td width="280px">
                    <strong>热销奶品</strong><br />
                    巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
                </td>
                <td width="80px">
                    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/688618319946116.jpg" />
                </td>
                <td>
                    <strong>最新奶品</strong><br />
                    巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="footer">
    <div class="wrap">
        <table>
            <tr>
                <td align="center" class="navfoot" width="600px">
                    <a href="#">联系我们</a>
                    <a href="#">网站首页</a>
                    <a href="#">网上订奶</a>
                </td>
                <td align="center">
                    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/154506229946128.jpg" />
                </td>
            </tr>
        </table>
    </div>
</div>

    img

    评论

报告相同问题？

问题事件

  • 创建了问题 4月14日

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！