html教程

Appearance

css操作 ​

border box ​

border-box
content-box
float a
float b
float c
vue
<style lang="scss" scoped>
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}
.clearfix {
  border: solid 1px red;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left: 20px;
}
</style>

<template>
  <div class="box">border-box</div>
  <div class="box content-box">content-box</div>
  <section>
    <article>
      <div class="clearfix">
        <div class="floated">float a</div>
        <div class="floated">float b</div>
        <div class="floated">float c</div>
      </div>
    </article>
  </section>
</template>
<style lang="scss" scoped>
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}
.clearfix {
  border: solid 1px red;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left: 20px;
}
</style>

<template>
  <div class="box">border-box</div>
  <div class="box content-box">content-box</div>
  <section>
    <article>
      <div class="clearfix">
        <div class="floated">float a</div>
        <div class="floated">float b</div>
        <div class="floated">float c</div>
      </div>
    </article>
  </section>
</template>

holyflex ​

.header
.left
.center
.right
.footer
vue
<style>
body {
  min-width: 550px;
  font-weight: bold;
  font-size: 20px;
}

.header,
.footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
}

.container {
  display: flex;
}

.container .column {
  text-align: center;
  height: 300px;
  line-height: 300px;
}

.center {
  flex: 1;
  background: rgb(206, 201, 201);
}

.left {
  width: 200px;
  background: rgba(95, 179, 235, 0.972);
}

.right {
  width: 150px;
  background: rgb(231, 105, 2);
}
</style>

<template>
  <div class="header">.header</div>
  <div class="container">
    <div class="left column">.left</div>
    <div class="center column">.center</div>
    <div class="right column">.right</div>
  </div>
  <div class="footer">.footer</div>
</template>
<style>
body {
  min-width: 550px;
  font-weight: bold;
  font-size: 20px;
}

.header,
.footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
}

.container {
  display: flex;
}

.container .column {
  text-align: center;
  height: 300px;
  line-height: 300px;
}

.center {
  flex: 1;
  background: rgb(206, 201, 201);
}

.left {
  width: 200px;
  background: rgba(95, 179, 235, 0.972);
}

.right {
  width: 150px;
  background: rgb(231, 105, 2);
}
</style>

<template>
  <div class="header">.header</div>
  <div class="container">
    <div class="left column">.left</div>
    <div class="center column">.center</div>
    <div class="right column">.right</div>
  </div>
  <div class="footer">.footer</div>
</template>

holygrid ​

.header
.left
.center
.right
.footer
vue
<style>
body {
  min-width: 550px;
  font-weight: bold;
  font-size: 20px;
}

.main {
  display: grid;
}
.header,
.footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.header {
  grid-row: 1;
  grid-column: 1/5;
}
.footer {
  grid-row: 3;
  grid-column: 1/5;
}
.column {
  text-align: center;
  height: 300px;
  line-height: 300px;
}
.left {
  grid-row: 2;
  grid-column: 1/2;
  background: rgba(95, 179, 235, 0.972);
}
.center {
  grid-row: 2;
  grid-column: 2/4;
  background: rgb(206, 201, 201);
}
.right {
  grid-row: 2;
  grid-column: 4/5;
  background: rgb(231, 105, 2);
}
</style>

<template>
  <div class="main">
    <div class="header">.header</div>
    <div class="left column">.left</div>
    <div class="center column">.center</div>
    <div class="right column">.right</div>
    <div class="footer">.footer</div>
  </div>
</template>
<style>
body {
  min-width: 550px;
  font-weight: bold;
  font-size: 20px;
}

.main {
  display: grid;
}
.header,
.footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.header {
  grid-row: 1;
  grid-column: 1/5;
}
.footer {
  grid-row: 3;
  grid-column: 1/5;
}
.column {
  text-align: center;
  height: 300px;
  line-height: 300px;
}
.left {
  grid-row: 2;
  grid-column: 1/2;
  background: rgba(95, 179, 235, 0.972);
}
.center {
  grid-row: 2;
  grid-column: 2/4;
  background: rgb(206, 201, 201);
}
.right {
  grid-row: 2;
  grid-column: 4/5;
  background: rgb(231, 105, 2);
}
</style>

<template>
  <div class="main">
    <div class="header">.header</div>
    <div class="left column">.left</div>
    <div class="center column">.center</div>
    <div class="right column">.right</div>
    <div class="footer">.footer</div>
  </div>
</template>

layout ​

header,content和footer等宽的单列布局

header与footer等宽,content略窄的单列布局

vue
<template>
  <section>
    <p>header,content和footer等宽的单列布局</p>
    <article class="lay1">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
    <p>header与footer等宽,content略窄的单列布局</p>
    <article class="lay2">
      <div class="header">
        <div class="nav"></div>
      </div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
  </section>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import 'layout.scss';
</style>
<template>
  <section>
    <p>header,content和footer等宽的单列布局</p>
    <article class="lay1">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
    <p>header与footer等宽,content略窄的单列布局</p>
    <article class="lay2">
      <div class="header">
        <div class="nav"></div>
      </div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
  </section>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import 'layout.scss';
</style>
vue
<template>
  <section>
    <p>header,content和footer等宽的单列布局</p>
    <article class="lay1">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
    <p>header与footer等宽,content略窄的单列布局</p>
    <article class="lay2">
      <div class="header">
        <div class="nav"></div>
      </div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
  </section>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import 'layout.scss';
</style>
<template>
  <section>
    <p>header,content和footer等宽的单列布局</p>
    <article class="lay1">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
    <p>header与footer等宽,content略窄的单列布局</p>
    <article class="lay2">
      <div class="header">
        <div class="nav"></div>
      </div>
      <div class="content"></div>
      <div class="footer"></div>
    </article>
  </section>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@import 'layout.scss';
</style>

Released under the MIT License.

Copyright © 2019-present yzqdev