html教程

Appearance

layout ​

flex布局 ​

A
B
C
D
E
vue
<template>
  <div id="content">
    <div class="box" style="background-color: red">A</div>
    <div class="box" style="background-color: lightblue">B</div>
    <div class="box" style="background-color: yellow">C</div>
    <div class="box1" style="background-color: brown">D</div>
    <div class="box1" style="background-color: lightgreen">E</div>
  </div>
</template>

<style lang="scss" scoped>
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
</style>
<template>
  <div id="content">
    <div class="box" style="background-color: red">A</div>
    <div class="box" style="background-color: lightblue">B</div>
    <div class="box" style="background-color: yellow">C</div>
    <div class="box1" style="background-color: brown">D</div>
    <div class="box1" style="background-color: lightgreen">E</div>
  </div>
</template>

<style lang="scss" scoped>
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
</style>

flow 布局 ​

vue
<style lang="scss" scoped>
.wrap {
  float: left;

  position: relative;
  left: 50%;
  clear: both;
}
.wrap-center {
  left: -50%;
  width: 400px;
  height: 400px;
  background-color: aqua;
}
.parent {
  position: relative;
  height: 600px;
}
.left {
  position: absolute;
  left: 0;
  width: 100px;
  border: 2px solid red;
}
.right {
  position: absolute;
  right: 0;
  width: 100px;
  border: 2px solid red;
}
.center {
  position: absolute;
  left: 100px;
  right: 100px;
  border: 2px solid red;
}
</style>

<template>
  <div class="wrap"><div class="wrap-center"></div></div>

  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</template>
<style lang="scss" scoped>
.wrap {
  float: left;

  position: relative;
  left: 50%;
  clear: both;
}
.wrap-center {
  left: -50%;
  width: 400px;
  height: 400px;
  background-color: aqua;
}
.parent {
  position: relative;
  height: 600px;
}
.left {
  position: absolute;
  left: 0;
  width: 100px;
  border: 2px solid red;
}
.right {
  position: absolute;
  right: 0;
  width: 100px;
  border: 2px solid red;
}
.center {
  position: absolute;
  left: 100px;
  right: 100px;
  border: 2px solid red;
}
</style>

<template>
  <div class="wrap"><div class="wrap-center"></div></div>

  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</template>

菜单 ​

vue
<style lang="scss" scoped>
.demo-ul {
  margin-bottom: 300px;
}
.demo-ul li {
  padding: 0 10px;
  width: 100px;
  background: #f90;
  position: relative;
}
.demo-ul li a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.demo-ul li ul {
  position: absolute;
  width: 100%;
  top: 40px;
  left: 0;
  transform: scaleY(0);
  overflow: hidden;
}
.ul-transition ul {
  transform-origin: 0 0;
  transition: all 0.5s;
}
.demo-ul li:hover ul {
  transform: scaleY(1);
}
.demo-ul li ul li {
  float: none;
  background: #0099ff;
}
</style>

<template>
  <div class="demo-hover demo-ul t_c">
    <ul class="fllil">
      <li>
        <a href="javascript:;">html</a>
        <ul>
          <li><a href="#">div</a></li>
          <li><a href="#">h1</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">js</a>
        <ul>
          <li><a href="#">string</a></li>
          <li><a href="#">array</a></li>
          <li><a href="#">object</a></li>
          <li><a href="#">number</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">css3</a>
        <ul>
          <li><a href="#">transition</a></li>
          <li><a href="#">animation</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">框架</a>
        <ul>
          <li><a href="#">vue</a></li>
          <li><a href="#">react</a></li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </div>
  <div class="demo-hover demo-ul ul-transition t_c">
    <ul class="fllil">
      <li>
        <a href="javascript:;">html</a>
        <ul>
          <li><a href="#">div</a></li>
          <li><a href="#">h1</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">js</a>
        <ul>
          <li><a href="#">string</a></li>
          <li><a href="#">array</a></li>
          <li><a href="#">object</a></li>
          <li><a href="#">number</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">css3</a>
        <ul>
          <li><a href="#">transition</a></li>
          <li><a href="#">animation</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">框架</a>
        <ul>
          <li><a href="#">vue</a></li>
          <li><a href="#">react</a></li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </div>
</template>
<style lang="scss" scoped>
.demo-ul {
  margin-bottom: 300px;
}
.demo-ul li {
  padding: 0 10px;
  width: 100px;
  background: #f90;
  position: relative;
}
.demo-ul li a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.demo-ul li ul {
  position: absolute;
  width: 100%;
  top: 40px;
  left: 0;
  transform: scaleY(0);
  overflow: hidden;
}
.ul-transition ul {
  transform-origin: 0 0;
  transition: all 0.5s;
}
.demo-ul li:hover ul {
  transform: scaleY(1);
}
.demo-ul li ul li {
  float: none;
  background: #0099ff;
}
</style>

<template>
  <div class="demo-hover demo-ul t_c">
    <ul class="fllil">
      <li>
        <a href="javascript:;">html</a>
        <ul>
          <li><a href="#">div</a></li>
          <li><a href="#">h1</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">js</a>
        <ul>
          <li><a href="#">string</a></li>
          <li><a href="#">array</a></li>
          <li><a href="#">object</a></li>
          <li><a href="#">number</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">css3</a>
        <ul>
          <li><a href="#">transition</a></li>
          <li><a href="#">animation</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">框架</a>
        <ul>
          <li><a href="#">vue</a></li>
          <li><a href="#">react</a></li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </div>
  <div class="demo-hover demo-ul ul-transition t_c">
    <ul class="fllil">
      <li>
        <a href="javascript:;">html</a>
        <ul>
          <li><a href="#">div</a></li>
          <li><a href="#">h1</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">js</a>
        <ul>
          <li><a href="#">string</a></li>
          <li><a href="#">array</a></li>
          <li><a href="#">object</a></li>
          <li><a href="#">number</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">css3</a>
        <ul>
          <li><a href="#">transition</a></li>
          <li><a href="#">animation</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">框架</a>
        <ul>
          <li><a href="#">vue</a></li>
          <li><a href="#">react</a></li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </div>
</template>

Released under the MIT License.

Copyright © 2019-present yzqdev