css页面搭建案例

最新推荐文章于 2024-04-26 22:14:41 发布

cdwhy

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量751

点赞数 18

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/literarygirl/article/details/137121025

版权

案例1:

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            margin-left: 64px;
            margin-right: 64px;
            margin-bottom: 16px;
        }
        .inner{
            max-width: 72rem;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: flex-start !important;
            background-color: #888
        }
        .left{
            flex: 1 1 auto;
            max-width: 36rem;
            width: 100%;
            background: pink;
        }
        .right{
            flex: 1 1 auto;justify-content: center;    max-width: 36rem;display: flex;
            background-color: orange
        }
        .sticky{
            position: sticky;top: 0;
        }
        .sticky-inner{
            padding-left: 24px;
            padding-right: 24px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="inner">
            <div class="left">
                <div style="height:2600px;">
                    <h1>111</h1>
                    <h1>111</h1>
                    <h1>111</h1>
                    <h1>111</h1>
                    <h1>111</h1>
                    <h1>111</h1>
                    <h1>111</h1>
                    <h1>111</h1>
                </div>
            </div>
            <div class="right">
                <div class="sticky" style="height:500px;padding-top:20px;background: beige;">
                    <div class="sticky-inner">
                         <h1>111</h1>
                        <h1>111</h1>
                        <h1>111</h1>
                        <h1>111</h1>
                        <h1>111</h1>
                        <h1>111</h1>
                        <h1>111</h1>
                        <h1>111</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

案例2

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{position: relative;}
        .content{
            margin-right: 570px;
            background: #888888
        }
        .fixed-right{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            min-height: 100vh;
            width: 570px;
            border-left: 1px solid #e0e2d9;
        }
        .right-inner{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: inherit;
            background: goldenrod
        }

        .auto-width{
            display: flex;
            flex-direction: column;
            padding-bottom: 0 !important;
            position: relative;
            height: 2000px;
        }
        .section__inner{
            position: relative;
            height: 100%;
        }
        .primary{
            position: relative;
            padding: 0 16px 100px;
            max-width: 672px;
            margin: 0 auto;
            overflow-x: no-scroll;
        }
    </style>
</head>
<body>
    <body>
        <div class="wrap">
            <div class="content">
                <div class="fixed-right">
                    <div class="right-inner">右侧固定宽度</div>
                </div>
                <div class="auto-width">
                    <!-- <div class="section__inner">
                        <div class="primary"> <div class="" style="height:2000px;">左侧自适应宽度</div></div>
                    </div> -->
                    <h1>1111</h1>
                    <h1>2222</h1>
                    <h1>3333</h1>
                    <h1>4444</h1>
                    <h1>5555</h1>
                </div>
            </div>
        </div>
    </body>
</body>
</html>

案例3

<!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>
    *{margin: 0;padding:0;box-sizing: border-box;}
    .grid--config {
        height: 100%;
        position: relative;
        min-width:1000px;
    }
    .grid--no-gutters {
        padding: 0;
    }
    .config__container{
      /* grid-template-columns: 1fr 500px;
      min-height: calc(100vh - 3rem);
      display: grid;
      grid-template-columns: 1fr 400px; */
      margin-right: 400px;
    }



    .config__preview-col {
        display: flex;
        flex-direction: column;
        height: 100vh;
        max-width:400px;
        padding-top: 3.125rem;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        background-color: antiquewhite;
        border-left: 1px solid red;
        box-sizing: border-box;
        
    }
    .config__preview-top{
      border-bottom: 1px solid red;
      padding: 0.625rem;
      height: 54px;
      background-color: azure
    }
    .config__preview{
      display: block;
      flex: 1 0 auto;
      position: relative;
      background-color: aqua
    }
    .config__preview-title{
      bottom: 0;
      font-size: 1.25rem;
      font-weight: 700;
      left: 0;
      position: absolute;
      text-align: center;
      width: 100%;
      margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    }
    .config__phone {
      left: 50%;
      margin-top: -20px;
      position: absolute;
      top: 50%;
      max-width: 350px;
      width: 90%;
      transform: translate(-50%, -50%);
  }
  .v-ratio-box {
      display: block;
      position: relative;
  }
  .v-ratio-box::after {
    content: "";
    display: block;
    padding-top: 202.803738317757%;
}
  .v-ratio-box__inner {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  .v-scaled-device__inner {
      position: absolute;
      top: 0;
      left: 0;
      transform:scale(0.818, 0.818);
      transform-origin: top left;
  }
  .device-iphone-x {
      background: #222;
      border-radius: 68px;
      box-shadow: inset 0 0 2px 2px #c8cacb, inset 0 0 0 7px #e2e3e4;
      padding: 28px 26.5px;
      position: relative;
      height: 868px;
      width: 428px;
  }
  .device-iphone-x .device-frame {
    background: #fff;
    border-radius: 40px;
    position: relative;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
@media  screen and (max-height: 850px){
  .config__phone {
    max-width: 290px;
  }
  .v-scaled-device__inner {
      transform:scale(0.678, 0.678);
  }
}

@media screen and (min-width: 1200px){
  .config__preview-col {
    max-width: 500px;
  }
  .config__container{
      margin-right: 500px;
    }
}

  </style>
</head>
<body>
      <div class="grid--config">
        <div class="config__preview-col">
          <div class="config__preview-top">top</div>
          <div class="config__preview">
            <h3 class="config__preview-title">Quick View</h3>
            <div class="config__phone">
              <div class="v-ratio-box" >
                <div class="v-ratio-box__inner">
                  <div class="v-scaled-device__inner">
                    <div class="device-iphone-x">
                        <div class="device-frame"><h1>kkkkkkk</h1></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="config__container">
          <div class="" style="height:2600px;background:#FFC107;">hahhah a1111 wuwuwuwuwuuwu 11111111 1111xixixix ixixi xiheheh eheheheheh ehahahahah ahhaha</div>
        </div>
      </div>
</body>
</html>

cdwhy

关注

18
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css页面搭建案例

案例1:<!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&g
复制链接

扫一扫