Elder Gods 2022-05-21 09:39 采纳率: 100%
浏览 56
已结题

如何设计出这个网页，要求带代码

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/967459690356133.jpg "#left"
希望快点打完

  • 写回答

2条回答 默认 最新

  • 你好！机器人 2022-05-21 10:21
    关注

    img

    
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>demo </title>
        <style>
            *{padding:0; margin: 0;}
            body{background: #ccc;} /*把颜色改成背景图也可以，用url*/
            .container{
                width: 1080px;
                margin:0 auto;

            }
            .header{
                background: #fff;
            }
            .header_img{
                width:100%;
                height:100px;
            }
            ul{
                display: flex;
                background: #f00;
            }
            ul li{
                width: 216px;
                height: 40px;
                text-align: center;
                line-height: 40px;;
                list-style: none;
            }
            .main{
                width: 100%;
                margin: 30px 0;
                overflow: hidden;
            }
            .mainone{
                width: 200px;
                height:400px;
                background: #fff;
                float: left;
            }
            .maintwo{
                width: 850px;
                height:400px;
                float: right;
                background: #fff;
            }
            .footer{
                width: 100%;
                height: 50px;;background: #fff;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="header">
                <div class="header_img">
                    <img src="图片链接"/>
                </div>
                <ul class="header_menu">
                    <li>首页</li>
                    <li>菜单</li>
                    <li>在线预定</li>
                    <li>节日活动</li>
                    <li>联系我们</li>
                </ul>
            </div>
            <div class="main">
                <div class="mainone">
                    
                </div>
                <div class="maintwo">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="footer">
                
            </div>
        </div>
    </body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月29日
  • 已采纳回答 5月21日
  • 创建了问题 5月21日