前端学习日志之复刻Bookstrap部分板块

最新推荐文章于 2022-11-25 16:36:28 发布

汤原儿

最新推荐文章于 2022-11-25 16:36:28 发布

阅读量138

点赞数 3

文章标签：前端学习 css html css3

本文链接：https://blog.csdn.net/m0_59537414/article/details/125913878

版权

BookStrap页面部分复刻

页面布局分析

页面分为两部分：

题头部分
内容部分

在这里插入图片描述

题头部分

题头就是简单的三个标签：h1标题标签、p标签、hr水平线标签
为这三个标签设置css样式

<h1>Bootstrap相关优质项目推荐</h1>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
<hr>

		h1{
   
            font-size: 42px;
            font-weight: 500;
            color: #393333;
            text-align: center;
            margin: 0;
            padding-top: 20px;
            padding-bottom: 10px;
        }
        p{
   
            font-size: 14px;
            color: #555555;
            text-align: center;
            margin: 0;
            padding-top: 8px;
            line-height: 22px;
        }
       hr{
   
            width: 684px;
            margin-bottom: 50px;
            margin-top: 30px;
            color: #EEEEEE;
        }

内容部分

内容部分可以将八个模块写成八个div，放在一个大的div中。
因为div是块元素，不设置css样式直接放置会变成竖向排列，想要变成横向排列要设置display: float。这里不使用display: inline-block是因为行内块元素会产生一些留白导致八个模块七上八下的，无法对齐，所以使用左飘的方式使div横向排列。
想要盒子四个一行，给每个div设置宽度width，再给外部的div设置宽度width，宽度最好是能放下四个div多一点点，这样以便于设置盒子的margin外边距。
想要整个div居中，设置margin:0 auto;即可
注意文字居中，text-align: center，但是有的每行文字并不是对齐的才换行的，这里使用的是在每行文字后面加上br换行标签，这样文字排列是每行从多到少排列比较美观。
这里的每个模块下面的介绍文本采用的p标签，此处css样式使用的和题头部分一样不用再重复设置。

<div>
        <div class="d1">
            <a href=""><img src="img/1.png" alt="图片加载失败"></a>
            <a href="">
                <h2>优站精选</h2>
            </a>
            <a href=""><span>Bootstrap 网站实例</span></a>
            <p>Bootstrap 优站精选频道收集了众多基<