• 框架


    <!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>
  • 相关阅读:
    使用RestTemplate进行服务调用的几种方式
    springmvc学习指南 之---第32篇 mybatis 嵌套的处理
    springmvc学习指南 之---第31篇 使用墨客进行测试报错
    springmvc学习指南 之---第30篇 异常的全局处理
    Effective Java 阅读笔记--之(一) 建造者模式(Builder)
    使用mybatis-generator.xml 生成PO 对象
    springmvc学习指南 之---第29篇 springmvc 返回json对象, 不想创建类的前提下
    springmvc学习指南 之---第28篇 springmvc的controller 如何解析视图view? 如何解析json,html,jsp?
    springmvc学习指南 之---第27篇 spring如何实现servlet3.0无web.xml 配置servlet对象的
    springmvc学习指南 之---第26篇 在idea中如何debug跟踪到tomcat内部代码
  • 原文地址:https://www.cnblogs.com/5254kghhgkj/p/11525672.html
Copyright © 2020-2023  润新知