zoukankan      html  css  js  c++  java
  • 框架

    <!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>
  • 相关阅读:
    C#中的委托和事件(续)【来自张子扬】
    C# 中的委托和事件[转自张子扬]
    .NET多线程编程入门
    python——configparser模块
    logger模块
    python——time模块
    os模块
    python——re模块
    selenium环境搭建
    iOS中的三大定时器
  • 原文地址:https://www.cnblogs.com/5254kghhgkj/p/11525672.html
Copyright © 2011-2022 走看看