简单布局框架结构

效果展示：

代码演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>技术交流分享网站</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: #EBEBE9;
        }
        #header1{
            display: flex;
            justify-content: center;
            font-size: 15px;
            color:#595959;
            width: 80%;
            height:40px;
            line-height: 40px;
            /*text-align: center;*/
            margin: 0 auto;
            cursor: pointer;
        }
        .headl{
            width: 80%;
            height: 40px;

        }
        .headr{
            width: 20%;
            height:40px;
            line-height: 40px;
            text-align: center;
        }
        hr{
            width: 100%;
        }
        #header2{
            width: 80%;
            height: 100px;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
        }
        .logo{
            width: 70%;
            height: 100%;
            color: #ff0000;
            font-weight: bolder;
            font-size: 48px;
        }
        .search {
            width: 30%;
            height: 80%;
            /*margin: auto 0;*/
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
        }

        .inp{
            padding: 2px;
            width: 80%;
            height: 30px;
            border-radius: 38px;
            border: none;
            outline: none;
            background-color: #FFFFFF;
            margin: 1px;
            font-size: 20px;
            /*display: flex;*/
            /*justify-content: center;*/
        }
        .inp-l{
            /*height: 15px;*/
            width: 80%;
            height: 80%;
            margin: 3px 2px;
            /*margin-top: 3px;*/
            background-color: #EDEFEC;
            border-radius: 10px;
            float: left;
            border: 0;
        }
        input{
            outline: none;
        }
        input:focus{
            outline: none;
        }

        #nav{
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: #0266a3;
            border-radius: 20px;
            box-shadow:0 15px 35px rgba(0,0,0,0.1);
        }
        a{
            width: 100px;
            height: 20px;
            margin: 20px 70px;
            display: flex;
            justify-content: space-around;
            text-decoration: none;
            color: #FFFFFF;
            background-color: transparent;

        }
        ul li {
            width: 20%;
            text-align: center;
            display: flex;
            justify-content: space-around;
            background-color: transparent;

            /*background-color: #0266a3;*/
            list-style: none;
            float: left;
        }
        #body1{
            width: 100%;
            /*把行高和div高度设置成一样的，是因为 vertical-align 是相对于line-heigjt设置的*/
            height: 300px;
            line-height: 300px;
            background-color: aqua;
            /*水平居中*/
            text-align: center;
        }
        .switch{
            /*对于vertical-align来说对行内元素起作用*/
            display: inline-block;
            vertical-align: middle;
            width: 80%;
            height: 274px;
            background-color: dodgerblue;

        }

        #footer{
            width: 100%;
            height: 60px;
            background-color: aqua;
            margin: 0 auto;

        }
        .location{

            color: #EBEBE9;
            background-color: aqua;
            margin: 0 auto;
        }
        .footertop{
            width: 22%;
            height: 60%;
            font-size: 150%;
        }
        .footerbottom{
            width: 26%;
            height: 40%;
            font-size: 90%;
        }
        #body2{
            width: 80%;
            height: 320px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .bd{
            width: 48%;
            height: 100%;

            background-color: #0266a3;
        }
        hr{
            border: 2px solid antiquewhite;
            /*color: antiquewhite;*/
        }
        
    </style>
</head>
<body>
<div id="header1">
    <div class="headl">您好，欢迎来到技术交流分享社区！</div>
    <div class="headr">登录 | 注册 | Chinese</div>
</div>
<hr/>
<div id="header2">
    <div class="logo">l o g o</div>
    <div class="search">
        <div class="inp">
            <input type="text" placeholder="请输入搜索内容" class="inp-l">| 搜索
        </div>
    </div>
</div>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">展览介绍</a></li>
        <li><a href="#">经典展览</a></li>
        <li><a href="#">信息反馈</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
<div id="body1">
    <div class="switch"></div>
</div>
<div id="body2">
    <div class="bodyleft bd">
        <div class="bod1"></div>
<!--        <hr/>-->
        <div class="bod2"></div>
        <div class="bod3"></div>
    </div>
    <div class="bodyright bd"></div>
</div>
<div id="footer">
    <div class="footertop location">AAAA | BBBB | CCCC | DDDD</div>
    <div class="footerbottom location"> Copyright @1999-2021 虎康在线教育 | 晋ICP备13019762号</div>
</div>
</body>
</html>
posted @ 2021-08-23 15:38  博客zhu虎康  阅读(104)  评论(0)  编辑  收藏  举报