在网页上绘制3个垂直带?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

我在网络开发方面是个新手。我试图画三个垂直带(蓝色,白色和红色),所有的顶部到底部的页面,但我不知道如何做。

提问于
用户回答回答于
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>SimpleByMe</title>
         </head>

         <style type="text/css">

       @media screen and (min-width: 480px) 
       {
        .col-lg-4{
         width: 33.33%;
        float: left;

        }

      .d1
      {
        background-color: green;
      }
      .d2
      {
        background-color: red;
      }
      .d3
      {
        background-color: blue;
      }


       </style>
      <body>

<!-- add data between <div> it will a automatically expand vertically  -->

         <div class ="col-lg-4 d1">1st</div>
        <div class ="col-lg-4 d2"> 2nd</div>
        <div class ="col-lg-4 d3"> 3rd</div>
       </body>
    </html>       
用户回答回答于

你可以用html { min-height: 100%; background: linear-gradient(to right,blue 33.33%, white 33.33%, white 66.66%, red 66.66%); }

参看 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

演示:

html {
  min-height: 100%;
  background: linear-gradient(to right,blue 33.33%, white 33.33%, white 66.66%, red 66.66%);
}

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    7 粉丝1 提问10 回答
  • 四无君

    0 粉丝0 提问3 回答
  • 旺仔小小鹿

    社区 · 运营 (已认证)

    46 粉丝0 提问2 回答
  • 拉布拉多拉不多

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券