首页 > 试题广场 >

请用 HTML5CSS3 实现一个双...

[问答题]

请用 HTML5/CSS3 实现一个双栏布局，顶部有导航栏，底部有网站简介。
要求如下：
- PC 上，侧边栏在左侧，宽度固定，主内容在右侧，宽度自适应，内容区域高度不定
- 手机上，所有区域竖排，依次是内容、导航、侧边栏、底部（假定宽度低于 480px 的设
备是手机）

查看答案及解析

磷加锌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双栏布局</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            border: 0;
            margin: 0;
        }
        nav, footer {
            width: 100%;
            height: 100px;
            background-color: #7ecef3;
        }
        main {
            min-height: calc(100% - 200px);
            display: flex;
        }
        main #left {
            width: 200px;
            background-color: #89c997;
        }
        main #content {
            flex: 1;
            background-color: #53b9be;
        }
        @media (max-width: 480px) { /*宽度小于480的设备*/
            main {
                flex-direction: column;
            }
            main #left {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<nav>导航栏</nav>
<main>
    <div id="left">侧边栏</div>
    <div id="content">主要内容</div>
</main>
<footer>简介简介</footer>
</body>
</html>

发表于 2020-01-03 18:06:55 回复(0)

小肥宅冲冲冲！！

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" >
   <title>Document</title>

   <style>
     /* html,body{
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
     } */
     nav,footer{
      width: 100%;
      height: 100px;
      background-color: beige;
     }

     aside{
      float: left;
      width: 200px;
      height: 400px;
      min-height: calc(100% - 200px);
      background-color: blueviolet;
     }

     main{
      /* width: calc(100% - 200px); */
      height: 400px;
      min-height: calc(100% - 200px);
      background-color: brown;
      overflow: hidden;
     }

     @media (max-width:780px) {
      body{
        display: flex;
        flex-direction: column;
      }
      main{
        order: 1;
        min-height: auto;
      }
      nav{
        order: 2;
      }
      aside{
        order: 3;
        width: auto;
      }
      footer{
        order: 4;
      }
     }
   </style>
 </head>
 <body>
    <nav>导航栏</nav>
    <aside>侧边栏</aside>
    <main>主要内容</main>
    <footer>底部</footer>

 </body>
 </html>

发表于 2022-03-01 20:12:51 回复(0)

再别孙悟空

<!DOCTYPE html> 

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=idge">
        <title></title>
        <script type="text/javascript">

            var str=new String("hello1");
            var str1=String("hello2");
            var str2="";

            //alert(str.charCodeAt(1));
            var result=str.concat(str1);
           // alert(result);
           var s=str.indexOf("hec",0);
           //alert(s);

           var stri="how are are you";
           //alert(stri.replace(/are/ig,"mibing"));
           //alert(stri.substring(0,5));
           //alert(stri.split(""));
           //alert(stri.toLowerCase());
           //alert(stri.toUpperCase());
        </script>
        <style type="text/css">

            *{
                margin: 0;
                border: 0;
            }
            nav,footer{
                background-color: #7ecef3;
                width: 100%;
                height: 100%;
            }
            main{
                display:flex;
            }
            main (2048)#left{
                width: 300px;
                background-color:  #89c997;
            }
            main (2049)#content
            {
                flex: 1;
                background-color:  #53b9be;
            }
            @media (max-width: 480px) {
                main
                {
                    flex-direction: column;
                }
                main (2050)#left
                {
                    width: 100%;
                }
            }
        </style>
    </head>

    <body>
        <nav>导航栏</nav>
        <main>
            <div id="left">侧边栏</div>
            <div id="content">主要内容</div>
        </main>
        <footer>
            底部
        </footer>
    </body>
</html>

发表于 2020-03-10 14:15:59 回复(0)

许许如生

<!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">
    <title>Document</title>
</head>
<style>
*{
    padding: 0px;
    margin: 0px;
}
#content{
    display: flex;
    flex-flow: row wrap;
}
#left{
    width: 200px;
    background-color: salmon;
}
#right{
    height: 1000px;
    min-width: 240px;
    flex-grow: 1;
    background-color: seagreen;
}
@media (max-width: 480px) {
    #left{
        flex-grow: 1;
    }
}
</style>
<body>
<div id="nav" style="width:100%; height: 100px; text-align: center; font-size: 14px; background-color: #53b9be;">
    这是一个导航栏
</div>
<div id="content">
    <div id="left">我是左侧</div>
    <div id="right"></div>
</div>
<footer style="width:100%; height: 100px; text-align: center; font-size: 14px; background-color: #53b9be;">
    这是我的脚丫子,主要是网站简介
</footer>
</body>
</html>

发表于 2019-12-30 17:07:57 回复(0)

提交观点

问题信息

小米集团前端工程师 2018 HTML

来自：小米2018春季实习生...

上传者：小小

难度：

4条回答 45收藏 3520浏览

请用 HTML5CSS3 实现一个双...

问题信息

热门推荐

相关试题