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

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

  • 写回答

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日