CSS盒子模型及弹性盒子布局实战

豆约翰
112 阅读3分钟

先上效果

image.png

1 HTML骨架

一张封面，需要有这么几个信息：

1.梗概 2.文章名称 3.作者 4.简介

我们来把这些东西填上去，然后随便编一点数据

<ul class='items'>
    <li class='item'>
        <div class='item-banner'>
            <div class='item-header'>生活中总是充满了乐趣</div>
            <div class='item-name'>聊聊我的大学室友</div>
            <div class='item-author'>@张三 著</div>
        </div>
        <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
</ul>

当前效果图 image.png

2 添加图书封面整体样式

    .items .item {
            width: 230px;
            height: 320px;
            background: #ccc;
            list-style: none;
            text-align:center;
        }

image.png

3 banner部分添加背景色，文字颜色

.item-banner {
    background: #666;
    color: #FFF;
}

image.png

4 header部分的文字调整

.item-header {
    font-size: 12px;
    line-height: 52px;
}

image.png

5 文章名称的样式调整

.item-name {
    font-size: 22px;
    line-height: 74px;  
}

image.png

6 作者区域字体样式调整

.item-author {
    font-size: 14px;
    text-indent: 7em;
    padding-bottom: 70px;
}

image.png

7 简介部分

.item-description {
    background: #eee;
    height: 104px;
    line-height: 76px;
    text-indent: 3em;
    font-size: 12px;
}

image.png

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .items .item {
            width: 230px;
            height: 320px;
            background: #ccc;
            list-style: none;
            text-align:center;
        }

        .item-banner {
            background: #666;
            color: #FFF;
        }
        .item-header {
            font-size: 12px;
            line-height: 52px;
        }
        .item-name {
            font-size: 22px;
            line-height: 74px;
        }
        .item-author {
            font-size: 14px;
            text-indent: 7em;
            padding-bottom: 70px;
        }
        .item-description {
            background: #eee;
            height: 104px;
            line-height: 76px;
            text-indent: 3em;
            font-size: 12px;
        }
    </style>
</head>
<body>
<ul class='items'>
    <li class='item'>
        <div class='item-banner'>
            <div class='item-header'>生活中总是充满了乐趣</div>
            <div class='item-name'>聊聊我的大学室友</div>
            <div class='item-author'>@张三 著</div>
        </div>
        <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
</ul>
</body>
</html>

图书列表

复制7个li，七本图书。 ul容器设成弹性盒子布局

1718333308472.png

最终源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .items .item {
      width: 230px;
      height: 320px;
      background: #ccc;
      list-style: none;
      text-align: center;
    }

    .item-banner {
      background: #666;
      color: #FFF;
    }

    .item-header {
      font-size: 12px;
      line-height: 52px;
    }

    .item-name {
      font-size: 22px;
      line-height: 74px;
    }

    .item-author {
      font-size: 14px;
      text-indent: 7em;
      padding-bottom: 70px;
    }

    .item-description {
      background: #eee;
      height: 104px;
      line-height: 76px;
      text-indent: 3em;
      font-size: 12px;
    }

    .items {
      width: 1000px;
      margin: 100px auto;
      display: flex;
      flex-wrap: wrap;
      /* border: 1px solid red; */
    }

    .item {
      margin-right: 20px;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <ul class='items'>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
    <li class='item'>
      <div class='item-banner'>
        <div class='item-header'>生活中总是充满了乐趣</div>
        <div class='item-name'>聊聊我的大学室友</div>
        <div class='item-author'>@张三 著</div>
      </div>
      <div class='item-description'>那些回忆，那些事。。。</div>
    </li>
  </ul>
</body>

</html>

最终效果

1718333426824.png

avatar
文章
阅读
粉丝