Question

image to recreate in html

<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        .bluebox {
            float: left;
            width: 200px;
            height: 200px;
            margin: 1em;
            border: solid black 1px;
            background-color: blue;
        }

        .greenbox {
            float: left;
            width: 200px;
            height: 200px;
            margin: 1em;
            border: solid black 1px;
            background-color: green;
        }

        .yellowbox {
            float: left;
            width: 200px;
            height: 200px;
            margin: 1em;
            border: solid black 1px;
            background-color: yellow;
        }

        .orangebox {
            float: left;
            width: 200px;
            height: 800px;
            margin: 1em;
            border: solid black 1px;
            background-color: orange;
        }

        p {
            display: inline-block;
            text-align: center;
            width: 600px;
            border: solid 1px red;
            margin-top: -50px;
            padding-left: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 20px;
        }

    </style>

    <body>
        <section>
            <section>
                <section>
                <div class="bluebox"></div>
                <div class="greenbox"></div>
                </section>
                <section>

                </section>
            </section>
            <div class="yellowbox"></div>
        </section>
        <section>
            <div class="orangebox"></div>
        </section>


        <p>Hello World! how r <strong>u?</strong></p>
    </body>

</html>

enter code here

我已经开始创建这个图像并在中间部分碰到一个凹凸。我可以在bootstrap中重新创建，但我正试图以旧时尚方式去做。任何帮助将不胜感激。

Answer 1

试试这段代码。希望你这样想。

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      .outerdiv{
        background-color:white;
        height:450px;width:450px;
        display:block;
        border:1px solid black;
      }
      
      .outerdiv div{position:relative;margin:3px;padding:1px;}
      .blue, .green, .yellow, .black{height:100px;width:100px;display:inline-block;}
      .blue{background-color:blue;}
      .green{background-color:green;}
      .yellow{background-color:yellow;}
      .orange{background-color:orange;height:430px;width:100px;display:inline-block;vertical-align:top;float:right;}
      .cyan, .green1, .green2{width:100px;}
      .cyan{background-color:cyan;height:50px;}
      .green1{background-color:lightgreen;height:50px;}
      .green2{background-color:green;height:100px;}
      .black{background-color:black;border:54px solid red;}
      .inner_container1{display:inline-block;padding:0;}
      .white{border:1px solid brown;height:85px;width:320px;}
    </style>
  </head>

  <body>
    <div class="outerdiv">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="yellow"></div>
        <div class="orange"></div>
        <div class="black"></div>
        <div class="inner_container1">
        <div class="cyan"></div>
          <div class="green1"></div>
          <div class="green2"></div>
        </div>
        <div class="white"></div>
        
        
    </div>
  </body>

</html>

＆＃13;

使用html和css重新创建图像

1 个答案: