• 框架


    <!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>
        <style>
            body,div,h1,h3,h4,p,ul,header,nav,article, section, aside, footer {
                margin: 0;
                padding: 0;
            }
            body{
                
                background-color: #dddddd;
            }
            .header {
                margin: 10px;
                /* padding: 10px; */
                border: 1px solid #444444;
                 100%;
                height: 100px;
                background-color: #000000;
                
            }  
            .Link {
                list-style: none; outline: none;
            }
            .Link1 {
                float: right;
                list-style: none; outline: none;
                 
            }
            .middle {
                /* display: flex; */
                border: 1px solid #444444;
                 100%;
                height: 650px;
                /* flex-direction: column;
                flex-wrap: nowrap; */
                margin: 10px;
            }
            .clear {
                clear: both;
            }
            .middle-left {
                border: 1px solid #444444;
                 70%;
                height: 650px;
                /* margin: 10px; */
                 
                /* display: flex; */
                float: left;
            }
            .left-top {
                border: 1px solid red;
                 98%;
                height: 300px;
                margin: 10px;
            }
            .image-top {
                background-color: gray;
                margin: 10px;
                height: 100px;
            }
            .image-foot {
                background-color: gray;
                margin: 10px;
                height: 100px;
            }
            .left-foot {
                border: 1px solid red;
                 98%;
                height: 300px;
                margin: 10px;
            }
            .middle-right {
                border: 1px solid #444444;
                 25%;
                height: 650px;
                /* position: absolute; */
                float: left;
            }
            .right-top {
                border: 1px solid #000000;
                 95%;
                height: 150px;
                margin: 10px;
            }
            .image {
                background-color: gray;
                margin: 10px;
                height: 50px;
            }
            .right-among {
                border: 1px solid #000000;
                 95%;
                height: 250px;
                margin: 10px;
            }
            .image1 {
                background-color: gray;
                margin: 10px;
                height: 200px;
            }
            .right-foot {
                border: 1px solid #000000;
                 95%;
                height: 100px;
                margin: 10px;
            }
            .footer {
                margin: 10px;
                border: 1px solid #000000;
                height: 100px;
                 100%;
            }
        </style>
    </head>
    <body>
        <div><center>
            <h1>My Website</h1>
            <p>Resize the browser window to see the effect.</p>
        </center></div>
           <div class="header">
               <nav>
                   <a href="#" class="Link">Link</a>
                   <a href="#" class="Link">Link</a>
                   <a href="#" class="Link">Link</a>
                   <a href="#" class="Link1">Link</a>

               </nav>
           </div>
           <div class="middle">
               <div class="middle-left">
                   <div class="left-top">
                       <h3>TITLE HEADING</h3>
                       <P>Title description, Dec 7,2017</P>
                       <div class="image-top">Image</div>
                       <h4>Some text.</h4>
                       <p>Sunt in culpa offocoa deserunt molllit anim id est laborum consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magan aliqua. Ut enim an minim veniam,
                        quis nostrud exercitation ullamco.</p>
                   </div>
                   <div class="left-foot">
                    <h3>TITLE HEADING</h3>
                    <P>Title description, Dec 7,2017</P>
                    <div class="image-foot">Image</div>
                    <h4>Some text.</h4>
                    <p>Sunt in culpa offocoa deserunt molllit anim id est laborum consectetur adipiscing elit,
                     sed do eiusmod tempor incididunt ut labore et dolore magan aliqua. Ut enim an minim veniam,
                     quis nostrud exercitation ullamco.</p> 
                   </div>
               </div>
               <div class="middle-right">
                   <div class="right-top">
                       <h4>About Me</h4>
                       <div class="image">Image</div>
                       <p>Some text about me in culpa qui offcia deserunt mollit anim..</p>
                   </div>
                   <div class="right-among">
                       <h4>Popular Post</h4>
                       <div class="image1">
                           <div class="image">Image</div>
                           <div class="image">Image</div>
                           <div class="image">Image</div>
                       </div>
                   </div>
                   <div class="right-foot">
                       <h4>Follow Me</h4>
                       <p>Some text..</p>
                   </div>
               </div>
           </div>
           <div class="footer">Footer</div>
    </body>
    </html>
  • 相关阅读:
    Java基础学习总结(41)——JPA常用注解
    Java基础学习总结(41)——JPA常用注解
    【云速建站】视频播放专题
    一招教你如何修复MySQL slave中继日志损坏问题
    【nodejs原理&源码赏析(3)】欣赏手术级的原型链加工艺术
    【云速建站】后台数据批量导入导出
    【云速建站】会员注册弹窗添加及设置
    【nodejs原理&源码赏析(2)】KOA中间件的基本运作原理
    【nodejs原理&源码赏析(1)】Express中间件系统的基本实现
    补习系列(5)-springboot- restful应用
  • 原文地址:https://www.cnblogs.com/5254kghhgkj/p/11525672.html
Copyright © 2020-2023  润新知